Rakesh Patel: September 2018

Thursday, September 27, 2018

Promoted Links -> Script to show tile in rows and column

Promoted Links in SharePoint always show in a single row, following script help to break it into columns and rows also added style that will modify height and width.

// Copy Paste follow script into "Script Editor" above your Promoted Link web-part.

/*  Tile and border size. Delta between ms-tileview-tile-root and size of the promoted link tiles is the space between tiles  */
.ms-tileview-tile-root {
     width: 105px! important;
     height: 105px !important;
}

/*  size of the promoted link tiles */
.ms-tileview-tile-content, .ms-tileview-tile-detailsBox {
     width: 100px !important;
     height: 100px !important;
}

/*  size of the image within the promoted link tile */
.ms-tileview-tile-content > a > img {
     width: 100% !important;
     height: 100% !important;
}

/* Changes the Promoted Link Title when you hover over it*/
.ms-tileview-tile-detailsListMedium {
     font-weight: bold;
     height: 100px;
     padding: 4px 7px 7px;
     font-size: 12px;
     line-height: 14px;
}

/* Changes the Promoted Link Description when you hover over it*/
.ms-tileview-tile-descriptionMedium {
     font-weight: normal;
     padding-top: 10px;
     font-size: 11px;
     /*  If you want to change the font size, change above */
}

/*  Remove this if you only what to show the images and not the text */
/*  Adjust the text in the Collapsed Promoted Link */
.ms-tileview-tile-titleTextMediumCollapsed {
     font-weight: normal;
     background-color: rgba(0, 0, 0, 0.6);
     width: 100px;
     height: 40px;
     position: absolute;
     top: -20px;
     left: 0px;
     text-align: center;
     vertical-align: middle;
     font-size: 11px;
     /*  If you want to change the font size, change above */
     line-height: 20px;
     word-wrap: break-word;
}

</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
   
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 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 = $('.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    
$('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));    
// increment the number of links in the current row
    numberOfLinksInCurrentRow++;  }
}
$(".ms-tileview-tile-detailsListMedium").attr('style', 'text-align: center');
});
</script>