Image Handler 2 (for ZC v1.3.8 ONLY) Support

[tophand]

Tophand...thanks for the suggestion about the stylesheet...I really did not find a way to use that...however, here is what I did to successfully eliminate the product name from the hover image.

I modified jscript_imagehover.js near the end of the file where it reads:

Original is highlighted in blue...changes in red.

newHTML = '<div><h1>' + title + '</h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';

to read as follows:

newHTML = '<div><h1></h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';

There may be other ways to do this but this worked for me.

Then, there was still another factor that I did not like, namely that the original product listing image also pops up the name of the product and that name overlays the hovered image for several seconds...so to get a cleaner look and eliminate that popupped product name, I modified product_listing.php as follows in the area of the file towards the end where it deals with the image:

case 'PRODUCT_LIST_IMAGE':
        $lc_align = 'center';
        if ($listing->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) {
          $lc_text = '';
        } else {
          if (isset($_GET['manufacturers_id'])) {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          } else {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          }
        }
        break;

I modified it to read as follows:

case 'PRODUCT_LIST_IMAGE':
        $lc_align = 'center';
        if ($listing->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) {
          $lc_text = '';
        } else {
          if (isset($_GET['manufacturers_id'])) {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_model'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          } else {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_model'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          }
        }
        break;

Note that I changed the field to be displayed by the mouseover from the product name to the product model. However, since I do not show the product model on my listing pages, the mouseover also shows nothing at all. If someone else uses the model number on this page then a slightly different solution would have to be made but I have left it at this for now as it makes it easy to switch back to the name if I should choose to do so at a later time.

All in all I am quite happy with this solution as it gives my zoom image a clean look, uncluttered either by an overlay of the name from the original image or from the name appearing at the top of the larger hovered image.

Nice but with the stlyesheet all you had to do was make 1 little change.
style_imagehover.css
Change font size to 0%

[pharry]

A link help us help you.

http://www.apeekintoyesterday.com

[maineiac13]

Nice but with the stlyesheet all you had to do was make 1 little change.
style_imagehover.css
Change font size to 0%

Thanks...that would have been an easy way to get rid of the titles in the zoomed images....though it does not do the second thing I wanted to do...namely also eliminate the original images' title tags that pop-up...partially obscuring the zoomed image....


I think I have found a way to get rid of those pop-ups as well on a global basis as opposed to the way I did it above which requires action on lots of files to deal with many different kinds of images...namely to modify includes/functions/html_output.php to change the two times the following phrase appears

$image .= ' title=" '

to instead read:

$image .= ' title="" '

I still need to make sure this will work thoughout all images .... but if it does, it will greatly reduced the work needed to keep those popups from overlaying the zoomed image.

[ckosloff]

$image .= ' title="" '

What you found is a typo/bug in a Zen Cart core file.
I have already modified to put double quotes nested inside single quotes.
Doesn't seem to make much difference though, PHP is quite forgiving.

[ckosloff]

Sorry, no bug, file should not be modified.
I reported it as a bug and got some lessons on PHP instead.
http://www.zen-cart.com/forum/showthread.php?t=134518

[Renz]

Hi All,
Does anyone know why the images in the categories are displayed in different sizes.
I thought Image Handler would output them all the same size
like 80x80 or 120x120 or 300X300.

An example of what I am talking about can be seen by following this link, I have tried to manipulate my Images settings and to look for a solution in the forum but have not been successful in either.
If you can assist I would be most grateful.

http://www.adulttoys4u.com.au/shop/i...ort=20a&page=2

This page shows some 100x75 or 60x80 or 80X80 just an assortment of sizes, that I cannot control

Thanking
Renz

[maineiac13]

What you found is a typo/bug in a Zen Cart core file.
I have already modified to put double quotes nested inside single quotes.
Doesn't seem to make much difference though, PHP is quite forgiving.

Sorry, no bug, file should not be modified.
I reported it as a bug and got some lessons on PHP instead.
http://www.zen-cart.com/forum/showthread.php?t=134518

I think you may have misunderstood the point of my post...it was not that there was anything wrong in the original version of the file...instead, I wanted to prevent the "title" action from taking place...so I simply added the second quote mark so that the "title" action would be ignored. That way when you mouseover an image the image title tag will not pop up. I was intentionally trying to do that so that when the hover image comes up it is not partially obscured by the title tag of the image.

[jazznuts699]

Hi All,
Does anyone know why the images in the categories are displayed in different sizes.
I thought Image Handler would output them all the same size
like 80x80 or 120x120 or 300X300.

An example of what I am talking about can be seen by following this link, I have tried to manipulate my Images settings and to look for a solution in the forum but have not been successful in either.
If you can assist I would be most grateful.

http://www.adulttoys4u.com.au/shop/i...ort=20a&page=2

This page shows some 100x75 or 60x80 or 80X80 just an assortment of sizes, that I cannot control

Thanking
Renz

check the size of your image source files -- i think they all have to be the same size to begin with so that they all resize the same way. For example i start with 640x514 as my source (large file)... then _MED is resized to 300x240 and _SM is resized to 168x134. Looking at what you wrote above i would start with source files of 300x300 to start with.

you may also need to setup your images to the same size in admin > configuration > images (see second code box below -- note that i have watermark enabled)

also i would recommend installing the additional files for IH2 -- it allows for rollover images of the product details page (looks much better than 'click for larger image')

below is what my images settings look like -- (admin > configuration > images):

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

this is what your settings page should look like -- i think:

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

last word of caution -- if your large files do not appear it may be because your source file is larger than your max IH image size. For example my source file is 640x514 however i set my max size as 700x800 so that when i do upload an image thats larger than 640x514 the new file appears when i hover over it. So in your case if your source files are 300 x XXX i would change the max height to a slightly higher number than the highest XXX (300 x 400 if your largest file is 300 x 399 for example).

hope this helps

[ckosloff]

I think you may have misunderstood the point of my post..

I did misunderstand, just saw the truncated code and the "missing double quote" and jumped at it, my bad.
Anyway, I don't see any need to implement the modification you are talking about.
But please feel free to modify Zen Cart at will.

[maineiac13]

Anyway, I don't see any need to implement the modification you are talking about.
But please feel free to modify Zen Cart at will.

I don't think you intended it....but your comment sort of sounded like I had sought out your opinion on whether or not my modification was "needed"...which of course I hadn't or that I had asked your permission to modify Zen Cart...which I also didn't do...I was merely pointing out a modification that I found useful for me and posting a way to do it in case some others might find it useful for them.