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>​​
up vote 14 down vote accepted
+50

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;
}
  • wouldn'that just cut it off after x amount of pixels? – Crash893 Feb 11 '14 at 17:33
  • What do you mean by "cut off"? It would force the boxes to stack downwards, it would look like this: jsfiddle.net/HaZRZ – eirikb Feb 11 '14 at 19:05
  • I like what i see in the link but im very unsure how to apply it to the page. (im looking now ill report back in a second if I cant find it) – Crash893 Feb 11 '14 at 20:20
  • DING DING DING we have a winner – Crash893 Feb 11 '14 at 20:27
  • 1
    That did it. I shaved the file to promo.css and added to site assets then referenced it in a content editor webpart and now its working even after i save – Crash893 Feb 12 '14 at 7:36

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.

enter image description here

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

enter image description here

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

enter image description here

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.

enter image description here

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.

  • I'm going to give this a swing when I get to work and let you know thanks :) – Crash893 Feb 11 '14 at 12:47
  • okay so here is what I did and its not working 1) saved the code in my original post to a folder called promo2.js 2) uploaded it to site assets library 3) added a content editor web part to the page 4) edited the web part and pointed it to the url of the Js file in site assets...... but it doesn't seem to be working did I miss a step? – Crash893 Feb 11 '14 at 20:58
  • Did you correct the first line of code? Also, use the Developer Tools (F12) to check if the JS is actually being loaded, both the jQuery and your new script file. If they are not, check the paths. – teylyn Feb 11 '14 at 21:03
  • Im not sure how to tell from the console if java is being loaded or not, I changed the code in the original question to reflect what I am currently using – Crash893 Feb 11 '14 at 21:49
  • Developer Tools are different with browsers and versions of IE. Please google for that, since it goes beyond the question asked. – teylyn Feb 11 '14 at 21:58

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 !

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

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

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.

  • Can you even create a view with the "Tiles" layout? I don't see an option for that. – Dan Henderson Jun 26 '17 at 18:25

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.

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>
  • This link hangs and eventually fails to connect – skia.heliou Nov 25 '15 at 17:26
  • Added the script to my comment – Memphis335 Nov 26 '15 at 10:05

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.