Image Manager addon

[familynow]

Should I be looking in my js folder or the php file that calls the function?

[familynow]

Just reporting a few things back...

i) Possible bug:
I had deleted the uploads folder a while back just to keep things as clean and secure as possible and as it turns out IM doesn't like this. Even-though I specified a folder _other than the uploads folder_ & IM acknowledged said folder and stated the rights were correct IM would not re-upload until I created a images/uploads/ folder. FYI I'm still using an alternate folder for temp. but now that the uploads/ folder exists I no longer get any errors and the image is re-uploaded.

ii) The suggested method of changing the Maximum Large Image Width/Height in the config to match the small image sizes and re-uploading in the hopes IM will add the image as LRG as well doesn't work. I don't get any errors but IM still shows it as "missing".

Also, on a somewhat unrelated note, I'd like to suggest the ability to rename file extensions. That would be awesome. From my perspective this would be nice because many files were uploaded as .jpeg instead of .jpg. In trying to maintain consistency throughout my site, I've been diligently renaming these. But it's somewhat painful to do. If IM could do this it'd be great!

[familynow]

Now that I think of it, would it not be simpler to just add a upload link when a large is deemed "missing"?

I think the problem with the workaround of changing the config to the small size is that 1) IM complains it's less than that of the admin setting(dunno if that is actually a factor) and 2) if the image size is different in height or in width you can't accommodate that. ie I think in many cases product images are not square. In my case almost none are...Since IM doesn't like a setting of 0 for height or width it will never ask to "use small" if one of the dimensions is under the value set.

[familynow]

What JS do you have for displaying the large images?

The file is called xdarkbox.js

$(document).ready(function() {

		$('#productMainImage a').click(function() {
			
			var link = $(this);
	
			if(!$('div.darkbox-frame').length) {
				
				darkbox = $('<div class="darkbox-frame"><div class="darkbox-shadow"></div><div class="darkbox-canvas"><div class="darkbox-button"></div></div></div>').appendTo('body');
			}

			var frame = darkbox.clone().appendTo('body').addClass('darkbox-frame-on');

			var shadow = frame.find('div.darkbox-shadow').animate({opacity:0.8},300);
			var canvas = frame.find('div.darkbox-canvas');
			var button = frame.find('div.darkbox-button');

			var image = $('<img src="'+ link.attr('href') +'" alt="'+ link.attr('title') +'"/>');

			image.appendTo(canvas);
			image.load(function(){

				var imageWidth = image.width();
				var imageHeight = image.height();
				var frameWidth = frame.width()-40;
				var frameHeight = frame.height()-40;

				if(imageWidth > frameWidth) {

					imageWidth = frameWidth;
					image.width(imageWidth);					
					while(image.height() > frameHeight) {
						image.width(imageWidth);
						imageWidth--;
					}

					imageHeight = image.height();
				}

				if(imageHeight > frameHeight) {

					imageHeight = frameHeight;
					image.height(imageHeight);						
					while(image.width() > frameWidth) {
						image.height(imageHeight);
						imageHeight--;
					}

					imageWidth = image.width();
				}
				
				canvas.addClass('darkbox-canvas-load').animate({

					width:imageWidth,
					marginLeft:-imageWidth/2,
					height:imageHeight,
					marginTop:-imageHeight/2

				},500,function() {

					canvas.addClass('darkbox-canvas-done');
					button.addClass('darkbox-button-on');
					button.addClass(navigator.platform.toLowerCase().indexOf('mac')+1?'darkbox-button-left':'darkbox-button-right');

					image.animate({opacity:1},500,function() {

						shadow.click(closer);
						button.click(closer);

					});
				});
			});

			var closer = function() {
		
				canvas.remove();
				shadow.animate({opacity:0},300,function() {
					frame.remove();
				});
			}

			$(document).keydown(function(e) {
				if(e.which==27) closer();
			});

			return false;
		});
	});

[beyre]

This is a continuation of the email conversation we had, but might be beneficial to someone here.

Originally, I was uploading .png images and was having background color problems. That got sorted and continued to upload the transparent background .png photos for the products.

There are 3 product images per product (different views). All the images are the same original size: 300 x 450

When creating the product, I upload the first image as per usual. Then I go to Image Manager and:

1) Copy from Small for Large and Medium sizes.
2) "SHRINK" the small image.

3) Add in the additional 2nd and 3rd product images.
4) Copy from Small for Large and Medium sizes.
5) Combined replace/resize for the small image.

If I accidentally do Combined replace/resize for the first image, the Large version of the image is fuzzy. That does not happen for the 2nd and 3rd additional images. I do not know why the first image's "small" needs to be treated differently than the 2 additional image's "small".

Now, to try and correct the fuzzy large image, I wipe out ALL 3 product images for that particular product and delete manually those product images via FTP. Then I go back into editing the product and upload the first product image. Then go back to IM to do the process all over again, this time correctly doing "shrink" on the first image's "small" .... however, this does not correct the issue. It's almost as if IM keeps a memory. No matter what I do, I can't fix the problem on those images.

Any suggestions?

Here is one product for example ... for the main product image, click to enlarge and you will see the fuzziness. I accidentally clicked "Combined replace/resize" for the small version of it. Whereas, I've been doing "ShrinK" for the main product image with no problems.

http://www.caofficedesign.com/shop/i...products_id=58

And this one, I did "shrink" for the first image and the large version is just fine.

http://www.caofficedesign.com/shop/i...products_id=59

Confused.

Why do you have to do "shrink" for the first image's small version and "combined replace/resize" for the 2nd and 3rd image's small version?

And why does wiping all 3 product images completely from the system and reloading them NOT fix the large image fuzzy issue when I reload them correctly the 2nd time (ie, do shrink on the 1st product image's small version)????

[boudewijn]

This is a continuation of the email conversation we had, but might be beneficial to someone here.

Originally, I was uploading .png images and was having background color problems. That got sorted and continued to upload the transparent background .png photos for the products.

There are 3 product images per product (different views). All the images are the same original size: 300 x 450

When creating the product, I upload the first image as per usual. Then I go to Image Manager and:

1) Copy from Small for Large and Medium sizes.
2) "SHRINK" the small image.

3) Add in the additional 2nd and 3rd product images.
4) Copy from Small for Large and Medium sizes.
5) Combined replace/resize for the small image.

If I accidentally do Combined replace/resize for the first image, the Large version of the image is fuzzy. That does not happen for the 2nd and 3rd additional images. I do not know why the first image's "small" needs to be treated differently than the 2 additional image's "small".

Now, to try and correct the fuzzy large image, I wipe out ALL 3 product images for that particular product and delete manually those product images via FTP. Then I go back into editing the product and upload the first product image. Then go back to IM to do the process all over again, this time correctly doing "shrink" on the first image's "small" .... however, this does not correct the issue. It's almost as if IM keeps a memory. No matter what I do, I can't fix the problem on those images.

Any suggestions?

Here is one product for example ... for the main product image, click to enlarge and you will see the fuzziness. I accidentally clicked "Combined replace/resize" for the small version of it. Whereas, I've been doing "ShrinK" for the main product image with no problems.

http://www.caofficedesign.com/shop/i...products_id=58

And this one, I did "shrink" for the first image and the large version is just fine.

http://www.caofficedesign.com/shop/i...products_id=59

Confused.

Why do you have to do "shrink" for the first image's small version and "combined replace/resize" for the 2nd and 3rd image's small version?

And why does wiping all 3 product images completely from the system and reloading them NOT fix the large image fuzzy issue when I reload them correctly the 2nd time (ie, do shrink on the 1st product image's small version)????

What strikes me, is that the popup link for the additional images is different from that of the main image. The additional image links explicitly point to the large image, while the main image link does not. So I'm not sure that the large image of the main picture actually is displayed in the popup.

[boudewijn]

i) Possible bug:
I had deleted the uploads folder a while back just to keep things as clean and secure as possible and as it turns out IM doesn't like this. Even-though I specified a folder _other than the uploads folder_ & IM acknowledged said folder and stated the rights were correct IM would not re-upload until I created a images/uploads/ folder. FYI I'm still using an alternate folder for temp. but now that the uploads/ folder exists I no longer get any errors and the image is re-uploaded.

This actually was a bug. It will be fixed in the next version of IM. Thanks for noticing and reporting!

[boudewijn]

ii) The suggested method of changing the Maximum Large Image Width/Height in the config to match the small image sizes and re-uploading in the hopes IM will add the image as LRG as well doesn't work. I don't get any errors but IM still shows it as "missing".

I'm getting convinced that all the time, we try to make a work around in IM for a disfunction somewhere else. ZC by default fixes missing large and even medium size images by adjusting the filename to a file that is present, with a lower resolution. Apparantly, darkbox doesn't make use of this ability. So I think the problem is there.
From the JS I cannot read (which may be my lack of knowledge of JS) what image name is passed to the script. Likely that is in the PHP code of the page.

[boudewijn]

Also, on a somewhat unrelated note, I'd like to suggest the ability to rename file extensions. That would be awesome. From my perspective this would be nice because many files were uploaded as .jpeg instead of .jpg. In trying to maintain consistency throughout my site, I've been diligently renaming these. But it's somewhat painful to do. If IM could do this it'd be great!

I'm not sure how to do that. In any case it will affect the products information, which mentiones the filename of the image. Furthermore, I don't want to introduce an open rename method that enables you to rename anything to anything. So what rules should apply to a rename action?

[beyre]

What strikes me, is that the popup link for the additional images is different from that of the main image. The additional image links explicitly point to the large image, while the main image link does not. So I'm not sure that the large image of the main picture actually is displayed in the popup.

Ok ... so ... what do I do?

I haven't altered any of the image links in regards to customizing ZC, other than whatever your addon alters. So I don't know why the popup link would be different than what it should be.

Right now, I'm replacing the Monthly Specials products as it is a new month, thus new products on special.

The first product I changed was the Laminate Conference Table and the popup image is fuzzy. And that was after completely deleting the original (previous product's) image and uploading the new product's image.

Just to clarify, I do not have a problem when uploading a product pic for the first time. But if I have to replace a product pic, that is when I have a problem with the fuzziness factor.