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

[DivaVocals]

Okay, sorry, glad that I described what I saw. So, with the eyeitalia site, I see that the image is 250x600 with a bmz resize of 600x600 and the border of the window is to the sides of the image at that dimension. So, what would be expected to be different? Should the height be 550?

With the code copied, which version of the all caps height and width was used? could you try replacing with the $ih variable(s)? $ihConf['large']['width'] and $ihConf['large']['height'] respectively.

When you click the large image link on the EyeItalia site, you will see that the popups for the large images are not resizing to the size of the large image (as they should)

[DivaVocals]

(Timed out on edit) Also, be sure that you are using the code snippets (with applicable replacements) that were posted to this forum. I realize I may have sent some code earlier, but I would say that the code has been simplified and as said seems to be working on my site at whatever size I set the maximum to in the admin area.

I used the code you posted to this thread.. I updated the additional_images.php module file with the code you posted, and reverted the tpl_main_image.php popup file to the version in the IH4 v4.3.1 fileset.. The result is that the popup DOES show the correct image from the bmz_cache instead of the "no image" product picture.. The problem is that the popup window does not re-size to match the size of the image displayed in the popup.

additional images code used

  for ($i=0, $n=$num_images; $i<$n; $i++) {
    $file = $images_array[$i];
    $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
//  Begin Image Handler changes 1 of 2
//next line is commented out for Image Handler
    if (function_exists('handle_image')) {
        $newimg = handle_image($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT);
        list($src, $alt, $width, $height, $parameters) = $newimg;

        $products_image_large = zen_output_string($src);
    } 
    
    $flag_has_large = file_exists($products_image_large);
//  End Image Handler changes 1 of 2
    $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
    $flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
    $base_image = $products_image_directory . $file;
    $thumb_slashes = zen_image(addslashes($base_image), addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
//  Begin Image Handler changes 2 of 2
//  remove additional single quotes from image attributes (important!)
    $thumb_slashes = preg_replace("/([^\\\\])'/", '$1\\\'', $thumb_slashes);
//  End Image Handler changes 2 of 2
    $thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_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>';

    $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">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $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 = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => "\n      " . $link);
    $col ++;
    if ($col > (IMAGES_AUTO_ADDED -1)) {
      $col = 0;
      $row ++;
    }
  } // end for loop

Finally a link where you can see the errant popup behavior:
http://eitestsite(dot)eyeitalia(dot)...roducts_id=331

[EHSI]

And again.. this is not normal behavior.. So you either have something configured incorrectly or you have uploaded images incorrectly.. Please tell me.. Do you see a "Delete" button below the small, medium, or large images (it would be just below the image sizes you see) in the IH4 admin

Ummm yeah we would see it on the front end which is why we REPEATEDLY ask people to post links to their site.. One image or twelve, we can still see the behavior.. So help us help you by providing the information we ask for..

OK, the link to the store is http://www.augustica.com/Store/index.php

To answer your send question about the delete button, I am attaching a screenshot:

[DivaVocals]

OK, the link to the store is http://www.augustica.com/Store/index.php

To answer your send question about the delete button, I am attaching a screenshot:

Can't see this screenprint.. a yes or no response was all that was needed..

I suggest deleting the image and re-uploading it, and tell us what happens..

[EHSI]

Can't see this screenprint.. a yes or no response was all that was needed..

I suggest deleting the image and re-uploading it, and tell us what happens..

No, there is no delete button immediately below images. The whole horizontal area from the left of the screen to the right is a clickable hyperlink. If I click on the hyperlink (or any of the three images), then I am presented with three buttons - edit, delete, and new file.

I already deleted and re uploaded image several times. The result is the same - all three images are of the same size.

[DivaVocals]

Thank you for the reply.

I know the size of the images because IH4 shows the size of each image below the image. I DO NOT insert three images, I only insert one image (default one) and it is my large image with the size of 150K. Again, in the first installation of the IH4, I saw that all three images had different sizes. Not in this installation. In this installation all three images have the size of 150K.

Posting a link to the product section will not help. First, there is only one product and one image. Second, you would not know that there is a problem by looking at the image at the front of the store. The problem is visible only at the control panel because IH4 shows that ALL three images (small, medium, and large) have the same size of 150K.

Here is the copy of the Image settings:

Title Value Action
Small Image Width 150
Small Image Height
Heading Image Width - Admin 57
Heading Image Height - Admin 40
Subcategory Image Width 150
Subcategory Image Height
Calculate Image Size true
Image Required true
Image - Shopping Cart Status 1
Image - Shopping Cart Width 150
Image - Shopping Cart Height
Category Icon Image Width - Product Info Pages 150
Category Icon Image Height - Product Info Pages
Top Subcategory Image Width 150
Top Subcategory Image Height
Product Info - Image Width 400
Product Info - Image Height
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 200
Image - Product Listing Height
Image - Product New Listing Width 200
Image - Product New Listing Height
Image - New Products Width 200
Image - New Products Height
Image - Featured Products Width 200
Image - Featured Products Height
Image - Product All Listing Width 200
Image - Product All Listing Height
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 1050
IH large images maximum height 770
IH watermark gravity Center


Thank you for your attention to this problem.

You have the image hover turned on, but you have not followed the steps in the readme for configuring it properly.. The cached images are not showing (the original image is). Tells me that IH4 is not installed correctly.. Suggest double checking your install.. some or all of the modified files IH4 needs to re-size and correctly pull images from your bmz_cache folder are not in place..

This is a straightforward install, and if you review this support thread, you will see that the issues you are reporting are unique to your store.. So the BEST thing to do at this point is to rollback to a pre-IH4 install state and start over.. OR perhaps you might consider paying someone to help you get this installed and properly configured for you..

[mc12345678]

I used the code you posted to this thread.. I updated the additional_images.php module file with the code you posted, and reverted the tpl_main_image.php popup file to the version in the IH4 v4.3.1 fileset.. The result is that the popup DOES show the correct image from the bmz_cache instead of the "no image" product picture.. The problem is that the popup window does not re-size to match the size of the image displayed in the popup.

additional images code used

  for ($i=0, $n=$num_images; $i<$n; $i++) {
    $file = $images_array[$i];
    $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
//  Begin Image Handler changes 1 of 2
//next line is commented out for Image Handler
    if (function_exists('handle_image')) {
        $newimg = handle_image($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT);
        list($src, $alt, $width, $height, $parameters) = $newimg;

        $products_image_large = zen_output_string($src);
    } 
    
    $flag_has_large = file_exists($products_image_large);
//  End Image Handler changes 1 of 2
    $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
    $flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
    $base_image = $products_image_directory . $file;
    $thumb_slashes = zen_image(addslashes($base_image), addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
//  Begin Image Handler changes 2 of 2
//  remove additional single quotes from image attributes (important!)
    $thumb_slashes = preg_replace("/([^\\\\])'/", '$1\\\'', $thumb_slashes);
//  End Image Handler changes 2 of 2
    $thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_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>';

    $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">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $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 = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => "\n      " . $link);
    $col ++;
    if ($col > (IMAGES_AUTO_ADDED -1)) {
      $col = 0;
      $row ++;
    }
  } // end for loop

Finally a link where you can see the errant popup behavior:
http://eitestsite(dot)eyeitalia(dot)...roducts_id=331

Okay, so I finally figured out what you have tried to tell me but I couldn't get into my thick head. Apparently the popup is coming in at a width that is too small and the image is being squashed from the sides. I was able to expand the width of the image and it began appearing as more appropriately expected.

At the moment, I am only guessing since I have not started with a fresh cart and applied IH4 to it, but one thing I see is that I have the following jscript_main.php file in the includes/modules/pages/popup_image directory, and am wondering if it has an effect because it seems to address some of the size issues described. I tried disabling the file from my site, but the resizing on my side still worked. I haven't experienced a "shrink" of the image and do not know where the value of 250 is coming from for the width. Also, the images that I get to appear on my site, if I were to shrink the window, the image doesn't shrink with it like how yours expands with the window until at least 600x600 and then shrinks again with a shrinking window.
Do you have the following jscript_main.php file installed in the includes/modules/pages/popup_image directory?

<?php
/**
 * jscript_main
 *
 * @package page
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: jscript_main.php 3126 2006-03-07 03:09:40Z drbyte $
 */
?>
<script language="javascript" type="text/javascript"><!--
var i=0;
function resize() {
  i=0;
//  if (navigator.appName == 'Netscape') i=20;
  if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
      i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
  } else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
      i=0; //This browser is Internet Explorer 6.x
  } else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
      i=25; //This browser is Firefox on Windows
  } else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
      i=45; //This browser is Mozilla on Windows
  } else {
      i=80; //This is all other browsers including Mozilla on Linux
  }
  if (document.documentElement && document.documentElement.clientWidth) {
//    frameWidth = document.documentElement.clientWidth;
//    frameHeight = document.documentElement.clientHeight;

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

  var height = screen.height;
  var width = screen.width;
  var leftpos = width / 2 - imgWidth / 2;
  var toppos = height / 2 - imgHeight / 2;

    frameWidth = imgWidth;
    frameHeight = imgHeight+i;

  window.moveTo(leftpos, toppos);


//  window.resizeTo(imgWidth, imgHeight);
  window.resizeTo(frameWidth,frameHeight+i);
	}
  else if (document.body) {
    window.resizeTo(document.body.clientWidth, document.body.clientHeight-i);
  }
  self.focus();
}
//--></script>

