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
- <script type="text/javascript" src="https://azcollaboration.sharepoint.com/sites/SS179/SiteAssets/jquery-1.10.2.min.js "></script>
- <script type="text/javascript">
- $(document).ready(function() {
-
- var numberOfLinksPerRow = 4;
-
- var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
- var post = "'></div></td></tr>";
- var numberOfLinksInCurrentRow = numberOfLinksPerRow;
- var currentRow = 1
-
- var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;
-
- if (numberOfPromotedLinks > numberOfLinksPerRow) {
-
- $('.ms-promlink-root > .ms-promlink-header').empty();
-
- for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
-
-
- if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
-
- currentRow++;
-
- $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
-
- numberOfLinksInCurrentRow = 0
- }
-
- $('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));
-
- numberOfLinksInCurrentRow++;
- }
- }
- });
- </script>
Screen1
Screen2
Conclusion
In this article, I have added the JavaScript for wrapping the SharePoint Promoted links in SharePoint page.