Tiles view with Client Side Rendering

In my previous post I wrote about Tiles view with CQWP. You can also achieve this using Client Side Rendering (CSR examples by Wesley).

I wanted my custom list to have Tiles view:

I created a Javascript Display Template file & uploaded to the masterpage gallery and set the JS Link in the Miscellaneous section.

Below is the sample CSR code (update the styles..):



CSS:



Note: I have the DisForm hard coded, I couldn't find a way to get the DisplayUrl property like in REST. I shall update this when I come across a better way.

Output:

Tiles view with CQWP

SharePoint 2013 includes a new list (App) "Promoted Links" that displays links in a tile based visual format.

My goal was to create a Promoted Links list but with some kind of filtering like Expiry on Announcement list. The prompted links doesn't provide with this option in the web part settings

or in the Tiles view:

I used the good old Content Query Web Part (CQWP) to achieve the tile view. The following are the steps:
1. Create a List with title, expiry, description and image columns
2. Update the ItemStyle.xsl file with following sample code: (fix the inline styles)



4. Update your stylesheet with below


5. Insert a CQWP, select your list, the above Item Style set your expiry filter and update the presentation fields.

You get the following: