What is the correct way to display multiple images?

[keemeng]

Hi Guys,

I am wondering if anyone can help me with this issue in regards to having multiple images for one product when you view it in the more info.

I done a search for the information here and in Google and I dont understand how to doit from the information I have read.

Is there a step by step guide which explains in detail what to do?

I am wondering if it is to do with the image names I have.

I have created the images in three different sizes. Small,medium and large. and I insert the images when adding a new product using the browse button. The images will show up in the category I created the product in but I am unsure how to add more images when users click on the for more info and go to the product page. I only want to show 1 or 2 images per product when they go to the product page.

I am on Zencart 1.3.9

My image names are like this:

AB716_GREY_2.jpg
AB716_GREY_1.jpg

All my other items have similar naming convention. Model number, colour, and the number.

I added AB716_GREY_2.jpg first and then i added image AB716_GREY_1.jpg after. But it creates it as a seperate product.

Can anyone point me in the right direction on how to doit or where I am going wrong?

Thanks.

[DrByte]

A quick search for "multiple images" in the Tutorials/FAQs section brings up this article: https://www.zen-cart.com/tutorials/index.php?article=58

[kinembe]

i think can help a little i as i just went through it this morning...

you need to upload the additional images via ftp. the original photo will load when you create the product, but you will need to upload the additional images and the _LRG and _MED to their respective folders via ftp.

then in your admin page, go to catalog>product types>product general and make sure it has a 'Y' for the setting.

then any images you upload which have the same name with _2, _3, _4 etc in the name will automatically show up in the product listing.

i hope you can understand my attempt of an explanation.

[keemeng]

Thanks for the response guys! Thats the guide I was referring to Dr Byte but I dont really undestand it.

Hi Kinembe, Thanks for the reply. I am not quite sure if I am doing this right. But I added a normal image for the picture from my computer on my desktop from my medium size folder. I then uploaded the images into FTP -> Images -< medium. But it is not working for me. My setting is also set to Y like you said above. Please see attached images:

Images of the product page for category:



After clicking on produt and reviewing the more infor in regards to the product, only one images shows:



Images of when attaching normal image:



Can you see anywhere that I may be going wrong?

Regards.

[DrByte]

For TESTY2, if your product image is AB761_TAN_1.jpg, then you would specify just AB761_TAN_1.jpg as your image name in your Zen Cart admin. (WITHOUT the /medium/ you've got in there now)

Then with your FTP program you would upload a "medium" image to /images/medium/AB761_TAN_1_MED.jpg
and if you have a large image, you would upload that "to /images/large/AB761_TAN_1_LRG.jpg

[kinembe]

if AB761_TAN_1.jpg is your main image, just upload AB761_TAN_2.jpg to the same folders and it should display.

i don't know if the first underscore is effecting it somehow. maybe try:
AB761TAN_1
AB761TAN_2
AB761TAN_3

as long as they are uploaded into the right folder and named correctly ZC will display them.

[DrByte]

kinembe, if you look at the screenshot, they've put "/medium/AB761_TAN_1.jpg", not just "AB761_TAN_1.jpg", which is why none of the other images are triggering.

[keemeng]

Hey Guys,

Thanks for the responses. The name medium is actully put in there automatically Dr Byte because I am uploading it by FTP into the Images/Mediium folder so that just appears. What I actually found out that was causing the issue was my dodgy naming.

Originally I had AB716_1 and AB716_2. I had to leave one without any number in it at all. So I will have one called AB716 which will be the main image and the other one can be AB716_01. It then showed the the other image.

Thanks for the info Dr Byte and Kinembe.

Dr Byte, I was wondering if I was to rename all the Large images to AB716_LRG and AB716_1_LRG and do the same for the medium images like you said and FTP them to the Images/Large and medium folder. Am I correct in saying that Zencart will automatically display the medium images as the thumbnail image and when they enlarge the images it will automatically show the large product image?

Now that I have got the multiple images the layout does not look very presentable for users.

Is there a way so I can just get the addditional image to be like a smaller thumbnail image underneath the main image like other ecommerce sites. or if they can just click mext once they enlarged the image to see the next one? Or make it so it is just a lot more presentable to look at instead of it being in a big box and with the add to cart inside there as well?

This is what it looks like now:



Thanks guys.

[DrByte]

The name medium is actully put in there automatically Dr Byte because I am uploading it by FTP into the Images/Mediium folder so that just appears.

You shouldn't be doing that.

Dr Byte, I was wondering if I was to rename all the Large images to AB716_LRG and AB716_1_LRG and do the same for the medium images like you said and FTP them to the Images/Large and medium folder. Am I correct in saying that Zencart will automatically display the medium images as the thumbnail image and when they enlarge the images it will automatically show the large product image?

Not quite.

As the FAQ article says, there are 3 image sizes available:

1) the thumbnail, which is the smaller image, in the /images/ folder.
2) the "medium" image, which is ONLY used on the Product Info page as the primary product image. And ONLY the first "medium" image is ever used.
3) the "large" images matching the name patterns of all your thumbnails, which if the thumbnail is clicked, will show the large image.

So, as yet another example, if the main image is "abcd.jpg", you would only need:

- /images/abcd.jpg -- the thumbnail shown in all the category pages and sideboxes
- /images/medium/abcd_MED.jpg -- the main product image shown on the product page itself
- /images/large/abcd_LRG.jpg -- the large version of the main product image, which is shown if the medium image is clicked

- /images/abcd_1.jpg - extra thumbnail shown only on the bottom of the product page
- /images/large/abcd_1_LRG.jpg - large version of the abcd_1 thumbnail

- /images/abcd_2.jpg - extra thumbnail shown only on the bottom of the product page
- /images/large/abcd_2_LRG.jpg - large version of the abcd_2 thumbnail

- /images/abcd_3.jpg - extra thumbnail shown only on the bottom of the product page
- /images/large/abcd_3_LRG.jpg - large version of the abcd_3 thumbnail

etc

[keemeng]

Thank you Dr Byte,

I understand what you mean. I have renamed all small, medium and large files and just tested it on couple of the products. Your explanation is very clear.

Thank you for taking the time to write up the explanation in so much detail.

I just need to arrange the way the additional images show up now on the product more info page.