CTGY Template expanded product layout images

[ids]

It's been a while and the first time on Shadows for this issue. Client's store has different sizes for all the product images. The height (H) dim can usually be twice as the smaller ones. But the images need to render all at the same height for each row in the category. The image dimensions don't appear to be working to help align the images in the rows. Is there a simple method from the RT? Or is it done only in CSS? BTW: I have suggested to the client to resize all the images to the same/similar H dimension since that is the best method regardless. Or maybe is there some SMT image functions that can resize on the fly, even though it might slow the page speed?

Thanks,

Scott

[Matt Zimmermann]

Hi Scott,

The best way to handle this would be through CSS. However, your suggestion that they resize the images is the better solution, or if they at least have the same canvas size.

[ids]

NOTE: Same in both Edge and Chrome (latest versions)

Looks like the dimensions assigned to the image tag are being ignored?

<img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" loading="lazy" width="&mvte:category_listing:b_width;" height="&mvte:category_listing:b_height;">

If I set the height to the smallest in the row, I'm expecting them all to be aligned. Is that correct? The height value is correct but the rendered image isn't. The only solution I see so far is adding a max-height to the class x-product-list__image. The width doesn't appear to stay in proportion however. I am seeing the same effect if I disable the "height: auto;" defined in the img tag. In either solution I'll need to define a style just for the CTGY page.

Scott

[Matt Zimmermann]

Hi Scott,

The height and width attributes are mainly for initial loading and to make Core Web Vitals better. They are used, however the CSS adjusts it from there. You may need to modify to obtain the best results for the site.

[ids]

OK.

Isn't there some supplied JS that helps with this aspect? Also, a CSS question, should I apply the max-height to the contained the img is in?

Scott

[Matt Zimmermann]

Hi Scott,

There isn't anything in Shadows for dealing with the image aspects. As for the CSS, if you apply it to the containing element you can then control the image via "object-fit" as well.

[ids]

<img class="x-product-list__image"

So this is the proper class (Or create another class) to control the height to be rendered? Any thoughts on the image constraints?

[Matt Zimmermann]

Hi Scott,

You would want to use the class of the element containing the IMG tag.

[ids]

In current Shadows, the element is "figure." When I add a max-height to its class, "x-product-list__figure," the calculation seems to include the caption. The result is overlaps in the whole ctgy product layout. Should this be a DIV instead of figure?

[Matt Zimmermann]

Hi Scott,

True. In that case, you will probably have to modify the code and then the CSS.

[ids]

Matt, off the topic question. I can set the H and W dims and the template generates the correct line of code, but what happens with the CWV if the image turns out to be larger? Won't that report an unwanted shift?

Scott

[Matt Zimmermann]

Hey Scott,

That part can still be a sticky spot that they are trying to clear up. However, if the image dimensions are set and the element locked to those dimensions, there shouldn't be any shift afterwards. Another way to approach it is to make the containing element a fixed size so no matter the image size, there won't be a shift.