magritton
1/16/2016 - 3:22 AM

SharePoint JavaScript that allows you to have multiple rows for the promoted links webpart.

SharePoint JavaScript that allows you to have multiple rows for the promoted links webpart.

<script type="text/javascript" src="http://portal.opwftg.com/sites/OPWSS/Teams/OPCO/OES/SiteAssets/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;

var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var post = "'></div></td></tr>";
var numberOfLinksInCurrentRow = numberOfLinksPerRow;
var currentRow = 1

var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;
  if (numberOfPromotedLinks > numberOfLinksPerRow) {
    $('.ms-promlink-root > .ms-promlink-header').empty();
    for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
      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>