Create a fully configurable Masonry grid in SXA – How To Implement Series

It always makes me feels good to solve a development problem. What’s with you? I recently had a requirement for creating a masonry grid for my client. fully configurable with each instance of it. Though I had it in my mind for a very long time but I was occupied with some other stuff.

masonry-js

The Problem:

question-mark-1495858_640

I wanted to do it with OOTB SXA components, but in the mean time I did not want to modify anything in the SXA. Also that component is supposed to be used in around 80+ sites, it will be a global component that all those sites will use. It should be separate component which does not depend on any other components.

I could have used the Gallery Component and modify it but for that I had to modify the existing component’s JS. I could also extend the Link List Component by creating another template and inheriting it into it.

The Solution:

Find solution concept

Let’s start by cloning a Component but first decide which component would suits your need? You need a component which gives you the listing of items, you can choose either from Page Listing or the Link List components, Page List will not suited for the current situation because you images will be coming from Page, you want to create it as a separate one so you can Clone a rendering for the Link List component for it.

Make Theme

 

I am going to use Masonry by David DeSandro. As This component will be used in multiple websites, so I am adding this library as an independent theme which I can inject in any other theme. So Clone any Core Theme in Core Libraries and remove its content and add your masonry.js in the Scripts and CSS in Styles folders.

2019-11-18_0047.png

Inject it in your Site theme

2019-11-18_0050.png

Clone a rendering

I will directly go after cloning part. If you don’t know how to clone a rendering check my previous blog for Clone a Sitecore Component in SXA – How To Implement Series

After cloning the component with a separate View you will get your View in

wwwroot\[sitename]\Views\MasonryGrid\MasonryGrid.cshtml

Before we play around with this file, lets configure the settings for the newly created component, we will modify the View at the very last.

Configuring the Masonry Component

To drop it on the page configure it to be available in your Available Components

2019-11-18_0058.png

And drop it on your page.

Modifying the Component Template

I need separate names to easily identify the names and fields for that component. So I want to update the template. In my items I need MasonryImage MasonryTitle and MasonryDescription

2019-11-18_0101.png

I also want a heading for my component so I modified the template for the parent listing item. I also want to be able to provide parameters from within my component, so I added ItemSelector and ColumnWidth

2019-11-18_0106.png

Adding Content to the Component

Now you can add your content for your component because all your fields are there.

2019-11-18_0056.png

Adding Rendering Variant

This is the best part. You just cloned a rendering for Link List but modified the cloned rendering to use Image. Well if you had cloned it with Gallery component, it would not give the Rendering Variant, because Gallery component does not provided the Rendering Variant functionality. So I am manipulate the Rendering Variant as I want to.

2019-11-18_0116.png

Initializaling the Masonry

Now I have my template ready, component available, rendering dropped on the page and the masonry library added and injected into my website. The only things left is the initialization. I could easily initialize it with the jQuery or the Vanilla JS as masonry provides both, but I will make the use of the In-HTML initialization. 

Remember we wanted it to be configurable from each instance of it. So lets modify its View.  I will get those fields (itemSelector, columnWidth) I added in my Component Item and get the available on my View by

@{
String itemSelector = @Model.DataSourceItem.Fields["itemSelector"].Value;
String columnWidth = @Model.DataSourceItem.Fields["columnWidth"].Value;
}

For the markup, I want to skip the <ul>,<li> listening and prefer to use my own classes and markup, in order to avoid the overrides by other Themes. You will notice these errors once you work with Global inheritance in Multiple Websites in SXA. So trust me with this. In Masonry you can initialize it with this

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

Add those assigned variables in the View following the above initialization process.

@foreach (Item item in @Model.Items) {

@using (Html.Sxa().BeginEditFrame(item.ID.ToString(), “Link”, Model.IsControlEditable)) { foreach (BaseVariantField variantField in Model.VariantFields) { @Html.RenderingVariants().RenderVariant(variantField, item, Model.RenderingWebEditingParams, Model) } }

index++; } </div>

Here is the complete gist for the Masonry Grid View.

Modifying the Styles

You need to provide basic spacing for the Masonry, and column width, so update the CSS and reattach it to the Masonry theme in your Core Themes and Publish your Full Website (Smart Publish).

.gird {display: block;}
.grid-sizer,.grid-item {width: 30.7%;}
.gutter-sizer {width: 1%;}
.grid-item--width2 {width: 48%;}
.grid-item img {width: 100%;height: auto;}

The Result:

Here is the result of all the efforts.

2019-11-18_0024.png


Bonus

psypsy

Once all that is completed, and your masonry finally shows up. You can extend it more like I did. Just to be sure you get it all easily I skipped those

Modify your templates as per all the options available for the masonry.

2019-11-18_0142.png

Fetch them all as per there date-type and extend the parameters in data-masonry attribute JSON

  bool horizontalOrder = @Model.DataSourceItem.Fields["horizontalOrder"].Value;
  String gutter = @Model.DataSourceItem.Fields["gutter"].Value;
  bool fitWidth = @Model.DataSourceItem.Fields["fitWidth"].Value;

You can also Play around with rendering variants for more fields and values and set them on your component.


Feel free, to use it and share your feedback if you find it useful. Cheers!

Reference Links

Sitecore Experience Platform 9.2 Initial Release
Sitecore SXA 1.9.0
Masonry

How To Implement Series for SXA

Don’t forget to check my previous articles for SXA.

How to add the PreLoader in SXA sites – How To Implement Series
Why Clone a Sitecore Component instead of Rendering Variant in SXA – How To Implement Series
Add an International telephone input field with Flags and Dial Codes in Sitecore Forms – How To Implement Series

One thought on “Create a fully configurable Masonry grid in SXA – How To Implement Series

Share what's in your Mind :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.