Image zoom on product detail page rendering much smaller image

How to configure and adapt Aimeos based shops as developer
Forum rules
Always add your Aimeos and PHP version as well as your environment (Linux/Mac/Win)
xarga
Posts: 5
Joined: 16 Dec 2019, 22:54

Image zoom on product detail page rendering much smaller image

Post by xarga » 10 Feb 2020, 04:02

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 83 times
1600-zoom.jpg
1600-zoom.jpg (41.94 KiB) Viewed 83 times
1700-zoom.jpg
1700-zoom.jpg (188.83 KiB) Viewed 83 times

User avatar
aimeos
Administrator
Posts: 3717
Joined: 01 Jan 1970, 00:00

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

Post by aimeos » 11 Feb 2020, 12:19

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.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

xarga
Posts: 5
Joined: 16 Dec 2019, 22:54

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

Post by xarga » 11 Feb 2020, 19:32

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

User avatar
aimeos
Administrator
Posts: 3717
Joined: 01 Jan 1970, 00:00

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

Post by aimeos » 13 Feb 2020, 08:30

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.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Post Reply