I'm pretty new to sp in general (I am the site admin) Can someone give me a step by step guide on how to make either make Promoted links wrap automatically or so that I can statically say how many before it goes around to the next level
We are currently running sp2013 as part of office 365 so I have no "backend" access to the server
I have seen several code pages that you cut and paste said code into a script editor web part and cut code into it (example below)
But it didn't work and im not sure how to "apply" that code to the promoted link
example:
<script type="text/javascript" src="http://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
$('.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++; }
}
});
</script>
example
before saving
<style>
.ms-promlink-body {
width: 480px;
}
</style>
<p>
</p>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read efeaad72-54fb-4767-a4f2-5e6ef331a243" id="div_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on">
</div>
<div id="vid_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on" style="display: none;">
</div>
</div>
<p>
</p>
After
<style>
</style>
<p>
</p>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read efeaad72-54fb-4767-a4f2-5e6ef331a243" id="div_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on">
</div>
<div id="vid_efeaad72-54fb-4767-a4f2-5e6ef331a243" unselectable="on" style="display: none;">
</div>
</div>
<p>
</p>