Consistent text & images within display templates

SharePoint sites that feature different sized images and lines of text within aggregation web parts just don’t look professional. Enforcing ridiculously strict guidelines for content authors is always one option, I wouldn’t fancy suggesting it with a workshop though.

Fortunately Microsoft have given us everything we need to create consistent rollups. as shown below:

rollup2

Images

Image renditions do pretty much all the work, before starting check you have the prerequisites in place:

  • If your on premise the blob cache needs to be configured as detailed here
  • Ensure your using a site with publishing features enabled
  • From Site Settings -> Image Renditions, add a new image rendition specifying the image dimensions you require then make a note of its ID

The image rendition can then be called by appending ?RenditionID=X to your image within the display template. Note replace X with your image ID.

When using publishing pages, I don’t like to enforce a default image rendition as it removes the option for content authors to edit the image rendition from within the page. Instead I take the approach of enforcing the image rendition within the display template, to do this you’ll need to remove the html formatting that’s returned within the managed property like so:

var newsPicture = $getItemValue(ctx, “RollUpImage”);
var newsPictureString = newsPicture.toString();
var newsPictureBefore= newsPictureString.substr(0, newsPictureString.indexOf(‘?’));
var newsPictureURL = newsPictureBefore + “?RenditionID=5” ;

Whilst your there its also a good idea to set a default rollup image like so:

if (newsPictureString.indexOf(“/”) == -1) {
var newsPictureURL = ‘/sites/newshub/PublishingImages/default.jpg?RenditionID=5’;
}

Note – Update your RenditionID and site collection url accordingly.

Finally you need to show your content authors how to work with image renditions.

Text

If the display template is going to be used in the same size web part throughout the site collection, you could simply just trim the text whenever there are more than X characters using the Srch.U.getTrimmedString – More details.

More than likely you’ll want to rollup news into various sized web parts, by using CSS to trim the text you can avoid the need for multiple display templates:

If the field is a single line, you can simply apply the ms-noWrap class to your html element.

For multiple lines you’ll need to create your own class as shown below:

.eventRollupDescription{
line-height:1em;
max-height:3em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow-y:hidden;
}

The above styles will limit the output to three lines, modify the line-height, max-height -webkit-line-clamp styles to meet your needs.

The amount of lines displayed can then be adjusted at will, for example I have web parts in a custom page layout that has a horizontal web part zone that has a class of .horizontalWebpartZone, and I want only two lines:

.horizontalWebpartZone .eventRollupDescription{
line-height:1em;
max-height:2em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-y:hidden;
}

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.