Controlling image size in page list for sxa 1.8 rendering variant

Question

I am trying to create a page list variant that outputs an image field per item horizontally. For some reason the images are humongous.

I have tried using a section to wrap the content in a div, and have tried using data attributes on the image itself but image seems to be ignoring everything I try.

I have tried both a field and a responsive image to try to override the width to be a max-width.

I am using Bootstrap 4 as part of my theme in case that helps.

I have tried:

• not choosing an element for the field and trying to set width or max-width element as part of data attributes (and as part of the style)
• choosing an element such as a span - and again trying to set style attribute, but if there is no css class it is inserting it's own based on the field name eg: field-bannerimage
• tried setting css class on the wrapping div section, and setting style attribute on the wrapping div section but the image seems to be ignoring any max-width setting of its parent.

Answer 1

If the image is too big then it most cases that are just styling issues. Switch to preview (to get rid of most of EE tags and additional HTML) and test it there. I'm 100% sure that there is something wrong in your theme.

Keep in mind that we have a Responsive Image variant item which you can use instead of normal Variant Field. Start from reading this: Render image fields using the Responsive Image variant. Try to replace Variant field with Responsive Image a check if your problems will be still there.

The advantage of a responsive image is that the browser will be downloading images in different sizes base on your screen resolution - saving bandwidth.