Displaying image variants on pages

Image variants are user-defined versions of page attachments. They allow you to create a set of images that can differ in size, color, image quality, and other aspects of your choice.

Before you can start using image variants on your site, you first need to define the image variants in code and then generate them for page attachments.

Example

The following example works with image variants of File field attachments of articles on the Dancing Goat sample site. The example requires an image variant definition for a tablet. To learn how to create image variant definitions, see Defining image variants.

1. In the Pages application, select the Articles page in the content tree.

2. On the Design tab, open the properties of the existing Repeater web part instance named Articles.

3. In the web part properties, edit the Selected item transformation.

4. Find the <div> element with the article-detail-image class.

5. Replace the content of the <div> element with the following code:

   Text / XML transformation code

   Copy

   
   
   
    <picture>
        <source media="(max-width: 768px)" srcset="{% GetAttachmentUrlByGUID(ArticleTeaser, "image", "Tablet") %}"/>
        <img style="width: 100%" src="{% GetAttachmentUrlByGUID(ArticleTeaser, "image") %}" alt="Article teaser"/>
    </picture>
   
   
    

   Note: Current web browsers vary in their support of HTML 5 features. For example, the picture HTML element is not supported in Internet Explorer 11. When implementing your solution, make sure to test it in the web browsers you want to support.

6. Save the transformation properties and close the dialog window.

7. Click Save & Close.

The article teaser image now displays in different sizes based on the browser window width.

Note that you can also use other transformation methods to generate URLs for image variants. See Reference - Transformation methods for more details.