SharePoint 2013: Promoted Links Wrap Tiles

Posted: April 9, 2015 in SharePoint

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 each 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 to the snippet.

<script type="text/javascript" src="http://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 jQuerylibrary. When you already have access to jQueryon 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.

Reference : http://social.technet.microsoft.com/wiki/contents/articles/19622.sharepoint-2013-promoted-links-wrap-tiles.aspx

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s