Content Slider Display Template for CSWP

So I know there’s already apps out there, but using the OOTB content search web part provides much more flexibility:

  • Make use of SharePoint’s Keyword Query Language to display any items from within your farm/tenant – Tailoring news posts etc to specific users (More on that another day)
  • Using SharePoint’s image renditions, content authors can easily add rollup images that won’t end up squished or stretched
  • Enable content authors to select which managed properties are used through the web part properties

Through CSS you can also make it look however you like, I’ve opted to create a look as close to possible as the slider on the UK BBC homepage. To save you installing it to see how it looks, here’s a screenshot (Headline News web part):

contentslider5

I opted to use the bxSlider JQuery plugin which is completely free so in turn I can also give away my display templates. Fortunately using design packages its a doddle to get up and running:

  1. Import this display template DBSlider.wsp – Rename extension from .doc to .wsp
  2. Create an image rendition that has an ID of 5 (Suggested name is “News Rollup Image” 250px by 160px, but adjust to meet your needs)
  3. Configure your CSWP, setting both the control and item display templates to be slider

By default the display template is configured to use the article byline and rollup image managed properties from publishing pages, if your content is of another type, simply adjust these managed properties within the web part properties.

Advertisements

Leave a Reply

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s