Search This Blog

Friday, August 7, 2015

Change the size of Promoted Links in SharePoint using jquery

A simple way to change size of Promoted Links in SharePoint using Jquery. Copy below code to your common script file that is attache to master page and call TP_PromotedLink function by adding script editor to your web page where promoted links web part is attache.

TP_PromotedLink = function (imageSize, numberOfImage){
var  value; 
$(window).load(function() {
$('.ms-tileview-tile-root').mouseover(function() {
$('.ms-tileview-tile-root').mouseout(function() {
$('.ms-tileview-tile-detailsBox').mouseover(function() {
$('.ms-tileview-tile-detailsBox').mouseout(function() {


function updatePromotedLink(){
value =imageSize;
$("<style type='text/css'> .promo1{ top : "+value+"px !important} </style>").appendTo("head");
$("<style type='text/css'> .promo{ top :0px !important} </style>").appendTo("head");
$("<style type='text/css'>{  background: rgba(0, 98, 144, 0.8); font-size: 12px; line-height: 16px;  padding-left: 3px; position: absolute;} </style>").appendTo("head");
var body_width = (imageSize+10) * numberOfImage;
var title_width = imageSize+10;
var title_top = - imageSize/4;
$('.ms-promlink-header').css('visibility', 'hidden');

$('').width(title_width, 'important');
$('').height(title_width, 'important');
$('').width(imageSize, 'important');
$('').height(imageSize, 'important');
$('').height(imageSize, 'important');
$(' > a').width(imageSize, 'important');
$(' > a').height(imageSize, 'important');

$('').width(imageSize, 'important');
$('').height(imageSize, 'important');
$('').width(imageSize, 'important');
$('').css('min-width', imageSize);


$('').css('min-height', -title_top);
$('').css('top', title_top);




TP_PromotedLink accept two parameter

1.  imageSize : This is size of image in promoted link. If you want an image of size 150 X 150 than pass 150 as a parameter.

2. numberOfImage : This is for number of image you want to display in one row. If you pass 3 than in a row only 3 image of promoted link are display.

Like below image i add script editor in which i call TP_PromotedLink(150,3); 

than my promoted link is change according to that size

No comments:

Post a Comment