Easy way to display promoted links (tiles) on multiple rows in SharePoint

A client wanted to display some quicklinks in the promoted links tiles. We had 8 links, on a page with 2 columns. By default you cannot add rows in the webpart.

promoted no rows
Normal tiles in SharePoint

There are some tutorials out there, that need you to add dozens of lines ofjQuery, javascript or other forms of script. A much easier way to do this was given on StackExchange: just limit the space of the body in CSS.

Every tile has a default of 160px, so when you want to show rows of 3 items, just limit the space to 3*160 = 480px.

Simply add a content editor or script editor to the page and add this code:

<style>
/*display rows of 3 items*/
.ms-promlink-body {
      width: 480px;
}
</style>

If you also have buttons on top (when you have more items in the row than can be shown on the page), you can add this part to the script to remove those buttons:

<style>
/*hide the arrows when you have more items than viewable*/
.ms-promlink-header{
display:none;
}
</style>

The result for the promoted links is this:

promoted rows
Tiles on multiple rows

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


34 thoughts on “Easy way to display promoted links (tiles) on multiple rows in SharePoint”

  1. If you want to be flexible and receive a responsive layout you could also set the width to 100%.

    /*hide the arrows when you have more items than viewable*/
    .ms-promlink-header{
    display:none;
    }
    .ms-promlink-body {
    width: 100%;
    }

    I added this css to the alternateCSS in those site collections where I only want to have a multiple lines promoted links and never the one with the β€œpages”.

  2. Thank you so much for sharing this. This is exactly what I needed. Keep up the great work.

  3. Hi wanted add space between tiles on same web part example i have 7 web part like DDDDDDD
    on same web part but i want to arrange this as DDDD DDD. I tried all the possibilities but nothing work, Please help to get ride of this.

    Harry

    1. hmmm… good question. This script is only to show it on multiple rows, never played with the with myself.
      I am not a good developer, so I don’t see the solution right now. Will try it out when I have time πŸ˜‰

    2. you might try adding two columns. The first column would have a width of four tiles and the second column a width of three tiles. Each column has to have its own scripteditor to achieve the DDDD DDD format.

  4. Hi,
    this is always changing, if I change something at the site. Has anyone the same problem?

    Alex

  5. Hi Mirjan, This is perfect! The problem I’m having is that if I edit the page in any other way or make changes elsewhere in the site, the formatting of the promoted links goes back to one straight line even though the script you provided is still in the script editor section. Do you know how to fix?

  6. This works, but after I save the page from edit mode, it pulls up the page with only the first 3 promoted links viewable. The other rows disappear. If I go back into edit mode, I see them on multiple rows like I want. What setting do I need to change?

  7. Pingback: Anonymous
  8. I got my promoted link wrapping works only on the edit mode. When I clicked save and viewed the page, it only showed one row instead of 2 rows. I have 9 tiles. Can someone tell me what I did wrong please?
    Thanks,
    Kim

  9. i have 40 promoted links (in rows with 6 links by row). Sharepoint display only 30. how to display all my promoted links ? tnx

    1. The reason why is that the view by default has a max of 30 items, just like any list/library. The issue here is that you can’t change the promoted links view… So I think you need to look at a workaround. A possible one is doing it via a search results webpart where you “search” for the items in the list, and change the display template to have it look like promoted links. A way to achieve this is written in this blog.

    2. Hi, I have the same problem. Do you found any solution already? Please let me know because it’s urgent for me

  10. Is there a way to dynamically adjust number of tiles when resizing browser or using phones/tablets that have a lower resolution ?

  11. I added this code and it somehow made everything on the page disappear. Is there a way to get it back?

    1. Wow! That is not supposed to happen! What you can try is to go to the site pages library, locate your page, go via the … to the version history and go back a version.

  12. I have the same problem as mentioned above some times: Every time I save the page after editing the script there is still just one row displayed. Please help me. I realy rage about it right now.

    1. Do you have some other development work on the site? Other script webparts? Custom theme? What you can try is to open the browser development tool and see if there are errors.

  13. Just what I needed, thank you Marijn.
    By the way, really enjoyed your session at SPS at the weekend πŸ™‚

    Cheers

    Matt

  14. Thanks so much for the code, however it’s not working as I intended.

    While editing my page it works as one would expect, however as soon as I save the page it returns to one row and the script changes itself to the following:

    Can anyone help me to rectify this?

  15. Thanks for this! Now, if I have 3 promoted links web parts on a single page and wanted each web part to have a different number of links in each row, how would I go about accomplishing that?

    1. hmmm, then you need to include some kind of identifier in the code.. so you can say promoted links nr1 should have that many, promoted links nr2 should have that many

  16. This is great! I also used Gavi’s header code to remove the scroll arrows and it looks so much cleaner.

  17. I have a client that wants only one tile in the first row, 3 in the next, 5 in the next, etc. I do not want to create several lists to accomplish this. I want to keep all the tiles in one list for editing purposes when links change or a new item needs to be added. Is there a way to do this?

    1. Hi Franschesca,
      There is not really an easy way to do this with promoted links. The easiest (and easiest maintainable) way is to actually create a few lists.
      If you really dont want this, you could start playing around with CSS or javascript. Maybe it would be best to have someone with webdev skills involved when you want to do this.

  18. Thanks, that worked for me. The only issue I’m having now is, how can these boxes be centered? They are all to the left of my screen. Any advice would really be appreciated!!

Leave a Reply

%d bloggers like this: