Post
Ask Question

Wrap The SharePoint Promoted Links Using JavaScript

In this article, we are going to see how to wrap the promoted links icons in the SharePoint home page. To do that we need to add the below JavaScript in the Sharepoint home page using Script Editor/Content Editor.

JavaScript

  1. <script type="text/javascript" src="https://azcollaboration.sharepoint.com/sites/SS179/SiteAssets/jquery-1.10.2.min.js "></script>  
  2. <script type="text/javascript">  
  3.     $(document).ready(function() {  
  4.         // Update this value to the number of links you want to show per row  
  5.         var numberOfLinksPerRow = 4;  
  6.         // local variables  
  7.         var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";  
  8.         var post = "'></div></td></tr>";  
  9.         var numberOfLinksInCurrentRow = numberOfLinksPerRow;  
  10.         var currentRow = 1  
  11.         // find the number of promoted links we're displaying  
  12.         var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;  
  13.         // if we have more links then we want in a row, let's continue  
  14.         if (numberOfPromotedLinks > numberOfLinksPerRow) {  
  15.             // we don't need the header anymore, no cycling through links  
  16.             $('.ms-promlink-root > .ms-promlink-header').empty();  
  17.             // let's iterate through all the links after the maximum displayed link  
  18.             for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {  
  19.                 // if we're reached the maximum number of links to show per row, add a new row  
  20.                 // this happens the first time, with the values set initially  
  21.                 if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {  
  22.                     // i just want the 2nd row to  
  23.                     currentRow++;  
  24.                     // create a new row of links  
  25.                     $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);  
  26.                     // reset the number of links for the current row  
  27.                     numberOfLinksInCurrentRow = 0  
  28.                 }  
  29.                 // move the Nth (numberOfLinksPerRow + 1) div to the current table row  
  30.                 $('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));  
  31.                 // increment the number of links in the current row  
  32.                 numberOfLinksInCurrentRow++;  
  33.             }  
  34.         }  
  35.     });  
  36. </script>   

Screen1

 

Screen2

 

Conclusion

In this article, I have added the JavaScript for wrapping the SharePoint Promoted links in SharePoint page.