Not sure if this was supposed to be a part of the IH4 package or not, or if it was part of another installation, but it appears to handle some of what you are describing.

[EHSI]

You have the image hover turned on, but you have not followed the steps in the readme for configuring it properly.. The cached images are not showing (the original image is). Tells me that IH4 is not installed correctly.. Suggest double checking your install.. some or all of the modified files IH4 needs to correctly pull images from your bmz_cache folder are not in place..

OK, thank you. I know that something is rotten here. The first installation worked properly with all three images being different.

Tonight, I will re-upload IH4 file by file checking that all sizes of the files in the original folder are the same that the sizes of the files on server. It will take a couple of hours. I will be back. Thank you again for your help.

Do you think I have to uninstall IH4 and install it again or just overwrite the existing files on server one by one?

[DivaVocals]

Okay, so I finally figured out what you have tried to tell me but I couldn't get into my thick head. Apparently the popup is coming in at a width that is too small and the image is being squashed from the sides. I was able to expand the width of the image and it began appearing as more appropriately expected.

At the moment, I am only guessing since I have not started with a fresh cart and applied IH4 to it, but one thing I see is that I have the following jscript_main.php file in the includes/modules/pages/popup_image directory, and am wondering if it has an effect because it seems to address some of the size issues described. I tried disabling the file from my site, but the resizing on my side still worked. I haven't experienced a "shrink" of the image and do not know where the value of 250 is coming from for the width. Also, the images that I get to appear on my site, if I were to shrink the window, the image doesn't shrink with it like how yours expands with the window until at least 600x600 and then shrinks again with a shrinking window.
Do you have the following jscript_main.php file installed in the includes/modules/pages/popup_image directory?

