SharePoint Responsive Promoted Links

Okay, let’s make this the shortest blog post in history, well.. not the shortest, but I’ll keep the fluff to a minimum. I wrote a blog post fairly recently for creating responsive tiles that link to your content in SharePoint. That blog post can be found here:

Personalize Your SharePoint Home Page with Masonry

It struck me that the script from that blog could be tweaked to work on a Promoted Links list in SharePoint and thus make it easier for users to implement without having to create a custom list.

So, that’s what this post is! To implement this solution follow these steps:

  1. Created a Promoted Links list
  2. Update the script from this blog and change the parameters as needed:
      – listName:       The Name of your list, default is ‘PromotedLinks’,
      – tileWidth:      The width you’d like your tiles to be, default is 150,
      – tileHeight:     The height you’d like your tiles to be, default is 150,
      – columnWidth:    Affects the space between tiles and how send they wrap to next row, default is 70,
      – axis:           responsible for making your tiles flip horizontally or vertically, default is ‘y’,
      – trigger:      what triggers the flipping of the tiles, the default is ‘hover’,
      – showTitle:   Specify whether you want to show the the title field on the tile, default is  true
  3. Upload the updated script to a document library in SharePoint
  4. Edit a page in your site and place a Content Editor Web Part on the Page
  5. Link the Content Editor Web Part to the script you uploaded to your document library
  6. Ta… and…. Da…. 

That’s all there is to it.

The Script

Here’s the script

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js" ></script>
<script src="//cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="//markrackley.net/scripts/PAITPromotedLinks.min.js"></script>
<link type="text/css" rel="stylesheet" href="//markrackley.net/scripts/PAITPromotedLinks.css" />

<script type="text/javascript">

$().PAITGroupPromotedLinks({
listName: 'PromotedLinks',
tileWidth: 150,
tileHeight: 150,
columnWidth: 70,
axis: 'y',
trigger: 'hover',
showTitle: true
});

</script>

The Video

And here’s the video walking you through the script…

 

<Okay… so the video doesn’t exist yet… give me a couple of days and I’ll have it up here. Smile >

 

So, there you go. After you implement the script your Promoted Links list will appear as responsive tiles that will adjust the number of rows depending on the resolution of your screen. You can play with the other parameters to adjust the size of the tiles, how they flip, and other stuff… so, give it a whirl!

Thanks again for stopping by!

Leave a Reply

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

*