jQuery to change size of the Promoted Links in Sharepoint 2013

Sharepoint 2013 comes with standard Metro UI links app called “Promoted Links”. I will not go into how to set them up as you can google it and find various resources for that.

I was trying to put in two strips of promoted links and also wanted the second strip to be smaller than the first giving it a feel of a sub-menu. Coincidentally, there is no out of the box way of doing that. The images seemed to be scaled to 150px fixed.

So I added in a little bit of jQuery to resize them.

Here is the code that goes into a content editor webpart on the same page. Please change the path to your jQuery library reference. Change the image size you want. Change the WPQ number of the promoted link. You can find it by using developer tools on your browser hitting F12. Look for “promotedlinksbody_WPQ” :

<!--JQuery script to make promoted links any size. Also shifts to 2nd row if more than specified tiles. Author: Umer Pasha , Date: 3/15/2013-->

<script type="text/javascript" src="/scripts/jquery/jquery-1.8.1.min.js"></script>


<script language="javascript">
$(document).ready(function () {
 
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 10;

// Set Image Size 
var ImageSize = "76";

// in case we have multiple promoted links on page, name the WPQ here
var promotedlinksbody_WPQ = "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 = $('#promotedlinksbody_WPQ' + promotedlinksbody_WPQ + ' > .ms-tileview-tile-root').length;
//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++;

  }
}


	// Set the size of main promoted links body
	var ControlID='promotedlinksbody_WPQ';
	ControlID=ControlID + promotedlinksbody_WPQ;
	$("#" + ControlID).height(ImageSize);
	
	// iterate through each link and set the size
    for (i = 1; i <= numberOfPromotedLinks; i++) {
        
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_1';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
		
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_2';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);

		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_7';
    	$("#" + ControlID).width(ImageSize);
		
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_4';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
    	
    	
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_4';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
    	//$("#" + ControlID).top(ImageSize);

	}

	ControlID="promotedlinksheader_WPQ" + promotedlinksbody_WPQ;
	$("#" + ControlID).hide();


});

</script>

 

I am putting the javascript above in a .js file and putting the link to the .js file in a content editor. The content editor is on the same page as the promoted links.

These are the paths to the online vector icons I am using:

http://modernuiicons.com/icons/svg/appbar.reply.calendar.svg
http://modernuiicons.com/icons/svg/appbar.money.svg
http://modernuiicons.com/icons/svg/appbar.man.suitcase.svg
http://modernuiicons.com/icons/svg/appbar.calendar.14.svg
http://modernuiicons.com/icons/svg/appbar.calendar.svg
http://modernuiicons.com/icons/svg/appbar.places.svg

Here is the link to the .js file. Please rename to .js:   Link

 

---