How do I add _MED & _LRG product images?

[lindagal2]

I read an image tutorial on how to prep my images for store products:
https://www.zen-cart.com/content.php...aration-how-to

Author recommends three image sizes - small, _MED, and _LRG.

I understand how to add a single image through the product page (ie, choose file and upload to directory button OR choose name of item already on server).

I am not finding a tutorial that explains how to set up the _MED and _LRG images. For example, I know if I upload a large while creating the product, Zen Cart will rescale that image on the new products page, etc. But if I want to use 3 different sized images, so that pages with thumbnails load faster, how to I TELL that to ZenCart? If I upload a regular pic, and two more with the _MED and _LRG suffixes, will ZenCart find those automatically?

Also, do I need to label small images? The Images page under "configuration" in admin only specifies the _MED and _LRG suffixes.

Any detailed instructions or tutorial on how to do this very much appreciated -- I've googled but only come up with the Image Preparation How-To tutorial.
Thx

[DrByte]

The article assumes you have access to FTP and can manually upload those images to the webserver yourself. (NOT via the store's Admin console.)

[lindagal2]

Thx. DrByte. Yes, I do have access to FTP and have already uploaded them.

I guess I'm confused on how to direct ZenCart to their path, and also what to call the default image. Is the default the smallest image and is that why it doesn't have a suffix?

For example, if product is called nwf-tee.jpg ... I have created a 500px nwf-tee_LRG.jpg, and a 250px square nwf-tee_MED.jpg. Is the nwf-tee.jpg the small image? Does ZenCart know to find the MED and LRG images automatically or do I specify that somewhere?
And are all images loaded into same directory?

Thx.

[mc12345678]

So assuming you've read the FAQ, there should be this first "clue":

To avoid these issues, the solution is to create 3 sets of images – small, medium and large, compressed and saved at the dimensions you wish to display them and then uploaded to the images, images/medium and images/large directories. If you have hundreds of images, this may seem like a daunting prospect, but it shouldn’t be quite as bad as it sounds. Any decent image-editing application will have some system for batch-processing (carrying out the same actions on multiple files).

NOTE: the basic "images" (thumbnails, normal-size images) should be uploaded via admin in the usual way via the product-edit screen, and then FTP should be used for uploading your _MED and _LRG images, as mentioned in the preceding paragraph.

There is a complete process provided about how to do this across multiple images in a "bulk" manner, but the basic jest is this: database contains a single record representing the main image. Think of it further as any image that begins with that name and is found in the same folder will be treated like an additional image for that product. The _MED just basically helps the software know how to use the image. If you put an image in a sub-folder then it's Med or Lrg image(s) should also go into a parallel sub-folder in the respective medium or large folders.

Now, all that said, there is some software that will handle images to in essence simplify the entire process, provide a relatively automated way to shrink images for the various uses, etc... as one might expect it is actually called image handler. It may prove to be handy for you. It follows the same basic ZC rules for filenaming, just makes it a little easier. :)

[lindagal2]

mc12345678, in the immortal words of Keith Partridge, I think I love you. That was extremely helpful. I am pretty good at batch fx in photoshop, so the image prep is okay, I've just been confused about where to PUT the images and how to make sure ZenCart finds them!

Question re this statement:

Think of it further as any image that begins with that name and is found in the same folder will be treated like an additional image for that product. The _MED just basically helps the software know how to use the image. If you put an image in a sub-folder then it's Med or Lrg image(s) should also go into a parallel sub-folder in the respective medium or large folders.

So if I want to keep merchandise separate from other ZenCart images, I could create a "merch" sub-folder, then in the product creation/edit page, specify that subfolder in the image box at the bottom of the page.

BUT if I have a "merch/medium" and "merch/large" folder within the "merch" directory, will Zen Cart then automatically look for a medium and large folder in the image subdirectory ? Or do I have to assign a pathname somewhere?

One other question: If I want to change size settings for product images, I am assuming the default would be under "small image width, height" in the admin/image section, yes? Is there an FAQ that tells me where "Product Info - Image Width" ultimately ends up on the site (ie, is that on the product page and would that be my medium sized image so I would change size for ths)? Same with Product listing, and Image Product All Listing, etc. Or do I just leave all that alone, add the medium and large images, and let Zen Cart be the brains of this operation?


Also, thanks for the info re the default image being the small thumbnail! Last but not least, dumb question, but where did you find the FAQ? I looked at the FAQ in the forum menu above and browsed the first several pages, but didn't see anything re images. Then I googles and the only tutorial I found was the image prep tutorial.

Again, THANK you so much.

[lindagal2]

PS I actually found the answer to my product info question and the FAQ. Oy. But other question stands! Thx.

[DrByte]

/images/apples.jpg <- thumbnail in category/product listings
/images/apples2.jpg <- thumbnail of "extra" images on product page
/images/apples3.jpg <- thumbnail of "extra" images on product page

