(This article is cross posted at MovableTweak.)
A client recently asked me if they could have an easy-to-manage banner ad setup, with the ability to add advertisements and specify links and alternate text, while at the same time being able to manage them easily. Sounds like a job for… Movable Type!
This tip can be used for any ads, or any images for that matter. There are four basic steps: upload the ad, create an entry for it, create the php file and include it in your template.
1. Create an Ad Blog
Create a brand new blog called “Banner Ads”; you can call it something else, but you’ll need to remember it for later, so whatever it is, write it down.
To keep things organized, set your publishing directory to /ads/. Once you decide on a directory, you’ll need to make note of it and upload all of the images in your rotation to the same directory. This isn’t required, but as we go on you’ll understand how it can make your job easier.
Go to Design Â» Templates and delete all the templates. Be sure to get the archive templates and template modules; no sense in having them sitting around taking up space. We’ll return to the templates in a moment to create a new template, but first let’s create and upload our ad.
2. Upload Image
You’ll need to decide what size ads or images you’ll be using here. For sake of example, I’m going to create a banner in Photoshop using a standard banner ad size of 468x60 pixels:
Click Create » Upload File to upload the first image. Movable Type’s asset manager will walk you through the upload process. Once the file is uploaded, make note of its location. You will create an entry for each image you upload.
3. Create an Entry for Each Image
In the title field, give your ad a name. This is going to be the TITLE text for your banner ad link. Next we’re going to use the Body field for your path and file name of your image. (To do it right, get the Custom Fields plugin and set up an actual Image field. This saves will save you from headaches down the road.) This filename can be relative to your site (i.e. /cardonate.gif) or a full URI (http://www.plasticmind.com/images/header.jpg) The Keywords field will be the hyperlink (destination) that visitors will be taken to when they click your ad. This can be relative to your site (i.e. /support/donateyour_car.html) or a full URL (i.e. http://www.plasticmind.com/).
Save the entry. Repeat process for all images you want to appear in the rotation.
4. The PHP File
Go to Templates and create a new index template called “Banner Ads” This will be the PHP file that will generate the rotation and we will call to it from our other templates. Set the output file to “banner.php”. Now let’s drop the following code into the template, save and rebuild it:
<?php <mt:Entries lastn="999"> $ad[<mt:EntryId />]['pic']='<mt:EntryBody strip_linefeeds='1' encode_php='1' />'; $ad[<mt:EntryId />]['link']='<mt:EntryKeywords strip_linefeeds='1' encode_php='1' />'; $ad[<mt:EntryId />]['title']='<mt:EntryTitle encode_php='1' />'; </MTEntries> $rn = array_rand($ad); echo '<a href="' . $ad[$rn]['link'] . '" title="' . $ad[$rn]['title'] . '">'; echo '<img src="'.$ad[$rn]['pic'] . '" alt="' . $ad[$rn]['title'] . '"></a>'; ?>
It looks complicated but isn’t. Basically, the
<mt:Entries> container will loop through as many banner ad entries you have. (The lastn attribute is so it looks for the last 999 entries, not the default days.) For each one it will create a variable ($ad) with an array based on the entry id. In this array, we’re storing the ‘pic’ (file path), the ‘link’ (destination url) and the ‘title’ (ad title). We’re using the strip_linefeeds=’1’ attribute when building this to ensure that no stray
<br /> tags get into your image path or your hyperlink. That causes weird things to happen.
Then we pull a random ad from the array and echo (or print) two lines of code. The first line is your hyperlink, with the href set to the ad’s ‘link’ (made up of
<mt:EntryKeywords />) and the title set to the ad’s ‘title’ (made up of
<mt:EntryTitle />). The next line is the image, with the src set to the ad’s ‘pic’ (the file path stored in
<mt:EntryBody />) and for good measure we’ve set the alt to
Save and rebuild the template. You’re ready to test it. Type in your domain and the file name you gave it (i.e. http://www.rideforlife.com/banner.php) to see it in action. You should get a random hyperlinked image. Almost done.
5. Including It In Your Templates
Wherever you want your rotating banner ad to appear, simply include the banner.php file you created. The following code is an example:
<div id="bannerad"> <?php include '/home/USERNAME/www/banner.php' ?> </div>
You can pull a full URL in the include, but it’s much slower and causes considerably more work for the server. Best to include the full site path to your file.
Rebuild and test it out.
If you ran your banner.php on its own and didn’t work, you probably aren’t running php. Sorry, this solution isn’t for you. Probably best to type ‘server side includes’ in Google and try your luck there.
If you ran banner.php on its own and it did work, but it’s not working in your template, you may have called to it incorrectly. If the php code itself is being displayed instead of the image, your server isn’t executing the php, and you need to read about my solution for that on this post.
Not sure what your site path is? Well, MT has a tag for that.
<mt:BlogSitePath /> or you can just look in your Publishing settings… it’s listed there as well.