Pagelines DMS MediaBox add Link

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:-

/* 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
		}
	}
}

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

/* 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
		}
	}
}

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 Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / 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.