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

[DivaVocals]

This would appear to be a very common problem, I have searched and reviewed quite a few threads with this common issue but have not found any solution yet. I have verified the IH installation and each of the effected php files. I must be missing something.

Not common at all unless IH4 is not installed correctly or if your server is configured using old configuration specifications and therefore blocks the auto installer.. Post your image settings (ALL of them not just the IH image settings).. Can't help by guessing.. need more details.. Do you have any other image mods installed?? a lightbox perhaps???

You should know that IH4 has not been yet updated for the current version of Zen Cart.. The yet unreleased updated version is on my GitHub repo (link posted here a page or two back). Doubtful that this is a version incompatibility issue though.. But wanted to throw that out there..

BTW, the image hover only works on the small images.. It doesn't apply to the image on the products info page (as is explained in the readme and in this support thread)

[michaelchu]

The image hover is functioning correctly. The issue is the zoom function. The product image is displayed with the option of click to zoom to bring up the large picture, the pop up window size is calculated from a call to the image height and width, but instead of calling the dimensions of the larger image, the smallest is picked up. So the end result is a tiny window displaying the small image when the user click on the product image to enlarge. Granted you can resize the pop up window and make the image bigger but i think everyone would agree that is counter intuitive.

i fudged the code here to get the popup window/image sized correctly:
/includes/modules/pages/popup_image/jscript_main.php
/includes/modules/pages/popup_image_additional/jscript_main.php

original code
imgHeight = document.images[0].height+20-i;
imgWidth = document.images[0].width+20;

new code
imgHeight = document.images[0].height+810-i;
imgWidth = document.images[0].width+590;

[DivaVocals]

The image hover is functioning correctly. The issue is the zoom function. The product image is displayed with the option of click to zoom to bring up the large picture, the pop up window size is calculated from a call to the image height and width, but instead of calling the dimensions of the larger image, the smallest is picked up. So the end result is a tiny window displaying the small image when the user click on the product image to enlarge. Granted you can resize the pop up window and make the image bigger but i think everyone would agree that is counter intuitive.

i fudged the code here to get the popup window/image sized correctly:
/includes/modules/pages/popup_image/jscript_main.php
/includes/modules/pages/popup_image_additional/jscript_main.php

original code
imgHeight = document.images[0].height+20-i;
imgWidth = document.images[0].width+20;

new code
imgHeight = document.images[0].height+810-i;
imgWidth = document.images[0].width+590;

Right and while this solves YOUR resizing issue, this is not a reproducible condition in a clean Zen Cart install with IH4 installed. This is not a fix that will be incorporated into IH4, because it cannot be consistently reproduced, and I'm not suggesting that anyone else implement this change either...

IH4 is NOT working on your site.. None of your product and category images are being served from the bmz_image cache folder.. This is a telling sign that IH4 is not configured/installed/running correctly..

[DivaVocals]

Right and while this solves YOUR resizing issue, this is not a reproducible condition in a clean Zen Cart install with IH4 installed. This is not a fix that will be incorporated into IH4, because it cannot be consistently reproduced, and I'm not suggesting that anyone else implement this change either...

IH4 is NOT working on your site.. None of your product and category images are being served from the bmz_image cache folder.. This is a telling sign that IH4 is not configured/installed/running correctly..

There needs to be a LOT more information provided to determine why your site is not handling the larger images correctly..

[michaelchu]

Here is the list of what has been installed in the order it was installed:
ZC v1.5.4 clean install, empty database
Responsive All Business template v1.0 for ZC v1.5.x from Picaflor
FedEx Web services by Numinix
IH v4.3.2

Here is the list of image config:
mall Image Width 60
Small Image Height 100
Heading Image Width - Admin 57
Heading Image Height - Admin 40
Subcategory Image Width 60
Subcategory Image Height 100
Calculate Image Size true
Image Required true
Image - Shopping Cart Status 1
Image - Shopping Cart Width 100
Image - Shopping Cart Height 200
Category Icon Image Width - Product Info Pages 300
Category Icon Image Height - Product Info Pages 300
Top Subcategory Image Width 150
Top Subcategory Image Height 85
Product Info - Image Width 300
Product Info - Image Height 300
Product Info - Image Medium Suffix _MED
Product Info - Image Large Suffix _LRG
Product Info - Number of Additional Images per Row 3
Image - Product Listing Width 60
Image - Product Listing Height 100
Image - Product New Listing Width 60
Image - Product New Listing Height 100
Image - New Products Width 60
Image - New Products Height 100
Image - Featured Products Width 60
Image - Featured Products Height 100
Image - Product All Listing Width 60
Image - Product All Listing Height 100
Product Image - No Image Status 1
Product Image - No Image picture no_picture.gif
Image - Use Proportional Images on Products and Categories 1
IH resize images yes
IH small images filetype no_change
IH small images background 255:255:255
IH small images compression quality 85
IH small images watermark no
IH small images zoom on hover yes
IH small images zoom on hover size Medium
IH medium images filetype no_change
IH medium images background 255:255:255
IH medium images compression quality 85
IH medium images watermark no
IH large images filetype no_change
IH large images background 255:255:255
IH large images compression quality 85
IH large images watermark no
IH large images maximum width
IH large images maximum height
IH watermark gravity Center

