CLS and Image Size

[tmlogo]

How do I have the image sizes Width and height included with the Element templates?

[ShopSite Lauren]

If you want to have all the image attributes added in the code, such as height and width, you can switch the [-- PRODUCT.Graphic ONLY_ALT_TAG --] to just [-- PRODUCT.Graphic --] in the product templates. However, there is CSS in all the responsive themes, including the Element themes, that will force images to not go outside the area provided for them (so that they change dimensions based on the screen size to work well on tablets, mobile devices and desktops), typically by setting a max-width or max-height. This could cause images to be distorted if the HTML has height and width settings. For example, if the column for your product is 200 pixels wide, the CSS in the theme will limit product images to be a max of 200 pixels wide. If your image is 300px wide and 300px tall, the HTML will set the image to 300px tall, but the CSS will limit the image width to 200px wide. The image will then display at 200px wide by 300px tall, instead of 300px x 300px.

If the issue is just the CLS issue and you don't necessarily need the image dimensions in the code, the easier option would be to add CSS to set a placeholder image area. That way, the content on the page won't jump around as images load since the image placeholder is there before the image loads, and the image can still be responsive to fit well with different browser widths.

One way to do this is by setting the height of the DIV containing the image to a set height and making sure that the CSS says images can't be taller than that height. You will want to adjust the height based on the screen size. For example, you could have CSS similar to the following. You'll notice as the screen size changes, the height set in the CSS changes as well.

Code: Select all

<style>
.card-img-top img {max-height: 100%;}
.card-img-top {height: 180px; max-height: 180px}

@media screen and (max-width: 992px) and (min-width: 768px) {
.card-img-top {height: 150px; max-height: 150px}
}
@media screen and (max-width: 550px) {
.card-img-top {height: 100px; max-height: 100px}
}
</style>

OR

Another option, which is what I would suggest doing, is to create a pseudo element that has a percentage height. That way, if your images are always a 4x3 ratio, or something like that, you could set your percentage to that same ratio and the pseudo element will save the appropriate size space for all screen widths. The CSS for this would look something like:

Code: Select all

<style>
 .card-img-top.text-center {max-height: 180px}
 .card-img-top.text-center:before {content: ''; display: block; padding-top: 80%; width: 100%; position: relative}
 a.catitem {position: absolute;top: 0px;display: block;width: 100%;height: 100%}
@media screen and (max-width:768px) {
  div#mi-img:before {content: ''; display: block; padding-top: 80%; width: 100%; position: relative}
  img#zoom-img {position: absolute; top: 0px; max-width: 100%; max-height: 100%}
}
</style>