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;
}

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