I am not certain as to how you determined that the images are not served from bmz_image. I only uploaded 2 product pictures via IH, both were resized by IH and placed in the correct places. If you are correct and IH is not working and the images are not from bmz_image, then what else would automatically resize the 2 images I uploaded using IH and place them in the correct locations?

Here is a screen shot of IH and the resized pics, let me know if you need any other info to trouble shoot:

[DivaVocals]

Here is the list of what has been installed in the order it was installed:
ZC v1.5.4 clean install, empty database
Responsive All Business template v1.0 for ZC v1.5.x from Picaflor
FedEx Web services by Numinix
IH v4.3.2

Here is the list of image config:
mall Image Width 60
Small Image Height 100
Heading Image Width - Admin 57
Heading Image Height - Admin 40
Subcategory Image Width 60
Subcategory Image Height 100
Calculate Image Size true
Image Required true
Image - Shopping Cart Status 1
Image - Shopping Cart Width 100
Image - Shopping Cart Height 200
Category Icon Image Width - Product Info Pages 300
Category Icon Image Height - Product Info Pages 300
Top Subcategory Image Width 150
Top Subcategory Image Height 85
Product Info - Image Width 300
Product Info - Image Height 300
Product Info - Image Medium Suffix _MED
Product Info - Image Large Suffix _LRG
Product Info - Number of Additional Images per Row 3
Image - Product Listing Width 60
Image - Product Listing Height 100
Image - Product New Listing Width 60
Image - Product New Listing Height 100
Image - New Products Width 60
Image - New Products Height 100
Image - Featured Products Width 60
Image - Featured Products Height 100
Image - Product All Listing Width 60
Image - Product All Listing Height 100
Product Image - No Image Status 1
Product Image - No Image picture no_picture.gif
Image - Use Proportional Images on Products and Categories 1
IH resize images yes
IH small images filetype no_change
IH small images background 255:255:255
IH small images compression quality 85
IH small images watermark no
IH small images zoom on hover yes
IH small images zoom on hover size Medium
IH medium images filetype no_change
IH medium images background 255:255:255
IH medium images compression quality 85
IH medium images watermark no
IH large images filetype no_change
IH large images background 255:255:255
IH large images compression quality 85
IH large images watermark no
IH large images maximum width
IH large images maximum height
IH watermark gravity Center

I am not certain as to how you determined that the images are not served from bmz_image. I only uploaded 2 product pictures via IH, both were resized by IH and placed in the correct places. If you are correct and IH is not working and the images are not from bmz_image, then what else would automatically resize the 2 images I uploaded using IH and place them in the correct locations?

Here is a screen shot of IH and the resized pics, let me know if you need any other info to trouble shoot:

Your small and medium images appear to be coming from the bmz_cache folder.. If you right click on the product image on the product page you posted, this is the image URL: https://www.waterbabiesbikini.com/ze...ge.199x300.jpg. The small image URL is: https://www.waterbabiesbikini.com/ze...mage.60x90.jpg

The large product image is not coming from the bmz_cache folder at all.. Click on the "larger image" link, and right click on the image in the popup window.. This is the URL of the image: https://www.waterbabiesbikini.com/ze...m%20bikini.jpg. Note that this image is NOT being served from the bmz_cache folder.. and this is because you have NOTHING in the large image settings.. (I JUST tested this use case and confirmed that this is what will happen if you have no values in EITHER the large height or width)

Now this doesn't resolve the original issue you had with the large image popup, and it's not an issue I can replicate.. It's also not something that's been noted as a known issue at all.. I am unable to say what the cause MIGHT be as it seems to be part of your specific setup...

[DivaVocals]

Your small and medium images appear to be coming from the bmz_cache folder.. If you right click on the product image on the product page you posted, this is the image URL: https://www.waterbabiesbikini.com/ze...ge.199x300.jpg. The small image URL is: https://www.waterbabiesbikini.com/ze...mage.60x90.jpg

The large product image is not coming from the bmz_cache folder at all.. Click on the "larger image" link, and right click on the image in the popup window.. This is the URL of the image: https://www.waterbabiesbikini.com/ze...m%20bikini.jpg. Note that this image is NOT being served from the bmz_cache folder.. and this is because you have NOTHING in the large image settings.. (I JUST tested this use case and confirmed that this is what will happen if you have no values in EITHER the large height or width)

Now this doesn't resolve the original issue you had with the large image popup, and it's not an issue I can replicate.. It's also not something that's been noted as a known issue at all.. I am unable to say what the cause MIGHT be as it seems to be part of your specific setup...