<?php
/**
 * jscript_main
 *
 * @package page
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: jscript_main.php 3126 2006-03-07 03:09:40Z drbyte $
 */
?>
<script language="javascript" type="text/javascript"><!--
var i=0;
function resize() {
  i=0;
//  if (navigator.appName == 'Netscape') i=20;
  if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
      i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
  } else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
      i=0; //This browser is Internet Explorer 6.x
  } else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
      i=25; //This browser is Firefox on Windows
  } else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
      i=45; //This browser is Mozilla on Windows
  } else {
      i=80; //This is all other browsers including Mozilla on Linux
  }
  if (document.documentElement && document.documentElement.clientWidth) {
//    frameWidth = document.documentElement.clientWidth;
//    frameHeight = document.documentElement.clientHeight;

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

  var height = screen.height;
  var width = screen.width;
  var leftpos = width / 2 - imgWidth / 2;
  var toppos = height / 2 - imgHeight / 2;

    frameWidth = imgWidth;
    frameHeight = imgHeight+i;

  window.moveTo(leftpos, toppos);


//  window.resizeTo(imgWidth, imgHeight);
  window.resizeTo(frameWidth,frameHeight+i);
    }
  else if (document.body) {
    window.resizeTo(document.body.clientWidth, document.body.clientHeight-i);
  }
  self.focus();
}
//--></script>

Not sure if this was supposed to be a part of the IH4 package or not, or if it was part of another installation, but it appears to handle some of what you are describing.

This is a default Zen Cart file.. it's not a part of the IH4 fileset, but if it is the source of the sizing issues, then it may need to be included with the appropriate modifications...

[DivaVocals]

OK, thank you. I know that something is rotten here. The first installation worked properly with all three images being different.

Tonight, I will re-upload IH4 file by file checking that all sizes of the files in the original folder are the same that the sizes of the files on server. It will take a couple of hours. I will be back. Thank you again for your help.

Do you think I have to uninstall IH4 and install it again or just overwrite the existing files on server one by one?

You need to ROLL YOUR STORE BACK to a pre IH4 state (you did make a backup as suggested before installing right??) trying to delete and manually replace the files will NOT solve your issue.. Please take my advice and start over..