SharePoint Promoted Links - Wrap tiles

SharePoint Promoted Links - Wrap tiles

When you use the "Promoted Links" web part on one of your pages, there is the possibility that the web part uses a lot of horizontal space, because you need to display a large number of tiles; for example, 12 tiles. For an aesthetically-pleasing display of the tiles, without cumbersome scroll buttons, you would need a large 16:9 monitor.

So wouldn't it be nice to have the option to wrap up the tiles? Like breaking up the 12 tiles into 3 rows for each 4 tiles?

With this small JavaScript it is possible.
Just add a "Script Editor" web part to the page and paste the following code to the snippet.

<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function () {
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 4;
// local variables
var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var post = "'></div></td></tr>";
var numberOfLinksInCurrentRow = numberOfLinksPerRow;
var currentRow = 1
// find the number of promoted links we're displaying
var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;
  // if we have more links then we want in a row, let's continue
  if (numberOfPromotedLinks > numberOfLinksPerRow) {
    // we don't need the header anymore, no cycling through links
    $('.ms-promlink-root > .ms-promlink-header').empty();
    // let's iterate through all the links after the maximum displayed link
    for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
      // if we're reached the maximum number of links to show per row, add a new row
      // this happens the first time, with the values set initially
      if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
        // i just want the 2nd row to
        // create a new row of links
        $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
        // reset the number of links for the current row
        numberOfLinksInCurrentRow = 0    }    // move the Nth (numberOfLinksPerRow + 1) div to the current table row
    $('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (numberOfLinksPerRow + 1) + ')').appendTo($('#promlink_row_' + currentRow));
    // increment the number of links in the current row
    numberOfLinksInCurrentRow++;  }

Note that this script also adds a reference to the jQuery library. When you already have access to jQuery on your SharePoint site you can delete the first row.

After saving your edited page it should look like this:

With the variable "numberOfLinksPerRow" you can control the count of tiles per row.

Other languages 

This article is also available in the following language :

French (fr-FR)
Leave a Comment
  • Please add 2 and 1 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
  • Benoit Jester edited Revision 7. Comment: Add french link, toc

Page 1 of 1 (1 items)
Wikis - Comment List
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
  • Benoit Jester edited Revision 7. Comment: Add french link, toc

Page 1 of 1 (1 items)