hello, i fixed this in the last opc build where i strictly checked every type of possible image. the third argument was "quality" but it seems to be used only in webp+jpg+png images.
there is a new system in opc to provide responsive images.
example usage from within VM templates overrides is:
- Code: Select all
require_once(JPATH_SITE.DIRECTORY_SEPARATOR.'components'.DIRECTORY_SEPARATOR.'com_onepage'.DIRECTORY_SEPARATOR.'helpers'.DIRECTORY_SEPARATOR.'image.php');
$image = $this->product->images[0];
$onf = array();
$onf['title'] = htmlentities($this->product->product_name);
$onf['alt'] = htmlentities($this->product->product_name);
$onf['sizes'] = '(max-width: 750px) 90vw,(max-width: 1300px) 40vw, 20vw';
echo OPCimage::displayMediaThumbResponsive($image, $onf);
this code does:
- uses original image in src without resizing it
- uses 100%/50%/25%/5% resized webp version in srcset
- this line $onf['sizes'] = '(max-width: 750px) 90vw,(max-width: 1300px) 40vw, 20vw'; means:
-- for mobile devices use 90% of viewport, for up to 1300px laptops and tablets use 40% viewport and for PC's use 20% viewport
-- browser then calculates which size of the displayed image is best to be shown per device resolution and provided srcset
- Code: Select all
<img title="Sun shades Alfa Romeo 147 2000-2010 3-door hatchback Car Shades - set" alt="Sun shades Alfa Romeo 147 2000-2010 3-door hatchback Car Shades - set" sizes="(max-width: 750px) 90vw, 250px" loading="lazy" class="example" srcset="/images/stories/virtuemart/product/resized/webp5/example-car-shades-car-window-shades-set-1.webp 75w, /images/stories/virtuemart/product/resized/webp10/example-car-shades-car-window-shades-set-1.webp 150w, /images/stories/virtuemart/product/resized/webp20/example-car-shades-car-window-shades-set-1.webp 300w, /images/stories/virtuemart/product/resized/webp50/example-car-shades-car-window-shades-set-1.webp 750w, /images/stories/virtuemart/product/resized/webp100/example-car-shades-car-window-shades-set-1.webp 1500w" src="/images/stories/virtuemart/product/example-car-shades-car-window-shades-set-1.jpg" width="1500" height="1000">
best regards, stan