Publishing and Web Content Management : New in SharePoint 2013 (part 1) - Content Authoring Improvements, Image Rendition

Microsoft dazzled us with the introduction of publishing features in SharePoint 2007—organizations could now use SharePoint to host their public web sites, brand them, and manage content with WCM. SharePoint 2010 added robustness with better content deployment, richer UI (with AJAX), and managed metadata integration (tagging) and continued to offer the same functionality we grew to appreciate in the 2007 publishing offering. SharePoint 2013 continues to provide enhancements to the WCM and publishing features of SharePoint.

Content Authoring Improvements

SharePoint 2013 provides a better experience for content authors. The emphasis is on facilitating content upload and editing with greater ease. For example, content owners may cut and copy text from Microsoft Word, and SharePoint ensures that the content respects the style and markup, as intended by the site designer. This capability may seem trivial to techie types, but it is a big deal for content owners because they can lift content directly from company documents and host the same information on the organization’s web site, without including irregular HTML formatting, which Word likes to include for preserving formatting.

Inclusion of video and media is now much simpler, with the help of Silverlight rendering and video content types for management of metadata. Furthermore, SharePoint will create thumbnail images for any uploaded video, which was often a task left to the marketing team or some third-party/custom component.

Content owners can now insert IFRAME content into HTML fields to allow rich content from other existing web sites. SharePoint allows control of the sites sourced from IFRAME via the HTML Field Security option under Site Collection Administration in site settings.

Figure 1 shows a screenshot for default HTML Field Security, which includes references from a collection of well-known media sites.

Figure 1. HTML Field Security

Image Rendition

Image Rendition controls the rendering of images, across a site collection, in different sizes. Previously, content owners had to upload different versions of image files—full size, low bandwidth sizes, thumbnails, etc.—for different views of a single image. SharePoint 2013 now provides content owners control over rendition of a single image file in different sizes.

Image Rendition is extremely important for minimizing space on the server and the amount of data downloaded to the client browser. For example, a content owner might upload several high-resolution images for display on a web site but want to provide a page of thumbnails for user selection. In previous versions of SharePoint, content owners accomplished this in one of three ways:

1. Upload the high-res images and thumbnail versions.
2. Upload the high-res image only and scale the image at the client.
3. Integrate third-party software to dynamically resize the high-res image.

Of the options above, the optimal solution is option three. Storing alternate versions (option one) quickly becomes unmanageable when images require multiple different size versions and content owners need to update a particular image. Option one is not especially optimal for storage space—it is fine for small numbers of images but quickly eats storage space as the number of images in the site grows. Option two is simply bad practice! Scaling images at the client requires the browser to download the full-size image and then reduce the size. Rendering a page of thumbnails with client scaling increases the payload of the page data downloaded.

Image Rendition is effectively option three, provided by SharePoint 2013.

Note  Image Rendition requires configuration of Blob Cache.

Image Rendition requires configuration of Blob Cache. Blob Cache is a disk cache for storing rendered versions of images. With Blob Cache, the server does not have the overhead of converting images (often an expensive operation) when the image rendition is requested multiple times by client browsers. The following steps demonstrate configuring Blob Cache:

1. Ensure that you are a member of the administrators group on each SharePoint web-front-end server.
2. Open Internet Information Services (IIS) Management Console (see Figure 2).

   

   Figure 2. Internet Information Server Management Console

3. Expand the Local Server and Sites node in the left panel.
4. Right-click the web application to configure Blob Caching.
5. Click Explore from the menu to open the location of the web application on disk.
6. Edit the web.config file.
7. Look for the following line in the web.config file:

   <BlobCache location="" path="\.(gif|jpg|jpeg|jpe|jfif|bmp|dib|tif|tiff|ico|png|wdp|hdp|css|js|asf|avi|flv|m4v|mov|mp3|mp4|mpeg|mpg|rm|rmvb|wma|wmv)$" maxSize="10" enabled="false" />

8. Provide a full path to a folder on disk, in the location attribute.

    Note  I recommend a Blob Cache location that is on a separate drive from system swap files.

9. Toggle the enabled attribute to True.
10. Save and close the web.config file.

Now that you have configured Blob Cache, I shall illustrate using image renditions. For the following exercise, you may use any image of your choice, but I recommend finding a high-resolution image or large size, since scaling these sized images is the purpose of the Image Rendition feature.

1. Navigate to your publishing site in SharePoint 2013.
2. Click the gear settings icon.
3. Click the View Site Contents menu item.
4. Navigate to the Site Collection Images library (or any image/media asset library).
5. Click the Files tab on the ribbon and then the upload document icon.
6. Browse your disk and upload the high-res image.
7. Feel free to complete field values for the image content type.
8. Click the OK button to complete the upload.
9. Click the gear settings icon.
10. Select the Site settings menu item.
11. Click the link for Image Renditions, under the Look and Feel heading.
12. Figure 3 shows the out-of-the-box image rendition templates.

    

    Figure 3. Image Renditions

13. Create the link to add a new item.
14. Give the new rendition a name, width, and height for image.
15. I created a rendition of 200 x 200px.
16. Navigate to a publishing page.
17. Edit the page and insert an image from the ribbon.
18. Click the ribbon icon to pick a rendition (Figure 4).

    

    Figure 4. Choose Image Rendition

19. After choosing my rendition I see a newly rendered image of 200 x 200px.

 Note  To maintain aspect ratios, you may create image rendition templates with either width or height only.

SharePoint provides dynamic image renditions by providing a rendition ID in the URL of a SharePoint image. Using the image rendition in the previous steps, right-click the image when in page browse mode and check out the URL of the image. SharePoint will render any image in any rendition by providing the rendition ID parameter, as follows:

http://sp2013/pub/SiteCollectionImages/zen.jpg?RenditionID=5

To determine the ID of a specific rendition, follow these steps.

1. Click the gear icon.
2. Select Site settings from the menu.
3. Click the link for Image Renditions, under the Look and Feel heading.
4. The item ID in the list (Figure 3) is the rendition ID.