Adding rows to SharePoint 2013's Promoted Links

I have to say, I quite enjoy the ... a hem ... Windows 8 style that SharePoint 2013 brings with the Promoted Links list.  I do however feel it can get a little dull, rather quickly.  Here is a little something I put together to jazz it up a bit. 

 

I'm using the Promoted Links as a Navigation tool and to give my Home Page a little style. 

 

So I've created an out of the box Promoted Links list in SharePoint 2013.  I added some links, 9 to be exact, with some nifty background images.  Here is what i have:

 



Now let's add a web part to a page and see what we get out of the box:

 

 

So with the space I've allocated in my page layout for these links, I can only display about 5 tiles wide.  The web part was nice enough to give me a little scroller at the top so I can see the rest of the links.  It cycles through the next 5 links:

 

Not bad... but not what I'm looking for.  Especially for a navigational tool, it isn't very user friendly.  What I'm looking for is to display all of my links, but to have multiple rows within my web part.  So with a quick view with our Developer Tools, we can see HTML the structure that the web part is rendered with:

  

Looks pretty reasonable; looks like all we have to do is add an extra Table Row to the main table, and move some of the Promoted Link DIV's to that new row.  Whip up a little jQuery that looks something (or exactly) like this:

 

$(document).ready(function () {

 

// Update this value to the number of links you want to show per row

var numberOfLinksPerRow = 5;

 

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

    $('.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++;

  }

}

});

All you have to do is change the value of numberOfLinksPerRow to the number of links you want to display on a row, and your good to go!

 

This is what my page looked like when I was done:

 

 

Enjoy!