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

[TheGrimReaper]

I guess that's the 45 years of being a Network Engineer in me...............

[TheGrimReaper]

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 - LOL

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.

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?

[balihr]

@DrByte - since TheGrimReaper is determined to use webp, what do you think of this modification:

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;
  }

It does hardcode a fallback to a jpg image, I know, but probably better than just not working on Safari...

@everybody - please do NOT use the code above unless Doc approves it (limited approval, of course).

[mc12345678]

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.

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?

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...

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.

[DrByte]

@DrByte - since TheGrimReaper is determined to use webp, what do you think of this modification:

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;
  }

It does hardcode a fallback to a jpg image, I know, but probably better than just not working on Safari...

@everybody - please do NOT use the code above unless Doc approves it (limited approval, of course).

I made an edit to your post, to remove the "else" clause, as it was unnecessary.

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.

[balihr]

I made an edit to your post, to remove the "else" clause, as it was unnecessary.

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.

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. 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.

[davewest]

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....

[TheGrimReaper]

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...

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............

Wow! There's a lot of alphabet soup in that kettle - gotta turn the heat down and cook a little more slowly.

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.........

[TheGrimReaper]

Wow! There's a lot of alphabet soup in that kettle - gotta turn the heat down and cook a little more slowly.

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.

Thank you mc12345678. That's the trick.

[TheGrimReaper]

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.