SharePoint Tip of the Month

Creating a Custom Content Search Web Part to Display News Articles with Images

August 2015

As with so many news oriented web sites today, featured articles – with large clickable images and associated content – take the main stage. Many companies are looking to implement similar functionality on their internal facing site home pages. You may ask, “How can this feature be set up on my SharePoint site?” Let the experts at Abel Solutions show you how to do it.

We have had numerous clients ask for “Image Rotator” web parts on their SharePoint home pages to display interesting and high quality images as the main attraction. This feature is easy enough to set up and has a positive visual impact. We have also had clients who request “News” or “Announcements” web parts for their home pages as well, and these are straightforward out of the box SharePoint components. What if the goal was to combine the best features of these two web parts? How can we emulate the dynamic features of some of the most cutting edge news sites with our SharePoint internal facing site? You may be scratching your head. Let it be said here, it can be done! The task takes a couple of out of the box components of SharePoint enterprise version, and a little customization. The finished product is clean, elegant, and gives your site visual appeal.

Start with a SharePoint blog site

A good place to start is to look at the features of popular news sites. Most all have the ability to “like” and comment on content. If you don’t know SharePoint well, these features may seem a bit challenging to figure out. However, the answer is to use a SharePoint blog site for news content. A blog site you say? Aren’t those really more appropriate for miscellaneous ramblings on anything from restaurant reviews, to which paint I should use on my mailbox? Think again – all of the features we need are already built in. You can add images to your content. Readers can “like” your content, and reply if they feel compelled. It’s all there, right out of the box. Easy enough start, right? I know what you’re saying – “That sounds great. But that’s a separate site. How do I get that content to show up on our home page?” Good point. Now we’re going to use another powerful, but standard component of SharePoint Enterprise version – the Content Search Web Part.

News

SharePoint Content Search Web Part

If you are familiar with SharePoint 2013 Enterprise version, two of the most significant – and powerful – improvements to the platform are the enhanced Search functionality and the Content Search Web Part. By making much of the content on SharePoint 2013 indexed and searchable, we have heaps of “raw material” that can be displayed and massaged in numerous ways. Content Search Web Parts display content, served up by the search engine, in almost any manner we can imagine. They can serve up content from just about any area of the site, even sub sites, on any page where they are installed. This includes your SharePoint blog site. The web part itself is quite customizable right out of the box, and gives many display options and configurations to suit most circumstances. However, as our CEO likes to say, we’re going to take it to the next level. We want to display our content a bit differently than any of the standard options provide. We want to show a custom image size, additional fields or columns from the blog post list, as well as truncate the body of the content, make both the image click through to the post, and add a clickable link. Okay, that sounds good, you say. But just how do you get those features to work? This step is where it is helpful to have the experts at Abel Solutions on hand to help you achieve your SharePoint design goals! We’re going to customize the display template for the web part using JavaScript, add custom “Image Rendition” sizes, and use CSS and HTML to give our web part the “next level” look it deserves.

Customizing the Content Search Web Part

This phase is where the heavy lifting takes place. The first step is to pick a Display Template in the Content Search Web Part to customize. There are a number of templates provided with the web part, and the one that is closest to what we need is called “Picture on Top 3 Lines.” The name is pretty descriptive – It displays the content with the image on top, and then three lines of information below of your choice. Basically, any searchable information from the blog post list can be selected and displayed on those lines. You may be saying to yourself, “That sounds fairly customizable. Why would you need to go further?” Good question. You know how designers are – they can always find a way to make something look a little bit better. As we said earlier, we want to modify how the information is displayed, and add additional visual appeal. The out of the box template is good, but we want it to be great – elegant and engaging. So, we take the template we’ve chosen, and we open it in SharePoint Designer to edit the code underneath the template. We modify the JavaScript code to allow for the “Comments” count to appear on the same line as the date. We add code to allow the first four lines of the article to appear, and then truncate the rest of the text with a clickable link on the end.

We also edit the code to allow for a custom image size to appear, which has to first be set up in the Image Rendition settings at the site collection level, as well as the BLOB cache enabled by an administrator. Once those changes are made, we save the template with a unique name and make it available to the web part.

Now that the blog site is set up with content and images, and the custom template is configured, we add custom CSS to make the article title bold and a different color. We modify the spacing of the web part, and add some shading to the body below the image for contrast. Then we set up the web part to show only the top four articles in a 2 by 2 grid. Finally, we edit the HTML of the page to customize the Web Part header for a little extra style. Once search indexes the content, our web part is ready to go. Check out the image below for the finished product. If you’re interested in how you can implement something like this feature on your site, give the friendly consultants at Abel Solutions a call!

More News

This month’s SharePoint Tip contributed by Abel Solutions SharePoint Consultant Gregg Warnken