Place banners via PHPlugins

I had a request from user Rod Barbee to write a tutorial about how to implement advertising banners using PHPlugins. As it turns out, quite an easy thing to do. To start, have a look at the demonstration gallery, which I’ve setup as an advertising overkill. Then come back and we’ll walk through the code examples.

You may want to keep the demonstration gallery open in a separate tab as you read through the article. This will allow you to easily see the elements as we discuss them, and — if you like to read source code — you can view the source code to get a look at how and where our PHPlugins functions are inserting markup into our source.

Also, if you have an iPhone, iPad or Android device handy, have a look at the gallery on that device as well. You’ll see that our banners are responsive to various display sizes. Cool!

Setting up

To do this, you will need to enable PHPlugins in your pages and galleries. The process of enabling PHPlugins is well-explained in the PHPlugins documentation, so I’ll not write about it here.

In my /phplugins folder, I have also created sub-folders for /css/ and /images/. In the /css/ folder, I will be storing my custom stylesheet, which allows me to control layout for my ads. For more information, see my previous tutorial on creating custom stylesheets via PHPlugins. The /images/ folder is where I intend to store the image files for my banner ads.

The basics, and our first example

Our first example puts a banner beneath our navigation and above the block. This is a great place for large, horizontal banners.

To accomplish this, we’re going to hook into our page at the location ttg_canvas_top, which allows us to insert content outside of and above the block. Here’s the sample function in our phplugins.php file.

function ttg_canvas_top( $style, $path ) {
	echo '
	<div class="banner-top"><a href="http://www.bluehost.com/track/theturninggate/banner"><img src="phplugins/images/bh_760x80_04.jpg" height="80" width="760" alt="Bluehost" /></a></div>
	';
	return true;		// Allows normal styles to process
} // END

First thing, we’ve written this function as a global function. The banner will be applied to every page on our site. If I wanted the banner only to appear on my Highslide galleries, I might write it this way instead:

function ttg_canvas_top( $style, $path ) {
	if (G_STYLE == 'CE2-HIGHSLIDE') {
		echo '
	<div class="banner-top"><a href="http://www.bluehost.com/track/theturninggate/banner"><img src="phplugins/images/bh_760x80_04.jpg" height="80" width="760" alt="Bluehost" /></a></div>
	';
		return false;
	}
	return true;
} // END

My markup for the banner includes three components, a division ( <div> ), an anchor ( <a> ) and an image ( <img /> ). All of my banner examples will consist of these three pieces.

The division creates a box. I have assigned the class “banner-top” to the division, which allows me to apply styling. You will notice in each of my subsequent examples that I have assigned a different class to each of my banners, allowing me to style them differently depending on where they appear in the page.

The anchor links our banner to a target, in this example to Bluehost using my affiliate link.

The image contains the source that calls our JPG banner into the page.

In my stylesheet, I have applied some styling to the banner-top class:

.banner-top {
	margin: 20px auto 0;
	width: 760px;
	max-width: 100%;
	}

.banner-top img {
	height: auto;
	width: 760px;
	max-width: 100%;
	}

The width is set equal to the width of my image, otherwise the division would automatically span the full width of my page. The margin is set to 20px on top to separate the banner from my site navigation; the auto is applied to both the left and right of my division and centers the banner on the page. If my margin-left and margin-right values where anything other than auto, then the box containing the banner would be left-aligned on the page.

I’ve set max-width: 100%; knowing that any content hooked into my pages via PHPlugins is also going to appear on my mobile galleries so I want it to be responsive. When users view my page on an iPhone, the display of which is much smaller than 760px, the division and image will be scaled to the width of the device.

And that’s it for the top banner. A simple function and a dolup of styling!

Tweak the example to taste

Taking the example above, I can make just a few modifications to move it to the bottom of the page. Instead of ttg_canvas_top, I hook into the location ttg_canvas_bottom. This moves the banner to the bottom of the page, beneath the grid, above the footer. I’m also changing the class on our division to “banner-bottom” so that I can apply slightly different styling. Here come the snippets.

in phplugins.php:

function ttg_canvas_bottom( $style, $path ) {
	echo '
	<div class="banner-bottom"><a href="http://www.bluehost.com/track/theturninggate/banner"><img src="phplugins/images/bh_760x80_04.jpg" height="80" width="760" alt="Bluehost" /></a></div>
	';
	return true;		// Allows normal styles to process
} // END

in custom.css:

.banner-bottom {
	margin: 0 auto 0;
	width: 760px;
	max-width: 100%;
	}

.banner-bottom img {
	height: auto;
	width: 760px;
	max-width: 100%;
	}

As you can see, the code is nearly identical to the previous example. Apart from the changes noted above, the only other change I’ve made is to set margin-top to zero for the class “banner-bottom”.

Putt’em in the block

Putting banners into the block is similarly easy to achieve. This time, we’ll hook into the location ttg_block_top. If I wanted to, I could just as easily add content to the bottom of the block, or to the top or bottom of the grid by hooking instead to those respective locations, ttg_block_bottom, ttg_grid_top, ttg_grid_bottom.

