SharePoint Tip of the Month
Creating a Custom Content Search Web Part to Display News Articles with Images
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.
SharePoint Content Search Web Part
Customizing the Content Search Web Part
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!
This month’s SharePoint Tip contributed by Abel Solutions SharePoint Consultant Gregg Warnken