Recent

Make Promoted Links display vertically

Unfortunately there isn’t a setting in the Promoted links webpart to make them display vertically.  But by adding a script editor webpart to the page you can make the promoted links display vertically by specifying how many promoted links should be displayed on each line.

By default promoted links will only display horizontally and a paging control will appear if all the promoted links won’t fit in the page area:
Promoted-Links-Vertical-16-0

Change Promoted links to display vertically

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

1. Download the zip file which contains the 4 css files:
promoted-links-multiple-rows.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-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-2-per-row.css” rel=”stylesheet” type=”text/css” />

Click the Insert button to save the Script Editor.
web-app-part-customization-19

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 3 links specified:
Promoted-Links-Vertical-16-7

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: