Image Handler 4 (for v1.5.x) Support Thread

[grantopt]

How does the background color work. For my small images, I selected the settings of "png" and background color of "'-transparent-". But its still rendering as white. I wanted to make it match the odd and even rows of the product listing page like the IH4 example shows. Currently all my images are jpg. If I understand correctly, imagemagick would convert them on the fly to png? Or would I have to initially made my pictures with png transparent backgrounds as the default images and then it would work. If that is the case I will live with a white background on all images as it would be tedious to get them converted to pngs.

[DivaVocals]

How does the background color work. For my small images, I selected the settings of "png" and background color of "'-transparent-". But its still rendering as white. I wanted to make it match the odd and even rows of the product listing page like the IH4 example shows. Currently all my images are jpg. If I understand correctly, imagemagick would convert them on the fly to png? Or would I have to initially made my pictures with png transparent backgrounds as the default images and then it would work. If that is the case I will live with a white background on all images as it would be tedious to get them converted to pngs.

Explained n the readme..

[grantopt]

Explained n the readme..

Read it again. I know that Imagemagick can convert jpg images to png transparency with scripts. But I don't know if image handler has that functionality to make use of imagemagick scripts. Is their a place I can add scripts inside the files to convert the jpgs background to transparency. This seems the only way I can use the background color settings.

This is what I tested this morning.

1) I have 2 pictures, 1 in jpg with white background and 1 in png with alpha transparency
2) Uploaded each of them to separate product listings
3) Changed settings in IH4 to use 255:0:0 (red) background color and use filetype png
4) On viewing the catalog side, only the product with the default png image shows a red background. But the default jpg (png IH4 converted) still has the white background.

When viewing the image source, it does show that the jpg was converted to a png in the bmz cache folder.

So basically what I am asking does IH4 only change the filetype? And what I suspect is that IH4 does not make use of scripts to convert backgrounds to alpha transparent. The readme does not cover this as it gives examples of uploading a jpg in the above example and using other filetypes for resize images. And then moves to the topic of background colors. Unless it is to be assumed that you have to start with a gif or png with a transparent background then I understand how it is covered in the readme.

[gilby]

From the readme
"If you want to keep the transparency of an uploaded image, you need to set the background color value to transparent."

This implies to me that you need to have a transparent background to start with.

Having used various photo tools to remove backgrounds and then clean up what is left manually.
I doubt there is a photo tool that can do this automagically and give a satisfactory result.

So I cannot see that IH would be set up or able to do this either.

[DivaVocals]

The readme does not cover this as it gives examples of uploading a jpg in the above example and using other filetypes for resize images. And then moves to the topic of background colors. Unless it is to be assumed that you have to start with a gif or png with a transparent background then I understand how it is covered in the readme.

true.. However, your original question didn't give me any indication what you were asking after either.. (it was a bit broad.. hence why I pushed you back to the readme..)

From the readme
"If you want to keep the transparency of an uploaded image, you need to set the background color value to transparent."

This implies to me that you need to have a transparent background to start with.

Having used various photo tools to remove backgrounds and then clean up what is left manually.
I doubt there is a photo tool that can do this automagically and give a satisfactory result.

So I cannot see that IH would be set up or able to do this either.

Exactly.. IH4 can convert filetype (JPG --> PNG), but adding a transparent background to a converted image?? No.. IH4 doesn't do this.. To see the background color, start with an image with a transparent background and the background color in the settings will show through..

[k1ra]

I've got an odd issue. I just upgraded IH4 to the latest version, 4.3.2, and now my image swap does not work. I did not seem to have this problem with IH 4.2.

Image that was just replaced and image swap is not swapping correct image:

r o s e c i t y v i n t a g e [dot] com/index.php?main_page=product_info&cPath=1_5&products_id=384

Image that for some reason is not being resized, and working correctly

r o s e c i t y v i n t a g e [dot] com/index.php?main_page=product_info&cPath=1_5&products_id=74


My modified code in modules/additional_images.php is in red and TEXT_CLICK_TO_ENLARGE has been removed:

    $thumb_regular = zen_image($base_image, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT);
    $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);

    // Link Preparation:
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />TEXT_CLICK_TO_ENLARGE</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
	//edited for no 'larger image' link
    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional"></span>TEXT_CLICK_TO_ENLARGE</a>' : $thumb_regular ) . '</noscript>';
	//edited for no 'larger image' link
	
      //    $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';
$link = '<a href="' .  $base_image . '">' . $thumb_regular . '</a>';
    $link = $script_link . "\n      " . $noscript_link;
     //    $link = $alternate_link;

[delia]

K1ra,

Image swap would be an entirely different mod and I assume you probably overwrote some necessary files when you installed image handler. The image swap javascript or jQuery may also conflict with image handler.

Diva, of worthy note and may have been posted before in this thread:

I installed image handler and ran into a problem with the image on the product page requiring the use of the _MED image which doesn't exist at all. I finally figured out that the ImageMagick version is only 3. So if anyone runs into this problem and checks this thread, perhaps this will be of some use to them.

[DivaVocals]

I've got an odd issue. I just upgraded IH4 to the latest version, 4.3.2, and now my image swap does not work. I did not seem to have this problem with IH 4.2.

Image that was just replaced and image swap is not swapping correct image:

r o s e c i t y v i n t a g e [dot] com/index.php?main_page=product_info&cPath=1_5&products_id=384

Image that for some reason is not being resized, and working correctly

r o s e c i t y v i n t a g e [dot] com/index.php?main_page=product_info&cPath=1_5&products_id=74


My modified code in modules/additional_images.php is in red and TEXT_CLICK_TO_ENLARGE has been removed:

    $thumb_regular = zen_image($base_image, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT);
    $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);

    // Link Preparation:
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />TEXT_CLICK_TO_ENLARGE</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
    //edited for no 'larger image' link
    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional"></span>TEXT_CLICK_TO_ENLARGE</a>' : $thumb_regular ) . '</noscript>';
    //edited for no 'larger image' link
    
      //    $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';
$link = '<a href="' .  $base_image . '">' . $thumb_regular . '</a>';
    $link = $script_link . "\n      " . $noscript_link;
     //    $link = $alternate_link;

Not to be nit picky.. but I personally found it was a PITA to put back together your URL JUST to look at the links you posted.. So I just looked at this today because I have time for playing with a copy, paste, and reassemble puzzle to take a look at your link.. (might be why not many folks responded to your question..)

going forward if you want to post links that don't gt picked up my the search engines simply typing http://rosecityvintage[dot]com/index.php?main_page=product_info&cPath=1_5&products_id=74 (without all the extra spaces) would have done the trick..

Your additional images are being forced to be 75px x 100px in your stylesheet.css.

Hope that helps,

Not just additional images but their sidebox images too..


.sideBoxContent img { width:100px; height:75px; }

Furthermore NONE of the product images appear to be managed by IH4 at all.. So in short IH4 is installed wrong..