Need to add this:
"NOT being served from the bmz_cache folder" = your large images are NOT optimized NOR are they resized by IH4.. IH4 needs the image dimensions so that it can pass the image parameters to GD so that the image can be processed.. You will be able to use the IH4 admin tools to upload images, but your large images will NOT be optimized.. IH4/Zen Cart will instead serve up the original un-processed large image..

[DivaVocals]

the pop up window size is calculated from a call to the image height and width, but instead of calling the dimensions of the larger image, the smallest is picked up. So the end result is a tiny window displaying the small image when the user click on the product image to enlarge.

Forgot one last thing.. Thinking that not having large image dimensions defined in the IH image settings is the likely cause of your original issue..

[michaelchu]

Thanks for looking into this. After carefully reviewing your suggestion and testing, here is what I found (so far):
According to the configuration description for IH large image under admin-configuration-images:
"IH large images maximum height
Specify a maximum height for your large images. If width and height are empty or set to 0, no resizing of large images is done."
This simply tells me that IH will not resize the image.
I have tried to enter the dimensions and here is what I found out. If I entered dimensions that exactly the same or larger than the original image, IH will not resize the image and it will be served from the directory where IH uploaded the image to. However, if the dimensions are set to something less than the full size of the original image, IH will resize the image to fit and this will be served from bmz_cache. This however will not resolve the issue of the image being served in thumbnail size. Here is a screenshot of how the image appears and the code, note that it is now from bmz_cache and the dimension is defined as 650x978.

[DivaVocals]

Thanks for looking into this. After carefully reviewing your suggestion and testing, here is what I found (so far):
According to the configuration description for IH large image under admin-configuration-images:
"IH large images maximum height
Specify a maximum height for your large images. If width and height are empty or set to 0, no resizing of large images is done."
This simply tells me that IH will not resize the image.
I have tried to enter the dimensions and here is what I found out. If I entered dimensions that exactly the same or larger than the original image, IH will not resize the image and it will be served from the directory where IH uploaded the image to. However, if the dimensions are set to something less than the full size of the original image, IH will resize the image to fit and this will be served from bmz_cache. This however will not resolve the issue of the image being served in thumbnail size. Here is a screenshot of how the image appears and the code, note that it is now from bmz_cache and the dimension is defined as 650x978.

If there is NO re-sizing, then there is NO processing of the images by IH4 at all, and so YES, they will be served up from their original location. You are also correct that in order for the image to be re-sized and cached that at least ONE of the set dimensions in the settings must be LESS than the original image dimensions. This applies NOT just for the large images, but the small and medium images as well if you choose to upload a separate image for small and medium images versus letting IH4 create these images for you.. There are a FEW small image settings, and Zen Cart allows you to set them all differently if you so desire (ie: specials thumbnails can be different dimensions than the new products thumbnails for example), but in doing so, you will not be able to use the IH4 image hover feature. IH4's image hover feature is disabled if the small thumbnails on the product listings are not ALL the same dimensions..

The reasoning behind the re-sizing logic is that IH4's PRIMARY purpose is to handle all of the re-sizing and image optimization work for you. If you upload images sized and compressed, you would NOT want the image processed again.. So it requires the image dimensions settings to determine if it should process an image or not.

The history behind this assumption is this:
Many shopowners have images that are sized at very large dimensions from digital cameras or supplier supplied pics. Many of these images are 2000+ pixels (height or width) and are at a very high resolutions which increase the overall image size. Historically shopowners would use these images and rely on "artificially" re-sizing the image dimensions using CSS or inline styling with default Zen Cart settings.. While the images would LOOK the right size, these techniques merely changes the screen output, but behind the scenes these images are still the same size and dimensions and when they load, they will impact the page load. Many shopowners do not have the photo editing tools (or skillset to use them) to edit their image sizes, and optimize them for the web. Also for many busy shopowners, this editing and optimization work is time consuming.

IH4 takes the work out of photo optimization by not only sizing the images to the dimensions the shopowner desires on the fly, it compresses the images so the file size is reduced and this helps with page load/performance.

If the large images being uploaded are ALREADY sized to the shopowners preferences then IH4 will do no work on the large images. It will then process the small and medium images UNLESS the shopowner uploads a specific small and medium image. Again, if the small and medium images uploaded are already re-sized to the specs set in the image settings, then IH4 will not process them.

Thinking that before I submit the IH4 update I have in the works that I should update the configuration on screen instructions and perhaps add a little sumthin' to the readme to cover this a little better..

That said your original reported issue with the thumbnail being served up when you click the larger image is still not an issue that I can replicate. Without more widespread reporting of this issue (it's not a "common" issue as you originally asserted), and the ability to replicate this issue, I do not believe it is an IH4 issue. Suggest you try downloading the version on my Github repo which has been updated for v1.5.4 of Zen Cart and see if it works WITHOUT your modification..