SharePoint 2013: 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 cause the tiles to "wrap?" An example of useful wrapping would be breaking up the 12 tiles into 3 rows; 1 row for every 4 tiles. This would create the desired aesthetically pleasing display, without going past the edge of smaller screens. With this small JavaScript, the proper wrapping of tiles is possible.
Just add a "Script Editor" web part to the page and paste the following code into the snippet.
<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++; }
}
});
</script>
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)