SP2013 – Promoted links resizing

Hello everyone!

My organization has taken a liking in how promoted links are looking and want certain pages to show several groupings of the links. Problem is – they different sizes for different groupings, different amount of items per row, and, preferably for tiles to dynamically resize themselves should their allocated space shrink.

“Well, onward”, – I said, and went searching the forums.

Found a great solution posted by Umer Pasha here, however it was not enough, and actually what was there did not fully work with my promoted links list.

You, see on one of the sites I maintain a single promoted links list with a lot of link items, grouped by a custom “Category” column. I also have public views created for each of the Category field value so that I can assign that in the web parts on different pages. This way I have to maintain only a central location for links as opposed to having multiple lists, which is redundant.

One problem with the script in the above linked article is that it anticipates the IDs of links in resulting HTML to start from 1 and their length be equal to total number of items shown. In other words, it accounts for the default view for the list.

I want to share my own version of the script, that will allow you to:

  • Specify number of links per row
  • Specify the size of link boxes
  • Identify the needed web part by providing a numeric part of web part ID (please refer to the picture below)
    pl1
  • Specify if on load script should override specified tile size with regards to width of web part zone – to fit the specified number if links per row to the row
  • Specify if script should react to window resize event to recalculate the tile size to fit the specified number if links per row to the row

Here is the javascript for functions:

Then, of course, there is the bit to actually call the function. Up to you, the usual stuff: from CEWP, or from custom JS file… The code:

Screen grab demonstrating this:
pl-grab

Leave a Reply

Your email address will not be published. Required fields are marked *