How to do random header image?

[tdem]

Hi everyone. I'm trying to improve my sailing clubs website, and was working on a theme for getsimple.
http://www.tdem.co.nz/nbc/

I tried to implement a random header image using this script here:
http://www.alistapart.com/articles/randomizer/

Now, I've tried setting the background image in the css stylesheet by referencing this script, and by hardcoding an image in the template, with the script as source.

In both cases the random image only works if you refresh the page, and even then only sometimes. On my test wordpress install (default theme)
it does work flawlessly on all browsers, but I can't figure out what is used here to accomplish this.

Does anyone know an alternative way of doing this? (Not javascript please)

Any feedback on the theme itself (which isn't finished yet) also welcome.

Thanks, Thomas

[Connie]

Does anyone know an alternative way of doing this? (Not javascript please)

Well, all of this can be done by Jquery, which is a reputated web technique nowadays.
You can use the i18Ngallery-plugin and include a gallery in your template, all of this is described at the helpful website of the developer

the plugin: http://get-simple.info/extend/plugin/i18n-gallery/160/
the support-thread: http://get-simple.info/forum/topic/1882/i18n-gallery/
the website: http://mvlcek.bplaced.net/get-simple/i18ngallery

incase one of your visitors has no activated JS, these galleries / sliders show a HTML-fallback -version

incase one of your visitors comes with an outdated IE-version, for example IR6, then I would say it is his problem as these old browsers should not be supported anymore nowadays

Cheers, Connie

[Carlos]

Have you tried removing this from style.css:

Code:

#banner {
  ...
}

then inserting it in your template file, like:

Code:

<style>
#banner {
  ...
}
</style>

[tdem]

Thanks for the replies! I've decided to follow Connies advice and use a fancy slider instead. I've installed I18N gallery (great plugin, again!). When I tried to use the code to insert it into the page, it doesn't work! Perhaps you could have a quick look on this page:
http://www.tdem.co.nz/nbc/

Inserting it into a new template works fine, but just below the slider you can see the code I pasted in.

(Should I open a new thread for this?)

Thanks,
Thomas

[Timbow]

Have you tried removing this from style.css:

Code:

#banner {
  ...
}

then inserting it in your template file, like:

Code:

<style>
#banner {
  ...
}
</style>

Thanks, Carlos I have been trying that but it doesn't do it. I really wish I knew the answer to forcing the header image to refresh on each page.

There is some stuff in the wiki about caching and indexing functions in v3.1 onwards. Should I read it more carefully?

[Carlos]

Timbow,
That was a possible solution for tdem's site... Are you doing it the same way in yours? (rotate.php script, #banner ...)

[Timbow]

Timbow,
That was a possible solution for tdem's site... Are you doing it the same way in yours? (rotate.php script, #banner ...)

I am using a script from phpjunkyard called randim.php. I used it here. It varies from browser to browser but at least is different every session:
www.overstowey.com

And today trying your method of partially internal css on a new site which is temporarily in prototype here:
www.coleridgeway.com

On the new site I reconstructed the template to make the image the background to the page content div (which has to be updated every view, no?) instead of the unchanging header div but it still doesn't refresh each time.

[Carlos]

If you force refresh (Ctrl-F5 on PCs) it works.
Hmmm...

[shawn_a]

I have a component that does this for my site. How many images and how are they named?

[tdem]

And today trying your method of partially internal css on a new site which is temporarily in prototype here:
www.coleridgeway.com

Whatever you did works for me, random image every page view. (Opera browser on WindowsXP)

[Timbow]

And today trying your method of partially internal css on a new site which is temporarily in prototype here:
www.coleridgeway.com

Whatever you did works for me, random image every page view. (Opera browser on WindowsXP)

Yes, it is not the same for all browsers

[Timbow]

I have a component that does this for my site. How many images and how are they named?

on overstowey.com I think there are 10 or 12 named 01.jpg 02.jpg..
the other one is incomplete and has only 3or4 images to test, named the same way.

The div background is defined as url(randim.php) and the script selects images from the designated folder at random. Are you saying I should define an inline img link? I don't understand how a component would help, or have you written a script in the component?

In theory it's a nice simple enhancement. I would love to make it work properly.

[shawn_a]

Yeah my script is a little different but you could simply write a component that does this.

Code:

<style>
whatever {
   background-image: url('http://pathtoimage/images/imagename_<?php echo rand(1,100); ?>.jpg');
}
</style>

your images would have to be named something with a sequential number range in it.
Or you would have to read the images folder and load the filenames into an array then randomly select an array index based on the length.

using a script as the css background sounds like a good , idea, butit has to send the proper headers or redirect to the image file, and usually you have to deal with paths and having executing code in your uploads folder.

[Timbow]

It's that simple? 'struth I must get out my 'Teach Yourself PHP' manual and learn to do these things for myself.

Thanks Shawn, I will try it out.

[shawn_a]

yeah

PHP Code:

<?php
echo rand(1,100); # echoes a random integer between 1 and 100;
?>

[Timbow]

PHP Code:

<?php
echo rand(1,100); # echoes a random integer between 1 and 100;
?>

I gathered that. So I have to alter the range according to how many images I have, I must put it in the template not the css because it's a php file, and it works a treat, but only as a one off because it only works with a full http://... type url. I can't use relative urls or add it to a theme.

That's great. I am bit by bit going through a beginners course here:
http://www.homeandlearn.co.uk/php/php.html
But it will be a while before I get the hang of it.

I am wanting a solution for random header images in templates. I am going to take a second look at the Random Content Plugin I think.

[shawn_a]

Thats why I put it in style tags, in your template or a component.

And you can use any url you want.
$SITEURL should be global.