Wrap or add rows to promoted links

Question

I'm pretty new to sp in general (I am the site admin) Can someone give me a step by step guide on how to make either make Promoted links wrap automatically or so that I can statically say how many before it goes around to the next level

We are currently running sp2013 as part of office 365 so I have no "backend" access to the server

I have seen several code pages that you cut and paste said code into a script editor web part and cut code into it (example below)

But it didn't work and im not sure how to "apply" that code to the promoted link

example:

    <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
    $('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (numberOfLinksPerRow + 1) + ')').appendTo($('#promlink_row_' + currentRow));
    // increment the number of links in the current row
    numberOfLinksInCurrentRow++;  }
}
});
</script>

example

before saving

​​<style>
  .ms-promlink-body {
    width: 480px;
  }      
</style> 
<p>
</p>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
   <div class="ms-rtestate-notify  ms-rtestate-read efeaad72-54fb-4767-a4f2-5e6ef331a243" id="div_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on">
   </div>
   <div id="vid_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on" style="display: none;">
   </div>
</div>​​
<p>
</p>​​

After

​​​​​​<style>
</style>
<p>
</p>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
   <div class="ms-rtestate-notify  ms-rtestate-read efeaad72-54fb-4767-a4f2-5e6ef331a243" id="div_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on">
   </div>
   <div id="vid_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on" style="display: none;">
   </div>
</div>​​ 
<p>
</p>​​

Answer 1

I imagine your script does not work because of the src attribute on your link to jQuery, it should probably look like this instead: <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

But what you can do instead is this:
Each promoted link seems to be 160px wide, so why not just limit the whole "box" to x times 160?

So Click edit page and Edit Source and add this code:

<style>
  .ms-promlink-body {
    width: 480px;
  }      
</style>

480 for 3 boxes in width. You can use Content Editor Web Part if you can't find "Edit Source", but it should be there.

Update (2017-04-01)

Another solution is to use inherit on width instead of a fixed width, as purposed by @chris-ds:

.ms-promlink-body {
    width: inherit;
}

.ms-promlink-header {
    display: none;
}

Answer 2

The jQuery library for the code is loaded with a CDN. The line of code that loads that library contains some spurious text. Remove that. The first line needs to read just

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

If the code is pasted into the HTML of a Content Editor Web Part, SharePoint may mangle it. Better, save the code as a text file, for example PromotedLinks.js. Upload this file to a document library in your site, for example into the SiteAssets.

Then, edit the Content Editor Web Part and point the content link to the JavaSript file:

A Team site home page with a Promoted links web part with six entries looks like this BEFORE the JS is applied:

And like this AFTER the JS is applied. The only change I made to the above code is to remove the spurious text after the jQuery URL.

Note how this particular script even folds the top links into the new layout of 4 per row. Since the 6 top links would typically be removed before rolling out a site, this does not really matter.

Answer 3

changing width in .ms-promlink-body is the simplest way. However if you have multiple promoted links and you disire to wrap a specific promoted link on a page, then you should define a new css in a script editor and name it something! like below:

        <style>
               .ms-promlink-body1 {
                width: 350px;
                  }    
        </style>

find the id of the promoted link using inspector , then write down the follwing script in the script editor and add the above css to the promoted link you desire by using addClss()

     <script type="text/javascript" src="/Scripts/JQuery/jquery-1.8.1.js"></script>
     <script language="javascript"> 
             $(document).ready(function () { 
             $("#promotedlinksbody_WPQ2").addClass('ms-promlink-body1');
              });
     </script>

// promotedlinksbody_WPQ2 is the id of the tile you could get using inspect element

you could read my complete article on promoted links here ! and visit my blog here !

Answer 4

Wrap or add rows to promoted links:

<style type="text/css">
.ms-promlink-body { width: 103%; }
.ms-promlink-header {
    display: none;
}

</style>

How to change the size of promoted links:

//Adjust spacing
.ms-tileview-tile-root { height:60px !important; width:60px !important }
//Adjust size of content
.ms-tileview-tile-content { height:50px !important; width:50px !important }

**The !important is required to override the default set in core15.css

Answer 5

If you want to remain within the OOB features, you can set a script that limits the size of the promoted links frame. It automatically sets 160px + space, but if you set it to a smaller size, it will automatically wrap the tiles on the new row. In this example

.ms-promlink-body {width:900px}

the sixth tile will be in the new row. Naturally it makes sense - at this point - to hide the tiles navigation arrow, just adding a .ms-promlink-headerNav {display:none} to the script

cheers

Answer 6

There is an out of the box solution also, maybe not as flexible but it works for my purposes. You can create views using the order column, with each view filtering to the number you want to appear on each row:

• View 1 filter: “Order” less than 6
• View 2 filter: “Order” greater than 5 and less than 10

Etc...

Next, just add a web part to the page for each view. This would create rows of five. You can set the web part to "No Toolbar" and the chrome type to none so they appear as one group.

Answer 7

For a universal solution, put the following into a Content Editor web part:

<style type="text/css">
  div.ms-promlink-body { width: 103%; }
</style>

You may have to adjust the percentage, particularly if you've resized the tiles.

Answer 8

There is some problem with the original code. It doesn't work whenever you have more than 1 webpart on your page.

Here is a link to updated/improved code that will work with multiple webparts.

SharePoint 2013 Promoted Links Wrapping

I am including the script here for easy reference and the broken link.

JavaScript

<script type="text/javascript" src="http://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>