Pagelines DMS MediaBox add Link

Glenn Glenn's Blog 7 Comments

Pagelines DMS is a great WordPress Framework, but it still perplexes us why the MediaBox doesn’t include a link option out of the box. As you may know you could simply add HTMl for the image link in the ‘Text and Embed HTML’ field and keep the MediaBox Image field blank. Instead here is our way of adding a link with the image kept in:-

1. Add the following Less to your style.less file:-

[css]
/* MediaBox Link */
.section-mediabox {
.pl-section-pad {
.mediabox-wrap {
.the-media {
position: relative;
margin: 0px;
img {
width: 152px;
max-width: 100%;
position: relative;
z-index: 2000;
}
.the-media-html {
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2001;
a {
background: white;
filter: alpha(opacity=0); opacity: 0; // fix IE background click issues
cursor: pointer;
}
div, p, a {
width: 100%;
height: 100%;
display: inline-block;
}
}
}
// end media
}
}
}
[/css]

2. Then add the HTML link to the ‘Text and Embed HTML” field:-


<a href="[pl_site_url]" title=""></a>

Add your link and title as required. That’s it.

You’ll note in the .less that we’ve included a ‘p’ / paragraph in .the-media-html field and that is because a paragraph is automatically inserted around the HTML. Hopefully Pagelines will sort that out.

Update – Using this as a Mixin

We’ve also found that if you want to use this code as a Mixin then you simply need to wrap the css is an additional class such as

[css]
/* MediaBox Link */
.mediabox-link {
// Add Link to MediaBox .section-mediabox
.pl-section-pad {
.zeroed;
.mediabox-wrap {
.the-media {
position: relative;
img {
width: 152px;
max-width: 100%;
position: relative;
z-index: 2000;
}
.the-media-html {
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2001;
a {
background: white;
filter: alpha(opacity=0); opacity: 0; // fix IE background click issues
cursor: pointer;
}
div, p, a {
width: 100%;
height: 100%;
display: inline-block;
}
}
}
// end media
}
}
}
[/css]

You can then apply the Mixin to a container that has a MediaBox in it and now also to the MediaBox directly (updated May 2014).

About the Author
Pagelines DMS MediaBox add Link Pagelines DMS MediaBox add Link 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Comments 7

  1. does this mean the css should appear like?

    [css]
    .mediabox-link {
    .section-mediabox {
    .the-media{
    position: relative;
    .the-media-html {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    div, p, a {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    }
    }
    }
    }
    }
    [/css]

    1. Post
      Author

      Hi Bilbo
      Just a quick update on the above. I’ve now updated the .less Mixin so that it now also target the MediaBox class directly. Previously it needed a container (a column etc), but now it will filter though the mediaBox divs to find the link within.
      Cheers
      Glenn

  2. Post
    Author

    Hi Bilbo

    If you want to use the Less CSS as a ‘Mixin’ then yes that is correct. Simply cut and paste the original css within the .mediabox-link opening and closing {}. Then all you need to do is give the MediaBox container a class and then apply the above Mixin to it. I often this this approach for a ‘logo’ class (the most obvious use) on the MediaBox and as an example that would simply be:-

    [css]
    .logo {
    .mediabox-link;
    }
    [/css]

    Cheers
    Glenn

  3. Hey Glenn, thanks for your support. The links aren’t working for me anymore though. It was working and yes, i’d like to enable this functionality only if i apply the class, but it’s not now. i took your mixin version and applied a class per mediabox.

    1. Post
      Author

      Hi Bilbo
      I noticed that an erroneous mixin was included in the Less and this could have caused conflicts. Please try again with the updated Mixin and let me know how you get on.
      Cheers
      Glenn

  4. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *