Photo from Chile

Rotating Banner for BlogCFC - Hack Warning!

Posted At : June 18, 2008 11:15 AM | Posted By : Bob Silverberg
Related Categories: ColdFusion, BlogCFC

So after making my site look pretty, and creating my banner image, I decided that I'd like to create a few images and have them rotate randomly on my blog. The first complication I discovered is that all of the pages are cached by BlogCFC, so simply introducing code into layout.cfm to rotate the image wouldn't work.

Having spent a few hours last night messing with BlogCFC code, I didn't really want to delve into it again to figure out a way around the caching issue, so I came up with a solution that is probably the "hackiest" thing I've done in ages.

I set up a scheduled task in CF that will randomly select one of 5 images that I've created for banner and then copy that image overtop of an image called MyBanner.jpg. MyBanner.jpg is what my img tag points to in layout.cfm. I'm running that task hourly, so now, even though the page stays cached, the image rotates randomly every hour.

Here's the code for RotateBanner.cfm:

view plain print about
1<cfset dir = expandPath("images/") />
2<cfset ImageList = "chile_banner_2,chile_banner_3,chile_banner_5,chile_banner_6,chile_banner_7" />
3<cffile action="copy" source="#dir##ListGetAt(ImageList,RandRange(1,ListLen(ImageList)))#.jpg" destination="#dir#MyBanner.jpg">

I'm not particularly proud of the code, but hey, I got the job done in about 10 minutes.

Comments Comments (4) | Print Print | 3146 Views | Bookmark and Share
TweetBacks
Comments
[Add Comment] [Subscribe to Comments]
You might want to add a JavaScript function that will execute on the client and rotate through an array of banner images. Then no need to worry about BlogCFC caching.

http://www.javascriptworld.com/chap4-7.html
# Posted By Steven Erat | 6/18/08 11:34 AM
hi bob:

i did something similar (was gonna blog it, but you beat me to it) :)

for the image on top of my blog, i specify:
background:#FFFFFF url(../images/randomPhoto.cfm) repeat scroll 0% 0%;

randomPhoto.cfm looks like this:
<cfscript>
   photosArray = arrayNew(1);

   photosArray[1] = "logo_blue_photo.jpg";
   photosArray[2] = "logo_blue_photo_2.jpg";
   photosArray[3] = "logo_blue_photo_3.jpg";
   photosArray[4] = "logo_blue_photo_4.jpg";

   randIdx = randRange(1, arrayLen(photosArray));
</cfscript>

<cfheader name="content-disposition" value="inline; filename=#photosArray[randIdx]#" />
<cfcontent type="image/jpeg" file="#expandPath('#photosArray[randIdx]#')#" reset="no" />

it's a bit more overhead as the calculations are done at runtime, but it's not like anyone reads my blog anyway :D
# Posted By charlie griefer | 6/18/08 11:45 AM
@Steven: Ah yes, JavaScript. Good call. I guess that one looked like a nail to me ;-)

Thanks!
# Posted By Bob Silverberg | 6/18/08 11:49 AM
@Charlie: I like the idea of pointing the img tag at a cfm file, that removes the dependency on a scheduled task, but you're right, it does incur more processing. I think Steven's got us both beat ;-)
# Posted By Bob Silverberg | 6/18/08 11:52 AM
[Add Comment]