Using JS Link to Resize an Image Column in Microsoft SharePoint 2013 List View Web Part

Problem

In a recent Microsoft SharePoint project, our client wanted to have pictures of their team members displayed on the home pages of the different SharePoint sites. In order to ensure consistency we advised our client to set a fixed length and width of the pictures, regardless of the dimensions of the images uploaded by the users.

SharePoint 2013 Standard, Enterprise and Online come with an out-of-the-box web part specifically designed to display team members. Our client, however, wanted to utilize the free on premise SharePoint Foundation deployment. SharePoint Foundation does not come with this feature nor does it come with a User Profile Service Application to sync users with Active Directory.

Note that in addition to SharePoint Foundation, the solution below also works for SharePoint Standard, SharePoint Enterprise and SharePoint Online

Solution

Below is a screen shot of the final result followed by the step-by-step instructions:

Solution Design

1. List
   Start by creating a team site and add a list by using the contacts list template; we called our list the Team Members list. When you’ve created your list you’ll need to add a picture column to store pictures for each team member.
2. Load Data
   Next, load data into the Team Members list. We used a 3rd party tool to fill the list of contacts as our client has a large number of team members. You can, however, add your images manually as well.

3. List View
   Create a new View to show only those columns needed for the home page display. Our need was to show the picture, name, business phone and office address. We also set a limit of three team members to be displayed per page and sorted the view by name in ascending order.
4. Script
   Then we created a JS script that does the whole magic of resizing the images. The script resizes images on page load only.

Configuring the Script

Here are a couple of configurations to customize the scrip:

JS Namespance
Namespace can be renamed as per your project title. If you change it at line 2, it must be updated on line 4, 8, 21, 22, 25, 28.

Size of Images
Image size can be changed on line no. 17. The pictures will be displayed on the home page in the dimensions specified here.

Path of Script
The path of the script can be changed on line no. 20. As you can see it is set to Style Library / JavaScript for this example.

1	// Create a namespace for our custom functions
2	var FMT = FMT || {};
3	// Create function for rendering the field value
4	FMT.JSLink = function () {
5	var webPartFieldOverride = {};
6	webPartFieldOverride.Templates = {};
7	webPartFieldOverride.Templates.Fields = {
8	'Picture': { 'View': FMT.Picture }
9	};
10	// We need to register the rendering template
11	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(webPartFieldOverride);
12	};
13	FMT.Picture = function (ctx) {
14	var pictureURL = ctx.CurrentItem.Picture.toString().toLowerCase();
15	if(pictureURL ==null || pictureURL.length==0)
16	pictureURL='/_layouts/images/O14_person_placeHolder_192.png';
17	return '';
18	};
19	FMT.MdsRegisterField = function () {
20	var thisUrl = _spPageContextInfo.siteServerRelativeUrl + "/Style Library/JavaScript/JSresizeImage.js";
21	FMT.JSLink();
22	RegisterModuleInit(thisUrl, FMT.JSLink)
23	}
24	if (typeof _spPageContextInfo != "undefined" && _spPageContextInfo != null) {
25	FMT.MdsRegisterField();
26	}
27	else {
28	FMT.JSLink();
29	}

5. Page Setup
   Add the Team Member List web part to the home page of the team site and select the list view created earlier by editing the web part properties.
   Then add ~sitecollection/Style Library/JavaScript/JSresizeImage.js to the JS Link property of the web part. You can change the path of the script, but make sure it’s correct for the resizing to work.

Click ‘ok’ and then save the page.

After making all these changes your SharePoint Site home page should look like this:

Point of Interest
The Team Members Paging is configurable from the Custom List View, and can be removed if need be.

The Item Limit of the View is configurable from the Custom List View.

Team members can be sorted based on any field available in the List.

Feel free to reach out to me should you have any questions to the instructions above or if you need help with Microsoft SharePoint.

Written by:
Abdur Raheem, Senior SharePoint Consultant
FMT Consultants