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() {
updatePromotedLink();
$('.ms-tileview-tile-root').mouseover(function() {
$(this).find('.ms-tileview-tile-detailsBox').removeClass('promo1');
$(this).find('.ms-tileview-tile-detailsBox').addClass('promo');
});
$('.ms-tileview-tile-root').mouseout(function() {
$(this).find('.ms-tileview-tile-detailsBox').removeClass('promo');
$(this).find('.ms-tileview-tile-detailsBox').addClass('promo1');
});
$('.ms-tileview-tile-detailsBox').mouseover(function() {
$(this).removeClass('promo1');
$(this).addClass('promo');
});
$('.ms-tileview-tile-detailsBox').mouseout(function() {
$(this).removeClass('promo');
$(this).addClass('promo1');
});


});

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'> div.ms-tileview-tile-titleTextMediumCollapsed{  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');
$('div.ms-promlink-body').width(body_width);

$('div.ms-tileview-tile-root').width(title_width, 'important');
$('div.ms-tileview-tile-root').height(title_width, 'important');
$('div.ms-tileview-tile-content').width(imageSize, 'important');
$('div.ms-tileview-tile-content').height(imageSize, 'important');
$('div.ms-tileview-tile-detailsBox').height(imageSize, 'important');
$('div.ms-tileview-tile-detailsBox > a').width(imageSize, 'important');
$('div.ms-tileview-tile-content > a').height(imageSize, 'important');

$('div.ms-tileview-tile-content').width(imageSize, 'important');
$('ul.ms-tileview-tile-detailsListMedium').height(imageSize, 'important');
$('ul.ms-tileview-tile-detailsListMedium').width(imageSize, 'important');
$('div.ms-tileview-tile-titleTextMediumCollapsed').css('min-width', imageSize);


$('.ms-positionRelative').each(function(){
if($(this).parent().parent().hasClass('ms-tileview-tile-content')){
$(this).height(imageSize,'important');
$(this).css('position','static','important');
}
});

$('div.ms-tileview-tile-titleTextMediumCollapsed').css('min-height', -title_top);
$('div.ms-tileview-tile-titleTextMediumCollapsed').css('top', title_top);

$('.ms-tileview-tile-detailsBox').width(imageSize)
$('.ms-tileview-tile-detailsBox').css('top',imageSize,'important');

$('ul.ms-tileview-tile-detailsListMedium').css('padding','0');

}
}



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