Hi folks. I've long been using the rotate.php way of calling for a folder with images to be randomized and print one. Sure there are other ways to do it, but especially for clients to say "any photos you drop in the folder will show up" is easier than showing them how to edit an array.

So anyway, I'm calling the rotate.php as the background for a site for a client I am doing now:

similar to:

body { background: #000000 url('/lrotatingbg/rotate.php') no-repeat top center fixed }

And that works great every time a user might refresh, but my client wants it every time someone clicks on a new page.

I turned off all my caching and cleared the caches (including locally) and it still doesn't work on every click. So I am guesstimating that the .css is getting cached by the browser and therefore not going through a call of the rotate.php?

I stumbled upon this module for WordPress, does drupal have a similar one: http://www.alistercameron.com/2008/09/12/wordpress-plugin-css-cache-buster/

If not, here is a technique I found that might work, how can I do it? http://jasongraphix.com/journal/css-cachebuster/

Thanks for any and all help.

Comments

TrevorG’s picture

Anyone have any idea how I can implement that last part? If I can figure out how to inject that timestamp on the page.tpl.php load, it should force a css refresh, which is no big deal per page (like 5k or so).

Jeff Burnz’s picture

thinking out loud, maybe it will work if you print the body css in page.tpl.php head instead of in the stylesheet?

<style type="text/css">
  body { background: #000000 url('new/path/to/rotate.php') no-repeat top center fixed }
</style>
TrevorG’s picture

Thank you for that suggestion, it seemed like a good idea! In fact I tried that but then it kept doing the same so I tried moving that css code to a new stylesheet, randombg.css and then injecting the code ala
<LINK rel="stylesheet" media="all" type="text/css" href="/ldb/sites/all/themes/nixer/randombg.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

And although it is time stamping it properly, it still is requiring me to refresh. I guess the only way to do this is with javascript.

Jeff Burnz’s picture

Check out this patch/function, I haven't tested this but just looking seems like it would do the job perfectly - http://drupal.org/node/228503

wakeuphate’s picture

Would it not be easier accomplishing this with jquery/javascript somehow? - Then you skip the whole CSS caching part, as you're changing it on the fly..

TrevorG’s picture

Yes it looks like this is the only way to do this effectively. Now if I can find a smart javascript code that doesn't require a coded array, and just loads from a folder...

TrevorG’s picture

So here is the JS I am loading and it works.

<!--
var BGImgAry=new Array('bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg');
function BBG(){
R=Math.floor(Math.random()*10)%BGImgAry.length
BG=document.getElementsByTagName('BODY')[0];
BG.style.backgroundImage="url('/ldb/randombg/"+BGImgAry[R]+"')";
BG.style.backgroundPosition='center';
BG.style.backgroundColor='black';
BG.style.backgroundRepeat='no-repeat';
BG.style.backgroundAttachment='fixed';
}
//-->

The client can be trained to just name their files bg1.jpg, bg2.jpg etc. Thanks for the help guys!