How To Create Image Renditions and Dynamic Content in SharePoint

What Are SharePoint Image Renditions?

Image Renditions in SharePoint allow for users to dynamically generate different resolution outputs of images stored within SharePoint. This option is available in a SharePoint site collection if you have publishing enabled.

Typically, Image Renditions are utilized by creating pre-defined width and height renditions so you can then call in a URL parameter to get that output template for an image of your choosing.

However, there is a way in SharePoint Online that will allow you to dynamically set these parameters on the fly, giving you the freedom to theoretically create custom image galleries or customized image content in general.

Creating the Renditions

Let’s say for example we have a document library in SharePoint Online that is comprised of only images. You can use the SharePoint REST API to pull back all of the items we have in that library. From there, you can use predefined styles from Microsoft (using their ms-grid system and singleCard elements) in a SharePoint Framework web part to start building a custom image gallery.

In typical scenarios, you can either pull back the entire file or the small thumbnail version of an image. This can cause several issues:

• The thumbnail version of the photo will come across extremely small and will be blown up to a large size in the card element leaving it blurry.
• The full version of the file will cause performance issues based on how large the file is and how many the web part might need to load.

However, we can pull back the full file and optimize it to a more manageable size.

Let’s say you have a very large image (2-3k resolution or higher) and you need to generate a thumbnail for it that is not blurry. In this instance, we can actually resolve the full name of the file (https://contoso.sharepoint.com/sites/Timlin/ImageLibrary/FilePath) and append the follow parameters to the end: ?Width=400&Height=200.

This leaves you with a full example URL of: https://contoso.sharepoint.com/sites/Timlin/ImageLibrary/FilePath?Width=400&Height=200.

In the background, each one of the images we pull back and append those parameters to, will be optimized and scaled for the defined width and height. This cuts down on loading time and allows you to generate easily readable thumbnail content for these files.

Handlebars Example Code for Single Card Output