AJAX IMAGE Swapper support thread

dscott1966:

Can someone give me help on this please!!!

Hi Don,

I'm not sure I agree that changing the variable name would help out in this situation since the images on the product listing page are the same images displayed on the product info page... In other words both pages are asking for the same image, and that image is the one uploaded by the AIS which was told to make it 56 by 75.

As far as I know html will happily shrink and image to smaller dimensions (I think we've all seen those slow loading images that have obscene dimensions like 1600x1200 crammed into a 400x300 space) but it won't blow the images up to larger dimensions.

Since you're asking the product listing page to take a 56 by 75 pixel image and create a 160 by 300 image from it, it won't happen.

I've looked over both zen cart's and AIS's code and have an idea that may work but I haven't personally tested it. In your AIS configuration I think you should change the dimensions of the thumbnail image to 160 by 300 then add an image to a product. This will create an image with the proper dimensions you wish displayed on the product listing page. After you've uploaded the image then go back to the AIS configuration page and change the dimensions to 56 by 75 so that when the page's code is called it'll grab those values for the html the php is writing. It'll check it's variables and see that the image dimensions should be 56 by 75 and since the image it has is larger the browser should happily shrink it down.

On a side note, a 56 by 75 image doesn't have the same aspect ratio as a 160 by 300, you'll get better results if the aspect ratio matches... In fact I don't know how the browser would handle an image that it's asked to resize if the aspect ratios don't match. If you want an image to have a height of 300 and the aspect ratio to match that of a 56 by 75 image its width should be 224.

This seems like the simplest solution but if it doesn't work let me know and then we can start digging into changing and creating variables! :D

greydawgjr:

Hi Don,

I'm not sure I agree that changing the variable name would help out in this situation since the images on the product listing page are the same images displayed on the product info page... In other words both pages are asking for the same image, and that image is the one uploaded by the AIS which was told to make it 56 by 75.

As far as I know html will happily shrink and image to smaller dimensions (I think we've all seen those slow loading images that have obscene dimensions like 1600x1200 crammed into a 400x300 space) but it won't blow the images up to larger dimensions.

Since you're asking the product listing page to take a 56 by 75 pixel image and create a 160 by 300 image from it, it won't happen.

I've looked over both zen cart's and AIS's code and have an idea that may work but I haven't personally tested it. In your AIS configuration I think you should change the dimensions of the thumbnail image to 160 by 300 then add an image to a product. This will create an image with the proper dimensions you wish displayed on the product listing page. After you've uploaded the image then go back to the AIS configuration page and change the dimensions to 56 by 75 so that when the page's code is called it'll grab those values for the html the php is writing. It'll check it's variables and see that the image dimensions should be 56 by 75 and since the image it has is larger the browser should happily shrink it down.

On a side note, a 56 by 75 image doesn't have the same aspect ratio as a 160 by 300, you'll get better results if the aspect ratio matches... In fact I don't know how the browser would handle an image that it's asked to resize if the aspect ratios don't match. If you want an image to have a height of 300 and the aspect ratio to match that of a 56 by 75 image its width should be 224.

This seems like the simplest solution but if it doesn't work let me know and then we can start digging into changing and creating variables! :D

Missed the edit time cut off...

I just realized you can easily test this theory by replacing the image it has with one of the same name but the larger dimensions, no fiddling with the AIS configuration necessary. (assuming you have an alternate means of resizing images such as irfanview or photoshop etc.) If you have the proper dimensions punched into both AIS and Zen's image settings they should immediately display correctly if my theory holds (again assuming the correct aspect ratio that I was talking about above)

Hi Jay,

I have installed Ajax image swapper on my store after following all instructions mentioned in the readme file.

Store url: http://www.sculpturehub.com

The swapper thing works fine in Firefox, but my product pages are totally messed up. Link to my product:

http://www.sculpturehub.com/ruby-sculptures-c-2/36-78-carat-hindu-shivaling-p-4

There are a couple of other problems as well...
(1) The lightbox no longer works. I have both fual slimbox as well as zen lightbox installed.
(2) This module does not work in IE. No product images are being displayed in IE.

Request you to help me sort out these problems...

Harshil

starruby:

Hi Jay,

I have installed Ajax image swapper on my store after following all instructions mentioned in the readme file.

Store url: http://www.sculpturehub.com

The swapper thing works fine in Firefox, but my product pages are totally messed up. Link to my product:

http://www.sculpturehub.com/ruby-sculptures-c-2/36-78-carat-hindu-shivaling-p-4

There are a couple of other problems as well...
(1) The lightbox no longer works. I have both fual slimbox as well as zen lightbox installed.
(2) This module does not work in IE. No product images are being displayed in IE.

Request you to help me sort out these problems...

Harshil

Hi Starruby,

It doesn't appear that you've modified the file found at includes/templates/your template/templates/tpl_product_info_display yet according to the readme. Also, I'm not sure what compatibility lightbox and slimbox have with each other. My understanding is that they both do essentially the same thing so you may want to consider uninstalling lightbox if you wish to use this module.

greydawgjr:

Hi Starruby,

It doesn't appear that you've modified the file found at includes/templates/your template/templates/tpl_product_info_display yet according to the readme. Also, I'm not sure what compatibility lightbox and slimbox have with each other. My understanding is that they both do essentially the same thing so you may want to consider uninstalling lightbox if you wish to use this module.

Hi Jay,

Actually, I had modified the tpl_product_info_display file but since the module did not work hence I uninstalled it and reverted back to the original version of the file.

I will uninstall slimbox and then try installing your module.

Thanks for your help
Harshil :smile:

greydawgjr:

Missed the edit time cut off...

I just realized you can easily test this theory by replacing the image it has with one of the same name but the larger dimensions, no fiddling with the AIS configuration necessary. (assuming you have an alternate means of resizing images such as irfanview or photoshop etc.) If you have the proper dimensions punched into both AIS and Zen's image settings they should immediately display correctly if my theory holds (again assuming the correct aspect ratio that I was talking about above)

I have tried this and it does not work for me. Is the only thing left is what you suggested in the previous thread. :cry:

greydawgjr.

Here is what i have in my admin. Is this correct? the first is zen carts and the second is AIS.

dscott1966:

greydawgjr.

Here is what i have in my admin. Is this correct? the first is zen carts and the second is AIS.

I've been doing a lot of digging on this and have even tested it to some degree. The good news is that the image swapper already does use different variables so that simplifies things considerably. (AIS is using IMAGE_VIEWER_SMALL_IMAGE_HEIGHT while Zen is using SMALL_IMAGE_HEIGHT, and each one has its own configuration value)

The problem we're going to have is that the product listing images are coming from the thumbnail images and the dimensions you were suggesting are pretty big for thumbnails, since zen cart tries to put these thumbnails everywhere (side boxes, new products, also bought, etc) you'll just need to be sure your divs are set wide enough for a thumbnail of that width.

To use the previous values we were discussing, the Small Image Width and Small Image Height should be set to 224 and 300 respectively on the Zen Image configuration page. Then set the Small Image Width and Small Image Height to 56 and 75 for the AIS configuration page.

Then just overwrite your 56 by 75 image in with one that is 224 by 300. I have been testing this and can confirm that Zen Cart will display the larger image on the product listing page (and everywhere else the thumbnail is displayed) and the browser will resize it for the product info page. I was running into separate problems though with the way zen cart calculates column width on product listing.

dscott1966:

greydawgjr.

Here is what i have in my admin. Is this correct? the first is zen carts and the second is AIS.

Oops, just busted out my magnifier on the images you've attached and saw you already did that. If you replace the image images/dresses/wht_1440.jpg with one that is 224 by 300 then I think it will display correctly on both pages.

edit
I just confirmed that on my own installation (in firefox at least, fingers crossed on the rest)! It's been a while since I've played with zen cart outside of tweaking AIS and had forgotten how granular it lets you get with the images. The problem I was having with my previous discussion is that I was only changing the Small image height and width, now the product listing height and width...

greydawgjr:

Oops, just busted out my magnifier on the images you've attached and saw you already did that. If you replace the image images/dresses/wht_1440.jpg with one that is 224 by 300 then I think it will display correctly on both pages.

edit
I just confirmed that on my own installation (in firefox at least, fingers crossed on the rest)! It's been a while since I've played with zen cart outside of tweaking AIS and had forgotten how granular it lets you get with the images. The problem I was having with my previous discussion is that I was only changing the Small image height and width, now the product listing height and width...

Sorry took so long to get back with you but i just tested what you said. What i did was got the correct image size that i would have needed which was W:160 H:213 and resized the image to that then replaced it like you said and it worked out correctly, just like you said it would. Now with that in mind would i have to do it like that all the time? or when i upload it the images using AIS would they resize automatically?

Cna be seen here: http://dealz-r-us.com/index.php?main_page=index&cPath=2_24

dscott1966:

Sorry took so long to get back with you but i just tested what you said. What i did was got the correct image size that i would have needed which was W:160 H:213 and resized the image to that then replaced it like you said and it worked out correctly, just like you said it would. Now with that in mind would i have to do it like that all the time? or when i upload it the images using AIS would they resize automatically?

Cna be seen here: http://dealz-r-us.com/index.php?main_page=index&cPath=2_24

It does work in firefox but I just looked in IE7 and the browser isn't resizing it on the product info page like we'd like. The route I'm thinking now is since you'd essentially like to display your medium product image on the product listing maybe there's a way we can ask for that image instead of the thumbnail, which is what zen cart stores as a products main image. Unfortunately the way they store it makes it hard since it uses php to append the _MED suffix when needed instead of a db value that would make it a piece of cake.

If you know a good thread to ask how to get the product_listing.php page to display the medium image instead of a thumbnail I'd try that. I'll keep thinking of a fix in the mean time.

greydawgjr:

It does work in firefox but I just looked in IE7 and the browser isn't resizing it on the product info page like we'd like. The route I'm thinking now is since you'd essentially like to display your medium product image on the product listing maybe there's a way we can ask for that image instead of the thumbnail, which is what zen cart stores as a products main image. Unfortunately the way they store it makes it hard since it uses php to append the _MED suffix when needed instead of a db value that would make it a piece of cake.

If you know a good thread to ask how to get the product_listing.php page to display the medium image instead of a thumbnail I'd try that. I'll keep thinking of a fix in the mean time.
ok i will try that and see if i can get an answer that way. Thanks for all your help.

GREYDAWGJR,

If i modify this section of
/includes/modules/your_template/product_listing.php:

                        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;  

This part of the file:
zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"')

which i think displays the image, and take $listing->fields['products_image'] and make it point to the medium image filename. Would this work? If so how would i code this to make it work? this points to the product listing image.

Hey, is there any way to adjust the quality of the images created by Ajax Image Swapper? I've had a number of people point out the quality problems, here's a product I just added which has this problem:

http://www.chuckwa.com/store/index.php?main_page=product_info&cPath=2_5&products_id=65

If you look at the default images shown, they all have very noticeable banding and some blockyness.

For instance, here's the image show by default:
Default Image

Here's the original image, which is displayed when you click on the above:
Original/Large Image

Notice the image is nice and sharp with no real banding.

My guess is that the compression settings are set to high. I don't mind larger file sizes if I get better quality. My products are art toys, and its the pictures that sell them.

Chuckwa:

Hey, is there any way to adjust the quality of the images created by Ajax Image Swapper? I've had a number of people point out the quality problems, here's a product I just added which has this problem:

http://www.chuckwa.com/store/index.php?main_page=product_info&cPath=2_5&products_id=65

If you look at the default images shown, they all have very noticeable banding and some blockyness.

For instance, here's the image show by default:
Default Image

Here's the original image, which is displayed when you click on the above:
Original/Large Image

Notice the image is nice and sharp with no real banding.

My guess is that the compression settings are set to high. I don't mind larger file sizes if I get better quality. My products are art toys, and its the pictures that sell them.Look at post #381 that will help with your image problem.

Chuckwa:

Hey, is there any way to adjust the quality of the images created by Ajax Image Swapper? I've had a number of people point out the quality problems, here's a product I just added which has this problem:

http://www.chuckwa.com/store/index.php?main_page=product_info&cPath=2_5&products_id=65

If you look at the default images shown, they all have very noticeable banding and some blockyness.

For instance, here's the image show by default:
Default Image

Here's the original image, which is displayed when you click on the above:
Original/Large Image

Notice the image is nice and sharp with no real banding.

My guess is that the compression settings are set to high. I don't mind larger file sizes if I get better quality. My products are art toys, and its the pictures that sell them.

Actually grab the file in post #387 since your images are in portrait form. The file in 387 includes a previous bug fix to the portrait aspect ratio calculation...

greydawgjr:

Actually grab the file in post #387 since your images are in portrait form. The file in 387 includes a previous bug fix to the portrait aspect ratio calculation...

Ok, that seems to have helped a lot. What variables in the PHP would I need to change if I wanted to tweak the .jpg compression levels? I think this should (ATTN: Jaycode) be added to the admin interface.

Another question I asked before, but never got an answer. How do I change the order in which the images are displayed? It just seems random. Neither the order in which they are uploaded, "sort order", file name, or title seem to affect the order.

Most of the time it seems to be order uploaded, but not always. Sometimes the 3rd or 4th image uploaded will randomly get chosen as the first image and there's nothing I can do to fix it.

Chuckwa:

Ok, that seems to have helped a lot. What variables in the PHP would I need to change if I wanted to tweak the .jpg compression levels? I think this should (ATTN: Jaycode) be added to the admin interface.

Another question I asked before, but never got an answer. How do I change the order in which the images are displayed? It just seems random. Neither the order in which they are uploaded, "sort order", file name, or title seem to affect the order.

Most of the time it seems to be order uploaded, but not always. Sometimes the 3rd or 4th image uploaded will randomly get chosen as the first image and there's nothing I can do to fix it.

If you rely on php to resize/resample images it's pretty much a tossup between the GD library or the imagemagic library. AIS is using the GD library and I simply changed the method using imagecreatetruecolor instead of what it was before. I don't remember if there was a way to specify the compression level but I don't think so. If your server has imagemagic installed on it then there may be other options but I don't know. If you've seen this feature in other modules let me know because I'm interested in it :D

As far as image order:

Zen cart has a few simple rules on how it handles the order in which images are displayed. Forget everything in the Image Swapper here because Zen cart itself is making the decision on sort order.

The primary thing you need to know is that all images associated with a product need to have a consistent naming scheme. That name can be whatever you like but a good rule of thumb is to make it descriptive.

The second thing you need to know is that zen cart is going to display this group of images alphabetically with a few rules. Subsequent images will have the consistent name that you’ve chosen, followed by an underscore and a suffix. The image you want to display first will have the shortest name and no underscoring.

All groups of images will look something like this if their file names were listed in a spread sheet:

basename (this image will display first, and only images associated with that product should have this base)
basename_suffixone
basename_suffixtwo
basename_suffixthree

Zen cart is going to alphabetize the suffix names and line them up in the thumbnails. These 4 images will display in the following order:
basename
basename_suffixone
basename_suffixthree
basename_suffixtwo

With a little planning you can give the images names that will get them to display in the exact order you wish. I recommend you get descriptive with the suffixes as well so you know exactly what image is associated with that file name, ie:
pinkblanket
pinkblanket_black
pinkblanket_zoom

If you wanted zoom to come before black you’d have to get a little creative and name it pinkblanket_azoom.

In the Image Swapper you can leave all the sort orders at 0. These images will naturally sort because of their names.

A couple tips:

• No pronunciation in your image names.
• Use numbers or don’t use numbers. If you use it on one use it on all, ie, pinkblanket_1, pinkblanket_2, etc. These will sort 1, 2, 3
• No spaces in image names BUT do use underscores to separate the base name from its suffix.

Thanks again greydawgjr. That was how I understood things, but I have found that it doesn't always seem to work that way.

Again, see my Munny Zipper Pulls.

You'll see the images are sorted:

munnyzip-4
munnyzip-3
munnyzip-2
munnyzip-1
munnyzip-5

They were uploaded in order from 1-5. Is it the "-" that screws up the sorting?

Chuckwa:

Thanks again greydawgjr. That was how I understood things, but I have found that it doesn't always seem to work that way.

Again, see my Munny Zipper Pulls.

You'll see the images are sorted:

munnyzip-4
munnyzip-3
munnyzip-2
munnyzip-1
munnyzip-5

They were uploaded in order from 1-5. Is it the "-" that screws up the sorting?

I don't think so but possibly... Are all the sort orders set to 0 in the image swapper? I should have mentioned that there is a difference depending on whether or not you have sub directories underneath the images directories. You can read more about it here: https://www.zen-cart.com/tutorials/index.php?article=58 . Specifically, the underscore actually plays a role in the image name if you have sub directories. I don't think it's required if all your images are in the default directory as yours are.

I know what you mean about the randomness of it, I struggled with it all day once, finally I created a subdirectory and it hasn't seemed to be an issue since. (If you do this then underscores are required for proper display order)