Printable View
Using responsive_classic.
https://www.thercrv.com
Well, just when I thought I was thru all the tough stuff, I happened to look at our site on my smart phone (do not have a tablet to check), what a mess. Can somebody point me in the direction of support for the mobile version of responsive classic? Looks like I have to start efforts on fixing a lot of stuff.
Looks fine on my mobile, perhaps try clearing the browsing data.Quote:
Originally Posted by TheGrimReaper
There shouldn't be any cache on my phone as that was the first time I went to it. On my phone, the blank_sidebox module content is showing below the header, content is missing from Important links, the images aren't rendering correctly, the Information box is mis-formatted and on and on and on. I'm making a comprehensive list. Care to send me a screenshot of the page you see?
I hadn't compared the mobile view to the desktop view and was expecting to see more of a 'mess'. Once you've made your list perhaps post in the Respionsive Classic support thread.
So I don't know about your mobile device but I see that there are what, webp extension? My device won't play/show it, but it will support "downloading" it... That I'm afraid has nothing to do with the template, responsive or otherwise. No idea why that filetype was selected, but highly suggest using something more web browser friendly...
As far as any other "issues"? I don't really see anything directly on the site in a mobile device that is problematic per se. Nothing that would make me want to avoid the site if it contains the things I were searching...
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. Maybe you should consider a modern browser?Quote:
Originally Posted by mc12345678
So are you saying that all of the slider images are appearing on your mobile device? Considering your original complaint, the path provided with no further guidance of where to go to see the problem, the only image display issue I am/was experiencing is as described with webp extensions... Please enlighten us on what then is not displaying? I can tell you it has zero to do with the template type selection.Quote:
Originally Posted by TheGrimReaper
And now... there is some sort of "restocking" display that is causing normal access to show a "can't establish a secure connection" while the same page is "accessible" by removing www. from the url prefix... but.. when accessed that way none of the css is properly displayed...
You know, something else that would help to identify the issue(s) would be to identify what was changed in the default copy of the template to get what was wanted as it could have very likely caused exactly what is being seen as a problem...
Yup, nothing wrong with the images at all. As I read thru this thread, I seeQuote:
Originally Posted by mc12345678
"........Once you've made your list perhaps post in the Respionsive Classic support thread. " is still on here also.
I'm now starting to get into the images phase and I think I see what you may have been trying to say. I suspect it is related to the sizes on the images and not the webp format, the webp format is a superior format and I'm not going to change that if I can help it. I'd rather not go backwards in technology. The sizes, locations etc is where I'm just starting, and I think I did it wrong just to upload images without sizing them. Not a problem, thats easy to back out from, create the right sizes and move those to the right directories. I have read, with great interest, your communique from 2012 with lindagal2's thread - How do I add_MED &_LRG product images?, and see the value and points you make therein. I don't what to say if you had missing images when you browsed the site thercrv.com, as I do indeed see them all, some are just different sizes than others. I do think I'll be able to take care of the display issues regarding sizes. I wanted to jump on here and thank you for your efforts of 2012 and let ya know they are still being referenced today. So Thank You!Quote:
Originally Posted by mc12345678
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.
https://docs.zen-cart.com/user/image...tional_images/Quote:
Originally Posted by TheGrimReaper
https://docs.zen-cart.com/user/image..._to_a_product/
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.......Quote:
Originally Posted by DrByte
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.Quote:
Originally Posted by DrByte
The admin only uploads one image at a time, and only assigns the last one you uploaded to that product.Quote:
Originally Posted by TheGrimReaper
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.Quote:
Originally Posted by 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.
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.Quote:
Originally Posted by 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?Quote:
Originally Posted by TheGrimReaper
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"
Subfolders are quite a good idea because it does help keep things clean and nicely organized. That's probably why I never use subfolders... :wink2:
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.
Attachment 19405
I have 15 each size, armyjeep101.webp thru armyjeep116.webp - same names for 15 ea armyjeep101_LRG and armyjeep101_MED.Quote:
Originally Posted by DrByte
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. :shocking:
Hummmmmmmm..... Maybe I have a fault with armyjeep101, armyjeep102 etc. Originally I had it armyjeep1_1, armyjeep1_2 thus armyjeep1_1_MED armyjeep1_2_MED etc, but that wasn't working so I went the other way....... I reckon I COULD redo them all again and see....input? I'll seriously consider the sub-folders again, your logic was my logic for trying the first 20 times - LOLQuote:
Originally Posted by balihr
And yeah, there's going to be so many products I wonder if I'll live long enough to see them all, I DID get a pretty late-in-life start. Doggoneit, I need the fountain of youth, there's a rumor it's in Florida.
Regarding the use of lowercase, there's couple of articles somewhere, I think written by the good DrByte -Image Filename conventions and Image Preparation-how to that indirectly address the use of caps in files names, and then the forum posts by lindagal2, mc12345678 and the Dr. "How do I add _MED and _LRG product images?" all in aggregate, including examples, my mind merged everything and I figured out to use all lowercase---- Not to bad for me really! I use upper case MED and LRG though.....
Hey! How'd I become a Zen Follower all of a sudden???:laugh:
Persistence pays off, young padawan.Quote:
Originally Posted by TheGrimReaper
Ya, this is how your site with .webp images looks on the latest Safari browser:Quote:
Originally Posted by TheGrimReaper
https://share.getcloudapp.com/GGu6AOX8
https://share.getcloudapp.com/d5uweG8b
https://share.getcloudapp.com/rRukL8JL
You said "armyjeep101.webp thru armyjeep116.webp".Quote:
Originally Posted by TheGrimReaper
If you've told Zen Cart that your main image is armyjeep101.webp (and not armyjeep1.webp) then it will only ever recognize all the "101" files.
But if you tell it that "armyjeep1.webp" is the the main image, then for "additional" images it will detect all the armyjeep1xxxx.webp files that you add.
It doesn't do any "counting". It doesn't try to understand "numbers". It only recognizes "suffixes after the base name".
BTW: You don't need 15 _MED images. Default Zen Cart only uses the first one.
Looking deeper, and beginning to over think.........
armyjeep101 in images (small) uploaded in admin
armyjeep102 BAD in images (small (unless that's the one uploaded in admin))
armyjeep101_MED is good
armyjeep101_LRG is good
Either is good, but ONLY if the small in images is armyjeep101 OR armyjeep102 - I can't have more than 1 armyjeepxxx in images (small). If I have armyjeep102, 103 etc, they get ignored and the only armyjeep10x_MED and _LRG (whichever one was administratively uploaded) are going to be the extras
Wow, articulation is getting difficult......
ok, let's try this:
armyjeep101 uploaded in admin
therefore
armyjeep101_MED
armyjeep101_LRG
armyjeep102_MED
armyjeep102_LRG
armyjeep104_MED
armyjeep104_LRG
and on down the line are all good UNTIL.....
armyjeep111_MED /_LRG is bad because we left the armyjeep10x and entered into the armyjeep11x twilight zone?
Which means, I need to rename to something like
armyjeep1_01 small in images
armyjeep1_01_MED
armyjeep1_01_LRG
and on down the line are all good EVEN when.....
armyjeep1_11_MED
armyjeep1_11_LRG
then, the mighty Zen pats me on the back and rewards me with a big chocolate cookie?
So, the additional images that are supposed to show on the product page are only the smalls in images? I can get rid of the other 14 in medium (YAY!) but keep all 15 smalls in "images" (thumbnails) AND all 15 of the _LRG, the _LRG get called with a click on the smalls (thumbnails)? I can keep the current naming conventions of armyjeep1xx?Quote:
Originally Posted by DrByte
I deleted all but the armyjeep101 from medium, I used armyjeep101 small for the admin upload. I still have all 15 of the smalls in images and all 15 of the _LRG in large ...... :( no cookie yet!Quote:
Originally Posted by TheGrimReaper
Yeah huh? Interesting because I don't have any images currently on there anymore except some batteries and that darn jeep. I took them all off a couple of days ago, even that pic of the ESC's isn't up there........Quote:
Originally Posted by DrByte
That's a bummer, that poor rich folk with Safari don't get to share in the excitement. There's always Horizon Hobby, I bet they still have the old technology. Of course they probably reside somewhere with ample cellular service, a benefit we here in the vast desert just don't get to enjoy, and they can afford to be overweight. - I'm pretty stubborn, just ask my ex-wife.Quote:
Originally Posted by DrByte
Telling ME they don't work on Apple make me grin from ear to ear.
AH HA I just got it:Quote:
Originally Posted by DrByte
"If you've told Zen Cart that your main image is armyjeep101.webp (and not armyjeep1.webp) then it will only ever recognize all the "101" files." Reckon Ill do the renaming thing tomorrow-That HAS to be the problem. I guess the Safari issues got the blood moving in this brain o mine. All I have to do is rename the one file.
HAHAHAHA! I couldn't wait. I HAD to change it now. But, take a look at what it did. The additional images are all bunched up, like snakes in the water.
Admin->Configuration->Images->"Product Info - Number of Additional Images per Row" appears to be set to 9. Change it to something like 2 or 3.Quote:
Originally Posted by TheGrimReaper
LOL- Images per row, default 3 man, not 20. I got it.Quote:
Originally Posted by TheGrimReaper
Got my cookie! Moving on, stay tuned to this same Bat channel for more Bat adventures. There's still some mobile issues, but not today, may not tomorrow.Quote:
Originally Posted by TheGrimReaper
Incredibility educational, I'm learning more from you guys and the Mighty Zen than I have anything in 50 or so years. Thank you everybody!
Although we're gonna be quite off-topic, but still...Quote:
Originally Posted by TheGrimReaper
I couldn't agree more with you on the webp images and I'm really looking forward to the day when it kicks off and becomes what jpg is today. But, unless your site is a protest against Apple, and you're not really looking to sell and/or make money, you really should consider joining the rest of the sheep and switch back to jpg. I'm pretty sure your target audience is in the States, meaning approx 40% of your users use Safari (stats). Are you sure you want to kick almost every other visitor in the a** and throw them out of your store just because you're protesting against Apple? I'm with you on that protest - I've sworn no Apple device will ever be a part of my household - but that doesn't mean I refuse to sell to someone with an iPhone...
Perhaps consider using jpg, which you can run through some optimization tools (I really like Kraken) and get quite good results, at least until webp is fully supported by Safari. Just my 2c
This is something that is a standoff of sorts. Cell service around me isn't great and even I have trouble with other formats loading very slowly. 60% of users are on modern devices capable of things Safari isn't. Now, If people can run something other than Safari on their Apple devices, I think it should be noted that in order to see a page with webp they need to: 1-Use a compatible browser on that device 2-Complain to Apple to get off the mega-profit wagon and make their browser modern. I will do something like put a single jpg image up that displays the issues so they know what's up and the suggested remedy(ies). More than 75% of the people I have questioned near my location so far do not use apple, and I'm getting more input every day. It's also pretty easy to see a persons phone without really being obvious and so far I haven't seen many Apples, perhaps because they aren't rich or perhaps they have issues with them. More and more web pages are converting to using the webp to help relieve the stress on our towers so the problems Apple folks have are just going to get worse, I shouldn't be an exception. Cell carriers are starting to take note of the burden of more and more users and are trying to promote things to reduce that stress due to the issues of cost to build and I talk to many cellular engineers in my duties and find they prefer lighter weight apps and such, yesterday during a job I was on a conference call with 5 of them from various carriers and the opinion is pretty straight down the line. So, it seems, unless I figure out a way yo add jpg only when needed through some code like -detect browser, if modern display webp, else archaic use jpg- Being somewhat envious of those that understand how to code, I'm going to the library next time I get anywhere near a town that has one with a js book and start to teach myself-maybe I can develop something. It isn't a protest really, it's a devotion to move technology forward and those that are left behind need to catch up or sit idle at the sidelines. I deeply apologize to those I may have offended, but it isn't MY choice to pay more for less. I may lose the 25 to 40% that are Apple users that absolutely have no other means of viewing webp, but that then becomes my contribution to the cause. Meanwhile I am able to address the issues of the people near me. Like I say, I'll put something up to explain the issues they may be having and point them to Apple for resolution. Their problems are just going to get worse until Apple does something about it, I can only do my one tiny-tiny part.Quote:
Originally Posted by balihr
I guess that's the 45 years of being a Network Engineer in me...............
I feel really stupid today. Experimenting now with the folders idea. I assume there can be multiple folders, say military_vehicles, batteries, gift_certificates, categories etc.Quote:
Originally Posted by TheGrimReaper
Then in the medium folder another folder with the same name, such as military_vehicles, batteries, gift_certificates and so on.
The same for the large folder.
I made folders for batteries in images, batteries in medium and batteries in large .... and indeed I get all 3 images in the right places. Good, all is well.
There was already a gift_certificates folder in images, I created 3 sizes 125x125, 250x250, and the native size for large. Another good, all is well I get all 3 images in the right places.
Then that darn jeep again - I removed the existing image from the category/product to remove all traces of it hopefully in the db (prob not necessary, but certainly an abundance of caution) made a folder in images = military_vehicles, another in images/medium = military_vehicles and the same for the large directory.
I moved all the small jeep images from images to images/military_vehicles, the single _MED image to images/medium/military_vehicles and all the _LRG to images/large/military_vehicles - just like the others before it. It's just a matter of moving them from the folder into the new sub. Same process, same everything. I then added the main image we had working with everything else back in from the images/military_vehicles folder and I get the small image just fine, but nada on the medium and large and no more thumbnails on the product image page, it just uses the small image everywhere, on the product info page (now without the thumbnails again) and the large image view. It doesn't even know the other folders in medium and large are there even if I type the url straight to them...i.e https://www.thercrv.com/images/mediu...myjeep101.webp (which I derived and added the sub folder from doing a right click/view image from the browser) viewing them all this way the url remains https://www.thercrv.com/images/milit...armyjeep1.webp throughout. I even copied the medium image back outside the subfolder to sit directly in images/medium and it won't come back. all setting remain the same, the batteries all work, gift certificates still work, but I just can't get the military_vehicles images from anywhere except from images/military_vehicles, and then only the main small image. Thinking of going out and buying a gun............ I guess my only option is to revert it back to the way it was working and getting rid of all the sub folders. Could I have messed up the database somehow?
@DrByte - since TheGrimReaper is determined to use webp, what do you think of this modification:
It does hardcode a fallback to a jpg image, I know, but probably better than just not working on Safari...Code:function zen_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
global $template_dir, $zco_notifier;
// soft clean the alt tag
$alt = zen_clean_html($alt);
// use old method on template images
if (strstr($src, 'includes/templates') || strstr($src, 'includes/languages') || PROPORTIONAL_IMAGES_STATUS == '0') {
return zen_image_OLD($src, $alt, $width, $height, $parameters);
}
//auto replace with defined missing image
if ($src == DIR_WS_IMAGES and PRODUCTS_IMAGE_NO_IMAGE_STATUS == '1') {
$src = DIR_WS_IMAGES . PRODUCTS_IMAGE_NO_IMAGE;
}
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && IMAGE_REQUIRED == 'false') {
return false;
}
// if not in current template switch to template_default
if (!file_exists($src)) {
$src = str_replace(DIR_WS_TEMPLATES . $template_dir, DIR_WS_TEMPLATES . 'template_default', $src);
}
// hook for handle_image() function such as Image Handler etc
if (function_exists('handle_image')) {
$newimg = handle_image($src, $alt, $width, $height, $parameters);
list($src, $alt, $width, $height, $parameters) = $newimg;
$zco_notifier->notify('NOTIFY_HANDLE_IMAGE', array($newimg));
}
$zco_notifier->notify('NOTIFY_OPTIMIZE_IMAGE', $template_dir, $src, $alt, $width, $height, $parameters);
// Convert width/height to int for proper validation.
// intval() used to support compatibility with plugins like image-handler
$width = empty($width) ? $width : (int)$width;
$height = empty($height) ? $height : (int)$height;
// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
$image = '<img src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';
// BOF webp support 1/2
$ext = pathinfo($src, PATHINFO_EXTENSION);
if($ext == 'webp') {
$image = '<picture><source srcset="'.zen_output_string($src).'" type="image/webp">';
$src = str_ireplace('webp','jpg',$src);
$image .= '<img src="' . zen_output_string($src) . '" alt="' . zen_output_string($alt) . '"';
}
// EOF webp support 1/2
if (zen_not_null($alt)) {
$image .= ' title="' . zen_output_string($alt) . '"';
}
if (CONFIG_CALCULATE_IMAGE_SIZE == 'true' && (empty($width) || empty($height))) {
if ($image_size = @getimagesize($src)) {
if (empty($width) && zen_not_null($height)) {
$ratio = $height / $image_size[1];
$width = $image_size[0] * $ratio;
} elseif (zen_not_null($width) && empty($height)) {
$ratio = $width / $image_size[0];
$height = $image_size[1] * $ratio;
} elseif (empty($width) && empty($height)) {
$width = $image_size[0];
$height = $image_size[1];
}
} elseif (IMAGE_REQUIRED == 'false') {
return false;
}
}
if (zen_not_null($width) && zen_not_null($height) && file_exists($src)) {
// proportional images
$image_size = @getimagesize($src);
// fix division by zero error
$ratio = ($image_size[0] != 0 ? $width / $image_size[0] : 1);
if ($image_size[1]*$ratio > $height) {
$ratio = $height / $image_size[1];
$width = $image_size[0] * $ratio;
} else {
$height = $image_size[1] * $ratio;
}
// only use proportional image when image is larger than proportional size
if ($image_size[0] < $width and $image_size[1] < $height) {
$image .= ' width="' . $image_size[0] . '" height="' . (int)$image_size[1] . '"';
} else {
$image .= ' width="' . round($width) . '" height="' . round($height) . '"';
}
} else {
// override on missing image to allow for proportional and required/not required
if (IMAGE_REQUIRED == 'false') {
return false;
} else if (substr($src, 0, 4) != 'http') {
$image .= ' width="' . (int)SMALL_IMAGE_WIDTH . '" height="' . (int)SMALL_IMAGE_HEIGHT . '"';
}
}
// inject rollover class if one is defined. NOTE: This could end up with 2 "class" elements if $parameters contains "class" already.
if (defined('IMAGE_ROLLOVER_CLASS') && IMAGE_ROLLOVER_CLASS != '') {
$parameters .= (zen_not_null($parameters) ? ' ' : '') . 'class="rollover"';
}
// add $parameters to the tag output
if (zen_not_null($parameters)) $image .= ' ' . $parameters;
$image .= ' />';
// BOF webp support 2/2
if($ext == 'webp') {
$image .= '</picture>';
}
// EOF webp support 2/2
return $image;
}
@everybody - please do NOT use the code above unless Doc approves it (limited approval, of course).
So one thing not stated here, but is in one of the docs previously referenced... There is direction that for images located in sub-directories that the name of the file for the additional images should use an underscore after the root of the filename before the "additional" identifier...Quote:
Originally Posted by TheGrimReaper
So in the case of armyjeep1.webp an additional image (when located within a sub-folder) could be like: armyjeep1_1.webp. Where "could" is in reference to the use of the number 1 instead of anything that is acceptable in an image's filename...
So back on the thought of filtering requirements to keep it easy?
I basically use/consider the following in filenaming:
All lower case. (except for the _MED and _LRG suffixes of course)
No spaces.
Same file extension for all images associated with the product in question. (remember to apply the above although some devices will automatically make that extension uppercase on upload).
Additional image incorporate an underscore immediately after the base name.
If sorting is desired, use numbers and consider them as text instead of numbers: _10 if I remember correctly would come before _2, so use _02 or if necessary _002 if it is possible to have 100 or more images.
If sorting is not so important, then use something additionally descriptive in the additional name part: _left, _right, _top, etc...
No special characters in the name, anywhere.
Follow what balihr described about description of the image as the base file if two or more product will use the same folder as image1 will get all the additional images of image11 (unless the underscore in a sub-folder as described in the docs is a real thing, at which point only image1 with a then image1_image2_additionalimage_1 type naming would have that odd situation of extra additional images against image1 but not against image1_image2_additionalimage.
I made an edit to your post, to remove the "else" clause, as it was unnecessary.Quote:
Originally Posted by balihr
I haven't tested it, but it appears sensible.
Of course, it requires that one actually does put .jpg versions of all those same images on the server. So, while you may be saving download bandwidth for some, you're still using added storage space on the server.
:lamo:Quote:
Originally Posted by DrByte
Yeah, the "else" was completely useless, wasn't paying attention...
So... TheGrimReaper - here's a workaround for you to use webp, and at the same time you still get to cater those rich iphone people. :wink2: There's really no need to force them into using something else - people are slaves to habits and I'm pretty sure they will rather shop elsewhere than to be forced to use a different app, even it's maybe 50 times better... Don't let any sale escape you, no need for that. The solution above is a piece of code from includes/functions/html_output.php - you can find the file and add the code in red.
Then, simply put a matching jpg image next to your current webp images. So, if you have images/armyjeep1.webp, just manually upload another alternative image to the same folder and name it the same but with a jpg extension to have images/armyjeep1.jpg. This will let you use the picture tag so you let the browser choose which image to display - all the good browsers will opt for the webp, and Safari will still get to use the fallback jpg and Safari users will be able to see the images. Apart from needing more disk space (which is nowadays usually not an issue), this should help you keep your webp images and keep the site fast(er), but also provide a fully working website for all Safari users.
I have one product in classifieds with webp images format some time back, testing, no problems in sizing the image even in colorbox, OwlCarousel or with ZC.
Interesting use of <picture>, what about the browsers not HTML5!! They don't support webp or <picture> ether..
Unfortunately, looking at site logs many of my visitors are not up to HTML5 browsers yet. But then again who is using the older browsers? Even with my iPhone 11 I have no problems with webp!! If I wanted to keep supporting older browsers I'd still be using mobile detect! Which I don't.. I went a bit deeper into why the older browsers... found many newer browsers don't support the plug-ins that the script-kiddies love to use.. Looking at site logs again and doing scans, those visitors that don't upgrade, more then likely can't use what I sale anyway GEOPDF's and GEOTIFF's...
If change wasn't good, I'd still be coding in ML and the BBS would still be king....
Wow! There's a lot of alphabet soup in that kettle - gotta turn the heat down and cook a little more slowly.Quote:
Originally Posted by mc12345678
This makes sense! armyjeep101_LRG.webp (or .jpg if one prefers) really should be armyjeep1_01_LRG.webp when used in a sub-folder, thus giving direct reference to the main file to allow the image to be found in the subfolder military_vehicles, this will be easy.
Gonna go into the kitchen now and stir the pot.........
Soup's done! Tastes great. Reckon I can write a small book by now.Quote:
Originally Posted by TheGrimReaper
Thank you mc12345678. That's the trick.
How many folders deep can one go? Is it possible to do something like: images/military_vehicles/armyjeep1? This would certainly make it easier as the products come and go, thus adding years to my life.
I really like your thinking with "not letting a sale get away" it's good business sense. Quite a bit more work to capture it, but the reward may well be worth it. I have to weigh the pain, time and space expense against the gains potential, but promise I'll certainly put some mental effort into it. My wrists really ache these days, I had to get that dreadful carpal tunnel surgery back in the late 90's that I never really got back to 100% after. Gotta go soak em in cold water because the heat gets so bad., burns all the way up to my shoulders. That's a limiting factor that I really dislike immensely. Voice recognition speech to text isn't always accurate and gotta make a lot of corrections when I use big words and long sentences. Still looking for that fountain of youth.Quote:
Originally Posted by balihr
How about optimizing the site for IE6? Or Netscape Navigator? :wink2:Quote:
Originally Posted by davewest
I say press F to pay respects for those not html5...
Yeah, I get your point, but I believe this is a "win some, lose some" kind of thing, and the picture tag is a well-worth balance because the win part is much greater.
I've suggested its use ONLY because OP insists on using webp, and looking at stats, there's a huge amount of people using the older Safari so they can't view webp. There's approx 5% of users still using IE and other browsers, which is significantly less than 40-ish% Safari users. So, if some old bat still using IE8 can't see pics on the site, it's a risk *I* am willing to take just to make those pics available to an iPhone 10 user... Besides, I'm pretty sure that the vast majority of people still using these obsolete browsers ARE aware that there will be many things out there not working for them, but they're using those browsers most likely for the reasons you've mentioned.
Just sharing my thoughts here, I've been wrong before (many times). :smile:
Yes, it sure is. images/level1/level2 and create the same directory in each of the large and medium folders - images/large/level1/level2 AND images/medium/level1/level2Quote:
Originally Posted by TheGrimReaper
thus, for this example= images/military_vehicles/armyjeep1 AND images/large/armyjeep1 AND images/medium/armyjeep1 works just fine.
CORRECTION: Make that:
images/level1/level2/level3/file
to wit:
images/military_vehicles/armyjeep1/file (for the smalls)
AND THEN
images/large/military_vehicles/armyjeep1/file
AND
images/medium/military_vehicles/armyjeep1/file
As far as I know, as deep as many characters are allowed to make up the sub-directories and filename database field. If wanting/needing more then can increase the database field size...Quote:
Originally Posted by TheGrimReaper
In other words, I confirmed it works!Quote:
Originally Posted by TheGrimReaper