Render image fields using the Responsive Image variant

Version: 10.3

Making your images responsive means that your browser downloads and renders a different sized version of that image based on the size of the image on your page and the screen resolution. Instead of using the standard rendering variant Field for images, you can use the Responsive Image field to add scaling and sizing criteria. With SXA, you can also use generic links to media items to render images on the page. The Responsive Image variant field lets you render the content from the media item directly. This field enables you to define the default size as well as additional sizes and widths of images.

Render an image field

To add the Responsive Image field for scaling and sizing:

  1. Add a rendering variant.

  2. Right-click the variant, click Insert, and click Responsive Image.

  3. In the Variant Details section, you can define the default size for your images.

The Responsive Image variant field enables you to specify:

  • Field name – the name of the field that contains the link to the image.

  • Sizes – define the screen widths and indicate the best image size for that screen width. For example, if you enter (max-width: 320px) 280px, (max-width: 480px) 440px, 800px this is rendered in the <img sizes=""> attribute:

    RequestResponse
    <img src="/-/media/Project/Tenant/Site/26056130_2115225655366272_5152181870065454436_n/MyImage.JPEG?w=400&amp;hash=C54AFF8A74289E7B0A776137DFF1D4F89DDEFF93" alt="Simple description of the image" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
    
  • Widths – enter the width in a comma-separated list of integers. For example: 320, 480, 800.

  • Default size – if specified, the size is added as a parameter in the "src" parameter. If left empty, the image is rendered in its original size.

The values entered in the Variant Details section are combined in an srcset attribute. The values in the following screenshot of the Variant details sections generate the following img tag:

The responsive image settings.
The source for the responsive image.

The Responsive Image variant field enables you to work with nested fields. For example, if you have a page with products and those products have a different number of images of various sizes. By using a field that can link to a media item, a reference field, and the Responsive Image variant field, you can render multiple images to be the same size.

To auto-size multiple images:

  1. Add the Multilist or Multiroot Treelist field to your page template.

  2. In the Source field, enter a query to gather the images you want. For example, query:$siteMedia to link to the virtual media folder of your site.

    Query for images example.
  3. Create a Rendering Variant for the component you would like to use the render images. Right-click the rendering that you want to add the variant to, and then click Insert, Variant Definition.

  4. Enter a name and click OK.

  5. To define the fields to display, you can add child items to the rendering variant. Right-click the variant, click Insert, and click Reference.

  6. The Pass through field defines the name of the field from the nested item. In the Variant Details section, in the Pass through field, enter the name you entered for the Multilist or Multiroot Treelist field of the page template.

  7. Right-click the reference item that you created in step 5, click Insert, and click Responsive Image.

  8. In the Variant Details section, you can define the default size for your images. For example, if you enter 400 in the Default size field, the images for the page will all have a default size of 400.

    Responsive image default size field.

Do you have some feedback for us?

If you have suggestions for improving this article,