Last month we struck a deal for Detailed Image to sponsor Autopia.org, definitively the largest online community of auto detailers. Clearly our target market for DI – a community that can exponentially increase our foothold in the detailing community. The potential is very large.
In my research I basically found nothing. No examples of anyone with a similar issue. I’ve seen the end result before, but couldn’t find a tutorial to help me or even point me in the right direction. It’s been a few weeks, but I wanted to make sure I came back to this and posted about it because sometime, somewhere, someone will have the exact same problem and hopefully this post will help. I’m sure there are other (possibly better) ways to do this, but the technique below was what I came up with. Since it’s gone live we’ve yet to have any issues.
Step 1 – Create the static portion of the banner
I had George and Mike create a PNG graphic of the portion of the banner that would remain unchanged. You can layer any type of image with PHP, but our product pics are PNGs so I kept uniformity by using only PNGs for this process.
Step 2 – Create a PHP script to overlay Daily Special Image
Now within the document.write function you can write the HTML/CSS for the banner like you normally would. I created a div with a size of 120 x 600 and the background image being the image above. From there I wrote and styled the text using CSS/HTML in the div. I put a link around the div so the entire thing links back to Detailed Image. The end result is the text overlayed on top of the banner.
Step 5 – Set up a Cron Job for the image generation
And finally, the banner on Autopia:
Wohoo – success!