SharePoint 2013 Promoted Links Wrapping

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.

promotedLinks1

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…

promotedLinks2 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.

By Bart

Bart is a certified SharePoint consultant / architect at CTG Belgium NV with a broad professional experience in IT, a background in software development with a specialisation in Microsoft products and technologies and a solid knowledge and experience in Microsoft SharePoint Products and Technologies. He started as a COBOL developer on a mainframe environment and grew into software development for Windows platforms. Participated in projects varying from migrations of existing applications to development of Web applications and Windows applications. Became fascinated by the SharePoint 2007 platform and strongly believed in the added business value of this platform. Is since then fully committed to SharePoint and focuses on SharePoint implementations, migrations, integrations, design and coaching. Stays on top of new developments within the SharePoint technology stack and related technologies.