Site is looking fine on desktop, but mobile????

[DrByte]

I have read, with great interest, your communique from 2012 with lindagal2's thread - How do I add_MED &_LRG product images?

https://docs.zen-cart.com/user/image...tional_images/
https://docs.zen-cart.com/user/image..._to_a_product/

[TheGrimReaper]

Note: If your target audience (customers) use Apple devices, they will have trouble viewing .webp images. Safari doesn't support them yet.

But, if you don't care about sales to customers using a Mac or iPhone or iPad, then you don't need to worry about webp.

Well, I'm not REAL fond of Apples anyway too many worms at inflated prices. It's for those that need to pay more for their device- like Lexus and Toyota.... Lexus costs more because it has a different badge.- Just spoutin'- Now to the real world: That's something I need to consider. I wonder if the extra weight is worth it. I'd like the internet to speed up, especially on cellular devices. I'm not too worried about those devices with WiFi or cabled connections. Cellular around here is pretty slow already. I'll have to take a poll and see how many over paid people really want to use my tiny site. Geez, imagine technology standing still for one greedy HUGE company. Problems, problems, problems. Thank you Dr., I'll see what I can do. I doubt there's a way to give Apple users their old technology while maintaining technological advances for everybody else.......

[TheGrimReaper]

https://docs.zen-cart.com/user/image...tional_images/
https://docs.zen-cart.com/user/image..._to_a_product/

Yes sir! I'm reading your contribution to that 2012 thread too, it is in plain English laid out nicely. One question it brings up....you stated the /images/medium/merch/widget_MED is the main page product image. I'm setting up as linda did with the merch folders and from admin it seems to upload the image to the merch folder, not the medium/merch folder. Should I be seeing a medium/merch folder from admin instead? I may have goofed again.

[DrByte]

One question it brings up....you stated the /images/medium/merch/widget_MED is the main page product image. I'm setting up as linda did with the merch folders and

from admin it seems to upload the image to the merch folder, not the medium/merch folder.

Should I be seeing a medium/merch folder from admin instead? I may have goofed again.

The admin only uploads one image at a time, and only assigns the last one you uploaded to that product.

Best practice is typically to use the Admin to upload the thumbnail image, and then use FTP to upload the med/large images by hand.
Or explore addons like Image Handler (which unfortunately does way more than just give an intuitive UI for uploading multiple images).

[TheGrimReaper]

The admin only uploads one image at a time, and only assigns the last one you uploaded to that product.

Best practice is typically to use the Admin to upload the thumbnail image, and then use FTP to upload the med/large images by hand.
Or explore addons like Image Handler (which unfortunately does way more than just give an intuitive UI for uploading multiple images).

Yup, I understand all of that. I'm troubleshooting some problems that aren't making much sense right now. I'm backing out of the merch folder idea until I get a grip on whats going on with configuring images from from config/images. Thought I'd try just in the large and medium folders and see about moving on from there. I seem to only get a medium no matter what, though my large image is 1000x1000 and I setup medium and small as 250x250 and 125x125 respectively. I'm also not getting additional images on the listing. Only doing one item until I figure it all out. Thank you for all of your help. You're a great read, btw. Gotta study the image config in admin for awhile.

[DrByte]

Skip the extra folders until you understand it fully.

Upload ONE image. The small one. via the Admin. Example: fred.jpg The admin will put it in /images/fred.jpg
Then use FTP and upload the med to /images/medium/fred_MED.jpg
and use FTP to upload the large to /images/large/fred_LRG.jpg

Then use FTP to upload additionals:
/images/fred2.jpg
/images/fred3.jpg
/images/large/fred2_LRG.jpg
/images/large/fred3_LRG.jpg

Done.

Wash rinse repeat.

If you really want a subdir, here's the pattern:
/images/merch/bob.jpg
/images/medium/merch/bob_MED.jpg
/images/large/merch/bob_LRG.jpg
/images/merch/bob2.jpg
/images/merch/bob3.jpg
/images/large/merch/bob2_LRG.jpg
/images/large/merch/bob3_LRG.jpg

Zen Cart will automatically fallback to the small image if the med/large doesn't exist.
And medium is only used on the product_info page, and only for the first/primary image.

[TheGrimReaper]

Skip the extra folders until you understand it fully.

Upload ONE image. The small one. via the Admin. Example: fred.jpg The admin will put it in /images/fred.jpg
Then use FTP and upload the med to /images/medium/fred_MED.jpg
and use FTP to upload the large to /images/large/fred_LRG.jpg

Then use FTP to upload additionals:
/images/fred2.jpg
/images/fred3.jpg
/images/large/fred2_LRG.jpg
/images/large/fred3_LRG.jpg

Done.

Wash rinse repeat.

If you really want a subdir, here's the pattern:
/images/merch/bob.jpg
/images/medium/merch/bob_MED.jpg
/images/large/merch/bob_LRG.jpg
/images/merch/bob2.jpg
/images/merch/bob3.jpg
/images/large/merch/bob2_LRG.jpg
/images/large/merch/bob3_LRG.jpg

Zen Cart will automatically fallback to the small image if the med/large doesn't exist.
And medium is only used on the product_info page, and only for the first/primary image.

