Recent

Wide image tiles for SharePoint pages

Using a little css you can alter the promoted links app to display with wider images and to wrap to create multiple rows.
wide-promoted-links-2

The wide promoted links are rectangular instead of the default square shape, this allows more area for link titles and descriptions:
wide-promoted-links-1

Converting Promoted links to wide promoted links

The instructions below assume you have already added a promoted links app to your site.

1. Download the zip file which contains the 5 css files:
promoted-links-wide.zip

2. Extract the files and select which one of the css files you want to use.
**They are labeled by number of promoted links allowed per row before they wrap, e.g. Promoted-Links-wide-2-per-row.css

3. Upload that css file to the sites ‘Site Assets’ library

4.  Go to the page where you want the promoted links to display in a vertical orientation
A. Click on the Edit icon to edit the page
B. Click in a text area at the bottom of the page.
C. Click on the Insert tab.
Promoted-Links-Vertical-16-1

5.  Now insert a script editor web part onto the page.
A. Click on the Web Part option
B. Scroll down and click on the Media and Content category
C. Click on the Script Editor web part
D. Click on the Add option
Promoted-Links-Vertical-16-2

6.  Hover over the Script Editor webpart, click on the dropdown arrow, select Edit Web Part.
Promoted-Links-Vertical-16-3

7.  Now a Edit Snippet option should appear, click it.
Promoted-Links-Vertical-16-4

8. Enter a link reference to the css file in the Site Assets library in the Script Editor.  The format of the link reference should be:
<link href=”{URL to css file in Site Assets library}” rel=”stylesheet” type=”text/css” />

So an example would be:
<link href=”../SiteAssets/Promoted-Links-wide-2-per-row.css” rel=”stylesheet” type=”text/css” />

Click the Insert button to save the Script Editor.
wide-promoted-links-3

6.  Click on the OK button on the Web Part properties window to close it, then save the page.
Promoted-Links-Vertical-16-6

Completed Example

Example of Promoted links web part with wide images wrapping at 2 links:
wide-promoted-links-4
**Note: Your images should be sized 225px wide by 150px high for best display.

Other Promoted Link posts

About Nick Hurst (84 Articles)
SharePoint and Nintex developer who strives to find easy to deploy and maintain solutions for business problems.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: