Earlier this week, I was creating a page in SharePoint which contained 2 Promoted Links web parts. One of those web parts had 12 links. The annoying thing about this web part is that there’s no wrapping when the tiles are displayed. If you have a limited number of links, you won’t have an issue. But if you have 12, like me, not all tiles will fit the screen and you will get scroll buttons. Not nice.
One of the solutions to have the tiles wrapped is Javascript. I found a script over here.
This script works well but has a limitation… it only works when you have 1 Promoted Links web part on your page. Once you have more, the results are somewhat… unpredictable, depending on the number of combined tiles of all the web parts.
Since I know a little of Javascript and JQuery, I figured… hey, why not enhance it and make it work for more web parts on a single page.
The results…
Looks a lot better, no? 😎
The script looks at each web part individually and wraps the tiles independently within the web parts.
Here’s the updated script.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ms-promlink-root').each(function(i, obj) {
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 6;
// 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
var promlinkRoot = $(this)
var numberOfPromotedLinks = $(this).find('.ms-tileview-tile-root').length;
if (numberOfPromotedLinks > 0) {
// 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
promlinkRoot.children('.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) {
currentRow++;
// create a new row of links
promlinkRoot.children('table').find('tbody:last').append(pre + currentRow + post);
numberOfLinksInCurrentRow = 0;
}
// move the Nth (numberOfLinksPerRow + 1) div to the current table row
var currentPromLinkRow = promlinkRoot.find('#promlink_row_' + currentRow);
var currentPromLinkBody = promlinkRoot.find('.ms-promlink-body');
currentPromLinkRow.append(currentPromLinkBody.children('.ms-tileview-tile-root:eq(' + numberOfLinksPerRow + ')'));
// increment the number of links in the current row
numberOfLinksInCurrentRow++;
}
}
}
});
});
</script>
I’m not an expert in JQuery, so if you like this script and you have suggestions to improve it, please get back to me so I can improve it and give the proper credits.
