Wrap Promoted Links Web Part - Display Multiple Rows

The Promoted Links List/App gives a decent effect to represent static links instead of the Summary Links Web Part or the Links List in SharePoint 2013, though I would like to mention that Summary Links Web Part does have a few advantages.


However, in most cases the number of tiles (links) exceeds the available content area and we have a to navigate through the tiles using scroll buttons. For a relatively small number of tiles most users find this acceptable. However, if the number of tiles is too large and a certain group of users have to regularly browse till the last link, you can surely count them out of your Friend's List!


So, to ease things a bit here is a simple javascript you can use to "wrap" the Promoted Link Tiles after a set number of occurrences i.e. say you would like to display your tiles in rows of four. You need to embed the below javascript in the page where you are displaying the Promoted Link Tiles.




==Script Begin==

<script type="text/javascript" src=http://code.jquery.com/jquery-1.10.2.min.js></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

        currentRow++;

        // 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

    $('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));   // increment the number of links in the current row

    numberOfLinksInCurrentRow++;  }

}

});

</script>

==Script End==


Please note that to display more number of tiles per row, increase the "numberOfLinksPerRow" variable. Also, it would be a good idea to give a local jQuery library reference instead of codeplex reference.


I have taken this script from the TechNet Article here.


Hopefully, you will be in the "Good Books" of all your colleagues! :)