Responisve Image in SXA

Using Rendering Variants

Having different images to optimize the experience on different devices (or screen resolutions) is essential. Here's a quick implementation example on how to achieve that using Rendering Variants (Scriban or Items).

If you check an example on w3schools the desired markup to handle different images per screen resolutions has to look like this:

<picture>
    <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
    <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
    <source srcset="flowers.jpg">
    <img src="img_smallflower.jpg" alt="Flowers">
</picture>

1. General Setup

1.1 Create Module

1. Navigate to sitecore/System/Settings/Feature
2. Create a Folder using Insert Options for your Solution
3. On "Feature" node use insert Option to create a Module
4.  Fill in the Module Name
5. Choose the Module Group (the folder you just created)
6. Select the areas you want to create items in for this module
7. Select the Module Scaffolding actions to make the module available on tenant and/or site creation

1.2 Clone Rendering

My Rendering should use a data source to be created or reused from my site/data Folder or sharedsite/data Folder. As the promo component has the same behaviour I'm using this component to clone from

1. Navigate to /sitecore/layout/Renderings/Feature/Experience Accelerator/Page Content/Promo
2. Perfrom a right click on the promo rendering item to enter the context menu and choose Scripts --> Clone Rendering
3. Provide a Rendering Name
4. Choose the the Module you just created
5. Provide a css class that is used on the <div> that wrapps the whole component.
6.  On the second tab "Parameters" choose "Make a copy of original rendering parameters" to not inherit from promo rendering parameters
7. On third tab "Datasource" choose ""Make a copy of original datasource" to not inherit from promo datasource template
8. On foruth tab you can create a new view file.

 

 

1.3 Adjust Template

The script that ran to clone your rendering has created a set of templates in the folder created by your module.

1. Navigate to /sitecore/templates/Feature/SXA Tutorial/Responisve Image to find the created templates
2. Navigate to "Responsive Image" Template to adjust the fields
3. Create the image fields you want to use in the responsive image (DesktopImage; TabletImage;MobileImage)
4. Don't forget to set the source field to at least query:$siteMedia

 

1.4 Create Experience Editor Button

To improve the Author Experience to maintain all images easily from Experience Editor add an Experience Button.

1. Switch to "Core" database (Launchpad -->Desktop --> select "Core" in bottom right corner)
2. Enter the Content Editor
3. Navigate to /sitecore/content/Applications/WebEdit/Custom Experience Buttons
4. Add a new Item of template /sitecore/templates/System/WebEdit/Field Editor Button 
5. Provide Header Tooltip and Icon
6. In the "Fields" field add the fields to be shown in the dialog pipe-separated 

1. Go back to Master database (Content Editor)
2. Navigate to /sitecore/layout/Renderings/Feature/SXA Tutorial/Responisve Image/Responsive Image
3. In the Field "Experience Editor Buttons" choose the created button

1.5 Add Rendering to Toolbox

1. Navigate to <your site>/Presentation/Available Renderings
2. Make sure on Available Renderings Item that checkbox is checked
3. Choose an existing Available Renderings Item or create a custom one
4. Add your Rendering

2. Scriban Variant Example

Note: Scriban requires SXA version 9.3 or later

Your Rendering is still missing a proper markup. You can directly create the Rendering Variants in your site or add it to the module. I will add it to the module to install all items through my module later.

As the module installs certain templates to a certain locations and rendering variants consist of multiple renderings new need to create your rendering variants in the branch templates.

1. Navigate to /sitecore/templates/Branches/Feature/SXA Tutorial/Responisve Image/Default Responsive Image Variant
2. Create a new Variant Definition item under the Variant item called "$name" with name e.g.: Responsive Image Scriban
3. Add Scriban Renderer using insert options
4. Add Code to template field:

<picture>
    <source srcset="{{i_item.MobileImage.target.media_url}}" media="(max-width: 767px)">
    <source srcset="{{i_item.TabletImage.target.media_url}}" media="(max-width: 991px)">
    <source srcset="{{i_item.DesktopImage.target.media_url}}">
    <img src="{{i_item.DesktopImage.target.media_url}}" alt="{{i_item.DesktopImage.target.alt}}">
</picture>

 

3. Item Variant Example

If you have not done Chapter 2 your Rendering is still missing a proper markup. You can directly create the Rendering Variants in your site or add it to the module. I will add it to the module to install all items through my module later.

3.1 Create custom tags

As the out of the box installation does not provide the tags <picture> and <soure> we need to create them.

3.1.1 <picture> tag

1. Navigate to /sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Enums/Tags
2. Add Enum Item "picture"

3.1.2 <source> tag

1. Navigate to /sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Enums/Self Closing Tags
2. Add Enum Item "source"

3.2 Create Variant Definition

As the module installs certain templates to a certain locations and rendering variants consist of multiple renderings new need to create your rendering variants in the branch templates.

1. Navigate to /sitecore/templates/Branches/Feature/SXA Tutorial/Responisve Image/Default Responsive Image Variant
2. Create a new Variant Definition item under the Variant item called "$name" with name e.g.: "Responsive Image"
3. Add Section Renderer using insert options called "picture"
4. Select "picture" tag on section rederer
5. Underneath picture create HTML Tag Renderer called "source Mobile"
6. Select "source" tag on HTML Tag Renderer
7. Set Data attributes srcset using Field Token $(MobileImage) to reference the field of your datasource
8. Set Data attributes media using "(max-width: 767px)"
9. Duplicate the HTML Tag Renderer called "source Mobile" and name it "source Tablet"
10. Duplicate the HTML Tag Renderer called "source Mobile" and name it "source Desktop"
11. Add field renderer and name it "image"
12. Set field "Field name to "DesktopImage" to reference the field of your datasource.

4. Install Module to site

Before you install the Module to your site make sure that the actions are properly defined. If one action is not properly defined e.g. missing item name, the module will abort at the broken action.

1. Navigate to /sitecore/system/Settings/Feature/SXA Tutorial/Responisve Image/Responisve Image Site Setup/
2. Check Add Available Renderings action item if Location, Teplate and Name field are set
3. Check also  Add Responsive Images Data Item
4. Navigate to "Rendering Variants" Folder
5. Check Responsive Image action

If everything is correctly set you can install the module to your site

1. Navigate to your site in my case: /sitecore/content/SXA Material Creation/SXA Materials/SXA Materials Shared
2. Right-click the site item and choose Scripts --> Add Site Module
3. Select your module from the list (unselect the others if not needed)
4. Hit "OK" button
5. Check if following items have been created:

• "<your site>/Data/Responsive Image" Folder
• "<your site>/Presentation/Rendering Variants/Responsive Image" containing the variant definitions
• "<your site>/Presentation/Available Renderings/Custom Media" containing your rendering

 

5. Test your new rendering

1. Create a page
2. Open the page in Experience Editor
3. Add Rendering to Page
4. Use Experience Editor Button to edit your images
5. Save changes
6. Check your page with different screen resolutions
7. Check HTML Markup

Created: 19.6.2020

SXA Scriban