Promoted Links -> Script to show tile in rows and column

Promoted Links in SharePoint always show in a single row, following script help to break it into columns and rows also added style that will modify height and width.

// Copy Paste follow script into "Script Editor" above your Promoted Link web-part.


<style type="text/css"> <style type="text/css"> /* The height of the Promoted Link Webpart */ .ms-promlink-body { height: 100px; } /* Tile and border size. Delta between ms-tileview-tile-root and size of the promoted link tiles is the space between tiles */ .ms-tileview-tile-root { width: 105px! important; height: 105px !important; } /* size of the promoted link tiles */ .ms-tileview-tile-content, .ms-tileview-tile-detailsBox { width: 100px !important; height: 100px !important; } /* size of the image within the promoted link tile */ .ms-tileview-tile-content > a > img { width: 100% !important; height: 100% !important; } /* Changes the Promoted Link Title when you hover over it*/ .ms-tileview-tile-detailsListMedium { font-weight: bold; height: 100px; padding: 4px 7px 7px; font-size: 12px; line-height: 14px; } /* Changes the Promoted Link Description when you hover over it*/ .ms-tileview-tile-descriptionMedium { font-weight: normal; padding-top: 10px; font-size: 11px; /* If you want to change the font size, change above */ } /* Remove this if you only what to show the images and not the text */ /* Adjust the text in the Collapsed Promoted Link */ .ms-tileview-tile-titleTextMediumCollapsed { font-weight: normal; background-color: rgba(0, 0, 0, 0.6); width: 100px; height: 40px; position: absolute; top: -20px; left: 0px; text-align: center; vertical-align: middle; font-size: 11px; /* If you want to change the font size, change above */ line-height: 20px; word-wrap: break-word; } </style> <script type="text/javascript" src="https://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++; } } $(".ms-tileview-tile-detailsListMedium").attr('style', 'text-align: center'); }); </script>