A Quick Win is something that takes little time and money but has a LARGE impact...Promoted Links are exactly that so check it out! Promoted links is an out of the box function that provides an easy way to manage a visual layout of links on your site. With the links being part of a list you get various features that a list provides such as security trimming, views, and opening in a separate window. In addition, as with all the great features and functionality there are always some downsides and gotchas that you need to be aware of and know how to fix or work around them. In this presentation you will learn what to watch out for and how to avoid some potential issues.

1. Promoted Links
You Get This One For Free!!
Stacy L. Deere-Strole
Focal Point Solutions, LLC

3. • Quick Wins
• Navigation
• What is a Promoted Link?
• Examples
• Gotchas
• Wrap-Up

4. What is a Quick Win?

5. Navigation

7. What is a Promoted Link?
• Tile List Web Part
• Out of the Box
• User Adoption Builder
• Navigation

8. Getting Started

9. Where Do You Want To Go?

10. My Stuff

12. Creating Promoted Link List

13. Select & Create App

14. New Promoted Link List

15. Upload Images
Simple Drag &
Drop

16. Open Promoted Links

17. Create Link
• Title: Enter Title
• Background Image: Paste Image from
Site Assets
• Background Image Description: Optional
• Description: Enter Description
• Link Location: Enter Location Link is
going too.
• Link Description: Optional
• Launch Behavior: Choose Option
• Order: Enter Order of your link in the list.

18. Add Image

19. Add Link Location

20. Choose Launch Behavior & Order
Launch Behavior Options
1. In Page Navigation
2. Dialog
3. New Tab

21. Finished Link

22. Saved Link

23. Add Web Part

24. Select Web Part
Select your area,
Choose Insert Tab,
select web part, add
and Save.

25. Finished Product

26. Editing Promoted Links

27. Editing Continued…
• Select the link to edit
• Choose the Items Tab in the Ribbon
• Edit link and save

28. Customizing Your Promoted
Links

29. Code – Adjusting Size
• Add a script editor web part to a page.
• Then Edit Source and paste this in there:
<style>
.ms-promlink-body {
width: 800px;
}
.ms-promlink-header{
display:none;
}
</style>​
This piece adjusts the width:
.ms-promlink-body {
width: 800px;
}
This piece removes the arrows:
.ms-promlink-header{
display:none;
}

30. Code – Multiple Lines
<style>
.ms-promlink-body1 {
width: 350px;
}
</style>
<script type="text/javascript" src="/Scripts/JQuery/jquery-1.8.1.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#promotedlinksbody_WPQ2").addClass('ms-promlink-body1');
});
</script>
promotedlinksbody_WPQ2 is the id of the
tile, you can get using inspect element

31. No Title Hover
In order to show the title define a new css class,
and add it to the promoted link.
<style>
.ms-tileview-tile-detailsBox2
{
position : absolute;
top: 0px!important;
/* [ReplaceColor(themeColor:"TileText")] */ color:#fff;
/* [ReplaceColor(themeColor:"TileBackgroundOverlay")] */ background-color:rgba(
0,0,0,0.2 );
}
</style>
<script type="text/javascript" src="/Scripts/JQuery/jquery-1.8.1.js"></script>
<script language="javascript">
… ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
ControlID= ControlID + '_4';
$("#" + ControlID).width(ImageSize);
$("#" + ControlID).height(ImageSize);
$("#" + ControlID).addClass('ms-tileview-tile-detailsBox2');
…
</script>

32. Removing White Space
<style>
.ms-webpartPage-root {
border-spacing: 0px !important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
</style>

33. Adding Your Code
• Edit your page
• Insert Tab
• Add Web Part
• Under Media &
Content
• Select Script Editor
• Add

34. • Copy and paste your code
• Select Insert
• Save Web Part

35. More FREE Stuff

40. Gotcha #1
Publishing Portal Template - You won’t find it unless you activate a
feature named “Team Collaboration Lists”.
• To enable the “Promoted Links” list, follow the below steps:
• In your Publishing Portal site, click on Settings icon.
• Under site actions category, click on Site Features.
• Find Team Collaboration Lists feature and active it by clicking on
Activate button.
• Click on Settings icon and then press on Add an App button.
• Search for Promoted Links and add this app to your site in order to
create your own list.

41. Gotcha #2
Content & Script Editor Web Part
• NOT turned on by default in O365
• To turn on must adjust setting in
SharePoint Admin
Turning Scripting OnOff
https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-
835da935584f?ui=en-US&rs=en-US&ad=US

42. Gotcha #3 – Moving Sites
http://spmindmelt.focalpointsolutions.co/promoted-links-a-the-
downside/
Description not
actual address

44. Want More Free Stuff?

45. @sldeere
www.linkedin.com/in/stacydeere
https://www.facebook.com/focalpointsolutions.co
sdeere@focalpointsolutions.co
BLOG: http://spmindmelt.focalpointsolutions.co
COMPANY: http://focalpointsolutions.co