3

I need to create an image grid, like this (image and title) using Sitecore's SXA 1.6.

enter image description here

I took the approach of using a Page list component to implement this and gave it a media folder as a data source. Then i created a variant to view the image and title fields.

Problem is that the images are not showing in the list even though the field name is the same.

enter image description here enter image description here

What might cause this and is there a better approach?

1

You should not use the Image items directly as datasources. To display images, the page list will look for an Image field and not for a Media field.

One possible solution would be to create a template for datasource items that contain an Image field, a text field for your title, and possible other fields. Create items with this template and point the page list (datasource) to those items.

  • thank you but what i understand is that the variant field name should be the same as the field i want rendered, the field is called media as shown in the template screenshot therefore it must be another reason. isn't that correct? – Menah Alasmy May 24 '18 at 12:16
  • 1
    That is correct, but the field needs to be renderable (is that a word?). Anyway, Sitecore (and sxa) renders Image items, not the Media fields on their own. That's why this is not working. – Gatogordo May 24 '18 at 12:54
  • It will be good to create custom template as per your need (title/short description/image/long description) and create items, and use the pagelist component to render it. – Amit Kumar May 25 '18 at 12:49
  • Not using an "image" field was my problem - thanks! – Jen Jan 15 at 3:33
2

1) One option would be to use Promo renderings + column and row splitters.

I would split content first into 2 (or number of rows you need) rows with row splitter:

enter image description here

and then I would put column splitter into each row splitter:

enter image description here

Then you will add Promo component item each box that was created by splitters:

enter image description here

You can assign images, links, texts to them as you wish. You need to create variant for this rendering to suit your design. I have used Habitat styles of promoboxes.

More info about Promo renderings can be found here: https://doc.sitecore.net/sitecore_experience_accelerator/16/working_with_content/adding_and_changing_content/add_the_promo_rendering

You can also create snippet for each row to ease adding new "rows" with same components for content editors in Experience Editors. More information about snippets can be found here -> https://doc.sitecore.net/sitecore_experience_accelerator/16/working_with_content/composites/add_a_snippet

2) Another option would be to create similar functionality to Link List component with your own variant.

You can find details of this approach in this article: https://ggullentops.blogspot.com/2017/03/sitecore-sxa-variant-link-list.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.