Yes sir! I tossed the sub folder idea. At first I though it was an interesting thought to keep the main folder from getting fat, then that dreadful thing called logic set it and I realized that even the sub folders would get fat no matter what, and it just didn't make sense to complicate it any further. It would always be a pain cleaning them up when I stop carrying a product and might as well just keep them close to the surface. The naming conventions are the key to clean-up, and just about everything else, anyway.

For some reason I'm not getting the additional images on the product info page. The product I'm tinkering with works great with the main image on the main page, the medium on the product info and the "click for larger image" popup, I have 15 or 16 images that I thought are supposed to display on the product info page, but I can't get them to stick their heads out of the hole for a clean shot. I set admin "Images per row" from 3 to 20 and "Show Product Additional Images" to True (1) but just can't seem to coax them out. Ain't gonna let it beat me though.

[DrByte]

For some reason I'm not getting the additional images on the product info page. The product I'm tinkering with works great with the main image on the main page, the medium on the product info and the "click for larger image" popup, I have 15 or 16 images that I thought are supposed to display on the product info page, but I can't get them to stick their heads out of the hole for a clean shot. I set admin "Images per row" from 3 to 20 and "Show Product Additional Images" to True (1) but just can't seem to coax them out. Ain't gonna let it beat me though.

What are their filenames and paths?

Zen Cart's default image logic takes fred.jpg and splits it into "fred" and ".jpg", and then looks for "fred" followed by "anything" and ending in ".jpg" as additional images.
Then it takes all those, and looks for "large/" + "fred" + whatever + "_LRG" + ".jpg"

[balihr]

Subfolders are quite a good idea because it does help keep things clean and nicely organized. That's probably why I never use subfolders...

But, it still is a good idea, especially if you plan on having A LOT of products. Here's why. There's a very common limit on shared hosting accounts that doesn't let you list more than 10.000 files in FTP clients, so if you have more than 10k images in your main images directory, you won't be able to see it all, nor delete the ones after the count limit. That's where subfolders come in extremely handy.
One idea is to use products_id as subfolder, but requires you to first insert a product and then edit and upload an image. So, let's say you insert a new product and it's ID is now 956 - you would edit the product and upload the image to /images/956/
Also, this will help your load times for the product_info page because Zen Cart has to "scan" the entire folder and then has to try and match file names to determine if one of those images is an additional image. Now imagine the main image sitting in the /images/ folder with 15.000 other images - Zen Cart has to read the entire folder, build a list of all those files, then check if the extension matches, then check if the file name matches... I don't have any numbers on the processing time, but I'll bet my a** it's faster to scan a dedicated folder and either find no extra files or go through just a few files which will most likely all match...
And last, but not least - maybe someday you'll decide to add a "rollover" image (it's that cute feature where a different product image shows when you hover the main one on listing pages). If that happens, your product_listing page will now have to do the same process described above, only multiplied by the number of items shown on that page...
Oh, yes, there's one more scenario which can mess things up - similar image names. As you grow your store, you might start forgetting about the product names you used before, or maybe you'll just use whatever the supplier gave you. Maybe you'll forget that you had added an image named "fridge.jpg" and you'll now add a new product with the image named "fridge_samsung.jpg". The new product will be fine, but the one you added before will show the "fridge_samsung.jpg" as an additional image because it does match the pattern...

So, if you're just starting fresh, and you DO plan on having lots of products (and therefore images), maybe don't ditch the subfolders idea too fast...

One thing I find missing in the docs is the advice to use lowercase letters on all of your images. Although we're all mostly hosted on *nix servers, there's still Windows servers out there running ZC. Windows are NOT case sensitive, so image.jpg is the same as Image.jpg or imAge.jpg or whatever combination, whereas *nix servers ARE case sensitive so image.jpg can be a picture of a horse, and Image.jpg can be of a plane... And this can very easily cause confusion.

And lastly... The image attached *might* give you an idea on additional images and their naming.

[TheGrimReaper]

What are their filenames and paths?

Zen Cart's default image logic takes fred.jpg and splits it into "fred" and ".jpg", and then looks for "fred" followed by "anything" and ending in ".jpg" as additional images.
Then it takes all those, and looks for "large/" + "fred" + whatever + "_LRG" + ".jpg"

I have 15 each size, armyjeep101.webp thru armyjeep116.webp - same names for 15 ea armyjeep101_LRG and armyjeep101_MED.
armyjeep101-armyjeep116 are in images (125x125), so 15 of them
armyjeep101_LRG.webp (thru 116) are in images/large (1000x1000), 15 more
the _MED's are in images/medium (250x250) and, yup, 15 more

45 files can be hard to keep track of when there's a good movie on, but somehow I did and have verified locations and sizes a couple of times.

At one point I found that I had inadvertently added another images folder inside images (images/images) that had a bunch in there but have corrected that mess, it WAS a good movie after all. All straight with locations, names and sizes now.


That's the in-depth details more than needed I'm sure, but it help me to keep track.- https://www.thercrv.com

I turned the site back on, if you by any chance stumble across it, Land Vehicles/Military Vehicles. It IS the only item in that category right now so I haven't seen the small show up as they do in Parts and Components/Electronics/Batteries. Once I secure another Military Vehicle I'll set it up and look then. I used Adobe Bridge to batch rename, picomos(tm) tools to batch resize (though I doubt that has any bearing whatsoever) I highly recommend a browser other than Safari, anything else will do, Safari, as I understand it from a very wise fella, just can't cut the leading edge webp extension.