In this scenario, we've got 3 Promoted Links called "Promoted1", "Promoted2" and "Promoted3". What we want is to show "promoted1" in wrapped view. Also, we want to resize "Promoted2" and "Promoted3" to look smaller as well as hidden on Page load. "Promoted2" should be shown on click event of Tile2 and "Promoted3" be shown on click event of Tile3 of "Promoted1".
For the background image of promoted2, png photos are used.
<
style
>
.ms-promlink-body {
width: 350px;
}
</
However, if you have several Promoted links and you desire to wrap just one of them , the mentioned trick would not work. Considering that "Simple is beautiful", I think the simplest way to wrap a specific promoted link is to define a new style and add it to that promoted link using addClass method. This style will be applied after all the styles defined for this component. (you can inspect it by inspect element).
.ms-promlink-body1 {
script
type
=
"text/javascript"
src
"/Scripts/JQuery/jquery-1.8.1.js"
></
language
"javascript"
$(document).ready(function () {
$("#promotedlinksbody_WPQ2").addClass('ms-promlink-body1');
});
// promotedlinksbody_WPQ2 is the id of the tile you could get using inspect element
As you can see in the snapshot below, only "Promoted1" has been wrapped in two lines. If you change the width to 480px for example, 3 tiles would be shown in one line.
This part is in completion of Umer Pasha's blog post at
http://umerpasha.wordpress.com/2013/02/15/jquery-to-change-size-of-the-promoted-links-in-sharepoint-2013/
on Feb 15, 2013, subj: jQuery to change size of the Promoted Links in Sharepoint 2013
Now, we want to resize "Promoted2" to look smaller.
Open script editor on the page.
Write down the following code:
<script type=
src=
></script>
<script language=
$(document).ready(
function
() {
// ImageSize is the size you desire for the tile, the default size is 180
var
ImageSize =
"80"
;
// promotedlinksbody_WPQ is the id of Promoted link which you could get using inspector.
promotedlinksbody_WPQ =
"3"
numberOfPromotedLinks = $(
'#promotedlinksbody_WPQ'
+ promotedlinksbody_WPQ +
' > .ms-tileview-tile-root'
).length;
ControlID=
'promotedlinksbody_WPQ'
ControlID=ControlID + promotedlinksbody_WPQ;
$(
"#"
+ ControlID).height(ImageSize);
for
(i = 1; i <= numberOfPromotedLinks; i++) {
'Tile_WPQ'
'_'
+ i ;
ControlID= ControlID +
'_1'
+ ControlID).width(ImageSize);
'_2'
// when you write "width(ImageSize-1)" , a space sized 1px appears between tiles, otherwise they would be stick together like a ribbon.
+ ControlID).width(ImageSize-1);
'_7'
'_4'
+ ControlID).addClass(
'ms-tileview-tile-detailsBox2'
);
"promotedlinksheader_WPQ"
+ promotedlinksbody_WPQ;
+ ControlID).hide();
</script>
As you can see in the snapshot below, "Promoted2" is in half size of "Promoted1".
The title of the tiles would be appeared on mouse over.
In order to show the title (no need to hover) you could 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>
. ControlID=
.
Do the same for "Promoted3".
In order to handle the click event of each tile you have to know the id of each tile when clicked. So, you use this code to get the id by an alert.
"a[id^=Tile_WPQ]"
).each(
this
).click(
linkTitle = $(
).find(
'li[title]'
).attr(
'id'
alert (linkTitle);
)};
In this scenario we want to hide "Promoted2" and "Promoted3" on Page load, then show "Promoted2" on click event of tile2 of "Promoted1" and show "Promoted3" on click event of tile3 of "Promoted1"
This piece of code will do this for you:
"div#WebPartWPQ3"
).hide();
"div#WebPartWPQ4"
if
(linkTitle ==
"Tile_WPQ2_2_6"
)
).show();
event.returnValue =
false
"Tile_WPQ2_3_6"
Put "Promoted2" and "Promoted3" in one cell of table and "Promoted1" in another cell. Just like the snapshot below:
Remove the white space between web part so you can navigate properly; then, "Promoted2" and "Promoted3" would appear instead of each other on click event.
Remove the white space using this piece of code:
.ms-webpartPage-root {
border-spacing: 0px !important;
.ms-webpartzone-cell {
margin: 0px !important;