Page 1 of 1

Image zoom on product detail page rendering much smaller image

Posted: 10 Feb 2020, 04:02
by xarga
I'm new to Aimeos. My catalog is loaded with products that all have a single, 2100px wide landscape image.

Clicking on the image on the product detail page (image 1) does not zoom in but instead renders a much smaller image (image 2) if the viewport is under about 1650px wide. If it is above this like 1700px the image zooms normally to fill the viewport. (image 3)

I checked the Aimeos demo site and you can see that the gift card product image (landscape-format) exhibits somewhat similar behavior while the other products (portrait-format images) - zoom as expected regardless of the viewport size.

http://laravel.demo.aimeos.org/default/en/EUR

Since I setup my installation of Aimeos using the demo files I'm wondering if there are demo settings that may be causing this behavior?
1600.jpg
1600.jpg (176.07 KiB) Viewed 1786 times
1600-zoom.jpg
1600-zoom.jpg (41.94 KiB) Viewed 1786 times
1700-zoom.jpg
1700-zoom.jpg (188.83 KiB) Viewed 1786 times

Re: Image zoom on product detail page rendering much smaller image

Posted: 11 Feb 2020, 12:19
by aimeos
The reason at the demo site is that there's only on image for the voucher which is very small.
In your case there may be only two images (one very small and a big one) and the browser displays only the smaller one for window widths smaller than the width of the big image. The browser decides itself based on the <img srcset="..."> attribute.

Can you right click on the image in the detail view (not the zoomed one) and click on "Inspect" so you see the source code? Then, post the <img/> tag you see so we can check the values of the srcset attribute.

Re: Image zoom on product detail page rendering much smaller image

Posted: 11 Feb 2020, 19:32
by xarga
Thanks for responding - here's the img tag on the detail page

<img class="item" src="http://localhost:8000/preview/4/6/46fc6 ... 2948c6.jpg"
srcset="http://localhost:8000/preview/4/6/46fc6 ... 2948c6.jpg 240w,
http://localhost:8000/preview/8/3/83e56 ... 3c05b2.jpg 1620w,
http://localhost:8000/preview/d/8/d8f8b ... 2c1415.jpg 1920w"
itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"
data-image="http://localhost:8000/preview/4/6/46fc6 ... 2948c6.jpg"
data-sources="{&quot;240&quot;:&quot;http:\/\/localhost:8000\/preview\/4\/6\/46fc672ca7853b7688842218462948c6.jpg&quot;,&quot;1620&quot;:&quot;http:\/\/localhost:8000\/preview\/8\/3\/83e567a87ce071885e0b30af683c05b2.jpg&quot;,&quot;1920&quot;:&quot;http:\/\/localhost:8000\/preview\/d\/8\/d8f8b8d9552525e1c7118bf4182c1415.jpg&quot;}"
alt="fruit-tart-1920x1080.jpg">

The crossover point seems to be a viewport of 1620px wide. I see there's reference to this size, At 1620px I get a large zoomed image. Drop the viewport down to 1619px and I get a 240px wide zoomed image. Mousing over the code (below) for that image shows "1619 X 1079 pixels (intrinsic 240 x 160 pixels)"

<img class="pswp__img" src="http://localhost:8000/preview/4/6/46fc6 ... 2948c6.jpg" style="display: block; width: 1619px; height: 1079px;">

Interestingly when i click on the above src link the image is the browser is still only 240px wide

Re: Image zoom on product detail page rendering much smaller image

Posted: 13 Feb 2020, 08:30
by aimeos
Seems the preview image sizes are only used if the viewport is bigger than the image and you don't have an image between 240px and 1620px. I would suggest to configure different preview image sizes for a more even preview size distribution like 240, 920 and 1640. If you are afraid that the images are scaled for viewports in between, you can add more preview images to get sharper images, e.g. for 240, 580, 920, 1260 and 1620.