function ttg_block_top( $style, $path ) {
	echo '
	<div class="block-banner-top"><a href="http://www.bluehost.com/track/theturninggate/banner"><img src="phplugins/images/bhbanner.jpg" height="203" width="620" alt="Bluehost Banner" /></a></div>
	';
	return true;		// Allows normal styles to process
} // END

And the styling …

.block-banner-top {
	margin: 0 auto 20px;
	text-align: center;
	}

And the banner shows up inside the block, atop the text. I’ve approached the CSS a little differently for this example just to give another option. This time, I have not specified a width for my division; I’m allowing it to consume the full width of the block. To get the banner image centered within the block, I instead apply text-align: center to the the box, which center aligns all content within the division.

The box .block-banner-top is transparent in color, but if I wanted to visually confirm that the box is in fact larger than my banner image, I might add something like background: red; to the styling. Now that you can see the box, set text-align left and right to see the difference in behavior.

And because the block already contains a healthy dose of responsive magic, there is no need to make extra accommodations for mobile. It’s been done for you.

On the side

Maybe you like your banners vertical and to the side, a little something like this …

Easy, peasy. Again, we hook into the location ttg_block_top. This time, our function looks like this:

function ttg_block_top( $style, $path ) {
	echo '
	<div class="block-banner-left"><a href="http://www.bluehost.com/track/theturninggate/banner"><img src="phplugins/images/bh_125x400_03.jpg" height="400" width="125" alt="Bluehost Banner" /></a></div>
	';
	return true;		// Allows normal styles to process
} // END

And I apply styling to .block-banner-left:

.block-banner-left {
	margin: 0 20px 20px 0;
	float: left;
	width: 125px;
	}

I’ve set a 20px margin to the right and bottom of the banner to create some space between the banner and my text. The banner is floated to the left, allowing my text to wrap around it. And I’ve made a point of setting my box width equal to that of my banner image, 125px, so that the banner takes up no more horizontal space than necessary, again so that my text will proper wrap around it.

For my finale …

For my last trick, a bit of magic. Take a look at the demonstration gallery, at the vertical Bluehost and Craft & Vision banners on the right side of the gallery. Again, I will attach the banner to the block by hooking into the location ttg_block_top. Again, we could just as easily hook into the grid. This time, though, I’m going to dangle my banner outside the content block and perform some sleight-of-hand to determine whether the banner should or should not be visible based on the width of the browser window. Ladies and gentlement, my function …

function ttg_block_top( $style, $path ) {
	echo '
	<div class="block-dangler">
	<a href="http://www.bluehost.com/track/theturninggate/banner"><img src="phplugins/images/bh_120x600_01.jpg" height="600" width="120" alt="Bluehost" /></a>
	<a href="http://files.theturninggate.net/images/craftandvision.jpg"><img src="phplugins/images/CVBanner120.jpg" height="240" width="120" alt="Craft & Vision ebooks" /></a>
	</div>
	';
	return true;		// Allows normal styles to process
} // END

This time around, just to show you that you needn’t be restricted to a single banner, I have inserted not one, but TWO vertical banners. And now for the real magic, the styling …

.block-dangler {
	width: 120px;
	position: absolute;
	top: 0;
	right: -130px;
	}

.block-dangler img {
	margin-bottom: 10px;
	}

	@media screen and (max-width: 1240px) {
		.block-dangler {
			display: none;
			}
		}

The width of my images is 120px, and so I have correspondingly set the width of my container, .block-dangler, also to a width of 120px.

Because I know that the block and the grid are each set to position: relative; — and now you know it too, because I just told you — I know that I can position my banners relative to the block using position: absolute;. I set my top to zero to align my banners with the top of the block, and my right value to -130px. That’s the width of my banners (120px) plus a 10px margin. And with that, my banners are now thrusts outside of my block, on the right side.

I then set a 10px margin on the bottom of each image so that the two banners have a bit of vertical space between them.

“But what’s this @media thing?!” you’d probably like to know. That, my friends, is a media query. It measures the size of our browser and, if the browser is 1240 pixels or wider, displays our banners. If the browser is less than 1240 pixels wide, the banners are not displayed. And so these side banners will vanish on iPhones and iPads because there isn’t enough width in the screen to accommodate them.

Mind you, if you’re hosting banners for paying advertisers, it would be a bad thing to do to hide their banners. But as an affiliate, I may choose when and where to place banners, so in this context I can do what I like.

The number 1240 comes from knowing that my page content is 960px, my banner is 120px with a 10px margin on either side, and because my design is centered on the page, I will therefore need a equal amount of space on the left to ensure that things are not being cut off. 960 + ( ( 120 + 10 + 10 ) * 2 ) = 1240.

You can test the media query in your browser by resizing the window to smaller than 1240px wide; the ads will disappear!

Thank you all, thanks for coming and have a good night

And now you have several examples and several techniques by which to add banners to your pages. I hope you’ve found this insightful and informative, and that you’ll come again soon.

Good night!