/images/medium/apples_MED.jpg <- "main" image on product page (there's only ever "1" main image, and is determined from the image name specified in admin)

/images/large/apples_LRG.jpg <- larger image that appears if "main" image is clicked
/images/large/apples2_LRG.jpg <- larger image if "extra" image is clicked
/images/large/apples3_LRG.jpg <- larger image if "extra" image is clicked

and if you're organizing into subdirectories:
/images/merch/widget.jpg <- thumbnail in category/product listings
/images/merch/widget2.jpg <- thumbnail of "extra" images on product page
/images/merch/widget3.jpg <- thumbnail of "extra" images on product page

/images/medium/merch/widget_MED.jpg <- "main" image on product page (there's only ever "1" main image, and is determined from the image name specified in admin)

/images/large/merch/widget_LRG.jpg <- larger image that appears if "main" image is clicked
/images/large/merch/widget2_LRG.jpg <- larger image if "extra" image is clicked
/images/large/merch/widget3_LRG.jpg <- larger image if "extra" image is clicked

[mc12345678]

To add to the earlier comment about the article assuming image upload is available via FTP access. All of the above images *could* be uploaded from the admin product page, but............. If you are going to upload all of the images from the product information page, then your main image (thumbnail in category/product listings) must be the last file uploaded/identified to the product. That image name/path is what is stored in the database and makes it possible to get to all of the other widget related images. FTP can make things easier because then you know what file(s) are present, can rename files as necessary to support proper display of associated/additional images, etc...

Note also that there is a database field size limit for the path to an image, as well as consideration for naming in general. These things are covered in other articles related to images. Can use the FAQ search button on the upper right corner, search from outside of the forum, or take a little time and just go through the sections of the FAQ and see what questions/issues might relate to something of interest. There's a wealth of information there.

If there remains other questions unanswered from the above, could you please identify which one(s) more specifically?

[lindagal2]

This was really helpful, DrByte and mc12345678. I realized I was loading my _MED and _LRG images bass-ackwards. I tried (WRONGLY) to create a "merch" directory and adding "medium" and "large" subfolders to it but ZenCart could not find the medium and large images. It only finds them in the "medium" and "large" folders directly under the image directory.

To summarize (in case someone else has this question):
- I created 3 images of each product picture -- ie photo.jpg, photo_MED.jpg, and photo_LRG.jpg.
- Then, because I wanted to keep my product merchandise separate from other images, I created a directory called "merch" in the "images" folder.
- I also created a "merch" directory INSIDE the images/medium and images/large folders respectively because apparently ZC checks those folders automatically.
- Uploaded via FTP all _MED and _LRG images into those newly created directories ("images/medium/merch" and "images/large/merch" respectively)
- Lastly, I entered the main image (photo.jpg) from the images window in the admin product edit page.

Incidentally, mc12345678, I cannot emphasize the importance of your tip that the MAIN image (ie, the small image) must be the last file uploaded/identified to the product (*after* ftp'ing the _MED and _LRG images into their respective directories). Otherwise, I found out the hard way that ZC only renders the small image on the product page and "large view" window. ;)

Thanks to all who responded.

[mc12345678]

This was really helpful, DrByte and mc12345678. I realized I was loading my _MED and _LRG images bass-ackwards. I tried (WRONGLY) to create a "merch" directory and adding "medium" and "large" subfolders to it but ZenCart could not find the medium and large images. It only finds them in the "medium" and "large" folders directly under the image directory.

To summarize (in case someone else has this question):
- I created 3 images of each product picture -- ie photo.jpg, photo_MED.jpg, and photo_LRG.jpg.
- Then, because I wanted to keep my product merchandise separate from other images, I created a directory called "merch" in the "images" folder.
- I also created a "merch" directory INSIDE the images/medium and images/large folders respectively because apparently ZC checks those folders automatically.
- Uploaded via FTP all _MED and _LRG images into those newly created directories ("images/medium/merch" and "images/large/merch" respectively)
- Lastly, I entered the main image (photo.jpg) from the images window in the admin product edit page.

Incidentally, mc12345678, I cannot emphasize the importance of your tip that the MAIN image (ie, the small image) must be the last file uploaded/identified to the product (*after* ftp'ing the _MED and _LRG images into their respective directories). Otherwise, I found out the hard way that ZC only renders the small image on the product page and "large view" window. ;)

Thanks to all who responded.

So, part of my discussion of the tip was to support the following and is a little different than what is described as being observed:
You're out and about, have taken a picture of something to be posted to your site as part of the product, whether it be an additional image or the "main" image. Using your cell phone or other mobile device you would like to post the image to your site, but you don't have FTP access through that route. Well, you can still load the image to the applicable directory(ies) by submitting the image from the admin's product information page, but... if you submit the image through the admin product information page, now the product is associated with this new image and all of the naming rules associated with additional images would be based off of that new image. If though you copied the path for the existing image (maybe pasted it into a document, temp email, text message, etc.. in case some other cut or copy operation occurs) then after upload of the image(s), all you need to do is paste that path into the appropriate field (don't forget that the path would be adjusted/affected by the folder dropdown selection) and your product is then again associated with that main image and all of the other additional image options (including _MED and _LRG) would be "back" with the product.

That said, if you also do FTP the additional images, the FTP can be done before OR after the main image is uploaded to the product, if done before the main image then the product will have no images associated with it until that main image is uploaded. In either case, ZC will pick up on the other images as they relate to the database entry for the product when the page is loaded (may require more action than pressing F5 to refresh the page) and display the additional images that it locates.

So my tip related more to the fact that if you are going to use the product information page to upload all of your images for a given product, be sure that you come back to or end with the main image as your last entry so that the database will contain the information necessary to reach out to all of the other images associated with it.