Thursday, March 23, 2017

Sitecore SXA: using variants to create a list with images and links

A small post with an example on how to tweak SXA to get what you need without any code..


The requirement

We had to create a list of images that had a link on them to an internal or external page.
We couldn't use the default "Link List", as that had no image options..  We couldn't use the "Gallery" as that has no links..

Our solution

Template

We started by creating a new template for datasource items, inheriting from the existing "Link" template (/sitecore/templates/Feature/Experience Accelerator/Navigation/Datasource/Link) in the Navigation feature.


We called it ImageLink and added one field: Image (placed it in the Link section so it would be combined with the existing Link field on our base -Link- template. 

Variant definition

For the Link List component, we added a new Variant definition.

We called it "Imaged" and added just one VariantField for the image with properties:
  • Field name: "Image"
  • Is link: checked 
In order to get the link using the link field as source, we filled in the name of the field containing the link ("Link") in the field "Field used as link target" on the variant definition itself.

Don't forget to select the allowed templates in the variant definition ;)

Link List variant

Now we can add a Link List on our page and select the "Imaged" variant. And that is it actually.. save, publish, ...  and magic!
Here is our output:


A list with links and images - just what we needed. We can also use the (optional) title from the Link List and other inherited features.

And we didn't write any code. 

Scary...

4 comments:

  1. This write up seems to get you about 75% of the way there, but it isn't very thorough. How does the variant definition know to use the ImageLink template instead of the Link template?

    ReplyDelete
    Replies
    1. I didn't go into basic SXA details as those are already covered in the SXA documentation. This was meant as an example on how you can use the possibilities of SXA to extend stuff without code.

      About the variant definition: it does not need to know which template to use. That's the beauty...

      Delete
  2. One thing to note - this works if you add the links through the Content Editor (right click > Insert > Insert from Template > [navigate to new ImageLink template]), but does not make them available in the Experience Editor view. Once you add them through the Content Editor, you can then add your link list to the page in the Experience Editor and select the Imaged variant to render properly. Just wanted to add that for clarity sake :)

    ReplyDelete
    Replies
    1. True. But I wanted to focus on the ability to tweak SXA and not overload the article with basic stuff (as insert options). The experience editor was not tweaked, so works as the base SXA component - can be changed as well though but that also was out of scope here.

      Delete