If you could choose between a static home page or a dynamic one, which would you take?
Dynamic every time…but wait, doesn’t that require work to pull off?
Not if you use my incredibly simple random header image solution! Oh, and you could use this for more than just header images; I just figure that most folks will want to rotate their headers, since they tend to be the most dominant visual elements.
Are you ready to go random? Let’s do it!
1. Prepare Your Header Files
For the purposes of this example, we’re going to use 5 different images to pull off our random header effect. It’s important that these images be the same size — this will keep your image declarations consistent and W3C-valid. So, grab the five header images of your choice, and name them according to the following convention:
header_1.jpgheader_2.jpgheader_3.jpgheader_4.jpgheader_5.jpg
One thing worth noting here is the fact that all of your images should have the same file extensions. If you’re using .gif files, then make sure that each header image has the .gif extension. Photographs will look infinitely better if saved as .jpg, though, so that’s why I’ve chosen that extension here.
Upload the images to your desired directory on your server. If you’re using WordPress, I’d suggest uploading the images to the images folder within your active theme directory. Once your images are on the server, it’s time to install the random header code.
2. Code It Up!
Because I hate to limit my examples to any particular type of CMS software, I have chosen to do a bare-bones illustration here. Since implementing random header images across different platforms is a straightforward task, I’ll leave that to you.
One thing that you do need to be aware of, though, is the fact that your page must be compiled as PHP, which means that your Web page cannot just be a regular old HTML (the page should end with the extension .php 1). But, if you’re running WordPress, you have nothing to worry about because WordPress compiles pages as PHP by default.
If you are using WordPress, then the Thesis Theme will save you some time here, and you won’t have to deal with any code at all! By default, the Thesis multimedia box will randomly rotate images that you place in your /rotator folder, thus making this an utterly brainless process.
If you’re using a different WordPress theme or another PHP-based CMS, here’s the random header image code you’ll need to get started:
<img src="http://path_to_images/header_.jpg" width="image_width" height="image_height" alt="image_alt_text" />
All the magic happens in this bit of PHP:
<?php echo(rand(1,5)); ?>
That little snippet of code produces — and then echoes, or prints — a random number between 1 and 5. Therefore, the header image references become header_1, header_2, and so on.
What, you were expecting it to be more complicated? Sorry!
Oh, and if you experience any problems implementing this, please let me know in the comments.
1 WordPress pages are still compiled in PHP, but by default, they do not end with the .php extension. I realize this is confusing, but this is the hand I’ve been dealt. ↩
210 comments… read them below or add one
Great post! I like how this technique works hand in glove with the Cutline theme. It’s almost like you planned it that way.
Nice snippet of code… I have it in action here…
Charlie: Hmmmm :)
Jonathan: Looking great! Hey, one thing, though — the Cutline theme was released under a Creative Commons Share-Alike 2.5 License, which means that you must retain the attribution links that were included in the footer.
It’s all I ask for a piece of free, continually updated goodness!
no problem chris… and thanks for your great work!
Hey, anytime…I can’t seem to get enough of this stuff!
Utilizing a server side script for random images can be useful if you actually want to test response/reaction. However, for high volume sites, you’re actually increasing the load and response time of your server. This can be done in JavaScript as well, resulting in quicker load times and less server resources. However, you won’t easily track behavior based on the image that way.
You can get many samples on Google: http://www.google.com/search?q=javascript+random+image
I use a full PHP script for random images and then I include that in my page. It’s more complicated than this method, but it gives me more control. For example I can easily include the ALT tags, include individual links to each image, etc.
http://chris.comitar.com/blog/downloads/picture.phps
Of course, I like your approach, if for no other reason than because I’m all about control.
However, I couldn’t have pulled off the simple angle with that one — arrays are where I draw the line! :)
THANK YOU! I was just wishing that I could do this, b/c I am photoshoping some new headers and wanted to randomize them. Chris, my WP blog using Cutline is still freezing up a lot. Any ideas?
It says this at the top all the time now:
Warning: call_user_func_array() [function.call-user-func-array]: First argumented is expected to be a valid callback, ‘widget_translate_noframes’ was given in /home/songsblo/public_html/wp-includes/functions.php on line 1279
http://www.songsblog.com
Does the code go in the Header file?
Lawton: Try disabling widgets and see if that doesn’t solve your problem with the error text at the top.
Also, yes, the code goes inside your
header.phpfile. For a specific look at how this will appear, check out how to add random header images to Cutline.Sorry. Which one is the widget? It’s not the plugins right?
The widget is, in fact, the plugin.
Thanks buddy. PS-
Tubetorial is the Cat’s Meow.
I’m personally not a fan of random header images. [To me] They’re amateurish and just extra and unnecessary glitter. People probably don’t come to your website to see your five “really cool” header images. They come for the content, first of all. And a static, thoughtful design is always best in my opinion.
Leila,
I really don’t expect people to spend 0.5 seconds looking at — or caring about — my header images, but that’s not really the point.
Even the most subtle changes on a Web site can convey thoughts of “new” and “what’d I miss,” and I think that’s the real value that comes from adding a random element to any page.
And to be perfectly honest, I only added random header images on this site because I just wanted to get a different look without actually having to change the images manually!
If done tastefully, I don’t see the problem having random header images. It’s not about glitter or wow factor, but having a fresh face for a user to see, without the clutter. I agree with Chris’ response.
What can be annoying IMO is changing blog themes daily or weekly or (insert annoying timeframe) that some friends of mine do.
I haven’t fully read your post – but is the method you are teaching any better/different than the script I used for the 120 images that randomly appear in the header of the ‘Apex SA/NT’ site I created a few years ago?
http://www.sant.apex.org.au
I welcome any other suggestions/modifications.
Stephen: I think Doug’s comment answers/rebuts your question better than I could.
Does this work for Blogger?
Matrianklw: I don’t know how Blogger’s pages are composed. For instance, are they bare
html, are theyphp, are they PERL?I dunno! The only way this would work (as described) is if Blogger was based on a PHP framework.
Outstanding. Once again, you give great design insight. And don’t get me started about how much I like Cutline as a theme.
Clever, very clever. The first designer I meet, who plays with PHP as easy as with Photoshop. ;)
Random header image is a brilliant design with php drive. I should collect applications like this to better serve my clients.
Hi Chris.
I have being looking for a site where it explains how in a simple way one can change the images on the header whether dynamically (that was my first wish) or as you have it here rotating the image by refreshing the page.
I’ll settle for that for the time being. I’m a newbie and all my stuff is self-taught. I have been playing with the coding that you have illustrated on this page for rotating images. Great so far!
I copied your code to a test page that I uploaded to my server with 5 header image, the mechanics of the coding works because every time you refresh you can see that the coding for the images changes.
But where are the images.
I have obviously failed in writing the proper coding for my particular site.
Can you lend a hand or better still could you explain to me in Dummy terms how I can get this working.
Sincerely thanking you for the opportunity to get it right.
Your eternal fan
Basil
Sorry Chaps forgot to ADD coding I used.
bentleyproperties
It seems that the coding does not show up on your page. If you go to:
http://www.bentleyproperties.com.es/test.php
Basil,
In my example from the post, I used a representative file path instead of an actual one. This path:
<img src="http://images_folder_path/header_<?php echo(rand(1,5)); ?>.jpg” ... />doesn’t really exist. You are supposed to substitute
images_folder_pathwith the directory where your images are stored on your server.Cool?
Sorry wrong test page
http://www.bentleyproperties.com.es/testX.php
Basil
Thanks Chris I did that, you can see from the coding.
Basil, your quotation marks are not being properly encoded by the server, resulting in “?” outputs. This has rendered your image reference useless. Once the code comes out right, you’ll be fine.
Trust me, the random header image code works like a champ.
Hi Chris,
I have corrected the quotation marks but Im getting a parse error, unexpected ‘.jpg” width=”image_width” height=”image_height” alt=”image_alt_text” />
Do you see anything wrong here?
.jpg” width=”image_width” height=”image_height” alt=”image_alt_text” />
Fro. my browser here it looks like you don’t get all the coding
.jpg”
Chris – first off, I really appreciate your work. Great stuff.
As you can see, I use your PressRow theme and love it.
Questions: (sorry, but not all will pertain to this post)
1) will the rotating image code above work for PressRow?
2) I have several different people writing on my blog – is there anyway to put the author name under the headline?
3) Lastly, is there anyway to make the homepage “longer”?
THANKS a lot for your time – i look forward to hearing from you.
Punter
Punter,
Questions will be answered in the order they were received :)
<img ... >tags to display the images.<h4>tags in the following template files:archive.phpindex.phpsearch.phpsingle.phpindex.phpfile for the theme, so if you download it again and overwrite yourindex.phpfile, the length of your home page will be determined by your WP Options panel (which can be as big or small as you like).If my image files header_1 to header_5 are in my image folder on the server and the path to your coding is
.jpg” width=” image_width” height=” image_height alt=” image_alt_text” />
Your coding with my path.
Why shouldn’t this work,
Basil
why is it it your page never copies the full coding whats missing is the path.
img src=”http://www.bentleyproperties.com.es/images/header_……………………..
Basil, I’m beginning to think that PHP is not installed in your server. If that were the case, then this definitely wouldn’t work for you.
If you want to see an awesome use of random header images, check out a blog called January One.
Thank you!
Hey Chris -
I love what you are doing with random header images …
I noticed your newest one is of this years
West Virginia vs. Louisville football game …
one of the others is from last years slug fest.
Just curious -
Do you have connections to either school ?
Keep up the good work …
You are the best read around. Thanks again.
Mountaineer,
I live in Louisville and have been a fan my entire life. As proof, I’ll point you to a post on one of my not-so-top-secret sites, the Deuce.
I was so distraught over the Rutgers loss that I figured my story (which is really the story of every life-long fan here in Louisville) just had to be told.
I believe that our story, which has likely been shared by fans of a handful of schools over the last thirty years, is one that is not often publicized. Despite that, I truly believe that it reveals the most poignant aspects of being a fan.
It’s the underdog story, except Cinderella is nowhere to be found.
Do you know if this will work in Movable Type? I’m new to MT and am not sure if their pages are compiled in PHP.
Hi,
can someone tell me if I can get this thing works with “orange themer” by porter?
usually I have to add banner in css like that:
.topb .banner {
float: left;
width: 700px;
height: 210px;
background: #fff url (‘/images/picture.jpg’) no-repeat bottom left;
but now I can’t implent this piece of code anywhere, tried few combination but still no results. Can someone help in in more n00b way, I really want to insert random head pictures on my future website..
Greetings.
Someone,
I don’t know anything about that theme, but may I suggest giving the Cutline Theme for WordPress a try? It’s got more bells and whistles than you can shake a stick at, and I think you’ll find it easier to mod to your specifications, too.
in fact my theme in irreplacable at the momment, but I terribly want to include random header. :/ Well ok, if someone else might know the solution, I’d be really grateful.
link to that “orange theme” is right here: http://www.themeporter.com/2006/10/06/orange-design-wordpress-theme/
Cheers, Someone
i’ve made it by myself. thanks for ya reply anyway.
Can Someone tell me how he made it work a random background image in CSS. I know so far, that is should be possible to use a php snipplet in css such as:
random.php:
style.css: … background: url(random.php) …
but it does NOT expand my php (I use it in Wordpress).
Please help! Thx!
Klaus,
When I first developed Pearsonified version 3, I was using CSS to control the rotating header images. In order to accomplish this, I actually had to create unique
divelements for each different image that I wanted to use.I started by establishing a naming convention for my header
divelements—banner_1,banner_2,banner_3, and so on. Next, I declared different background images for eachbannerelement within my stylesheet.At this point, achieving randomization is relatively simple, as I only needed to call the appropriate
banner divfrom within the XHTML markup. My code looked something like this:<div id="banner_<?php echo(rand(1,8)); ?>">The above code structure will randomly call on one of your
divelements that is pre-defined in your stylesheet.Personally, I grew tired of this method because of the additional work required when adding another image to the random rotation. On top of that, I think using an
imgtag with bothaltandtitleattributes is simply better from an accessibility standpoint.hi Chris, I like your solution but my image is called from the CSS. Any idea about how can I manage to have random images using CSS?
Thanks
Luca,
Read the comment directly above yours.
Hello,
I’m using Cutline theme. Need to get more than 5 images with Random Header, what should I change in the coding?
Thanks for your reply.
Robert — In your
header.phpfile, you’ll notice a line of code that contains this:echo(rand(1,5))That snippet of code outputs a number between 1 and 5; or to put it another way, that bit of code rotates five random header images. If you’d like to increase the number of images, simply change the 5 to whatever value you like. If you have 8 images, then make it 8.
Just pushed this up tonight. What an excellent tool.
Thanks!
Very simple decision. But if pictures greater each time long loads. I have refused.
:( i tried lots of times and i couldn´t…. I think i have to learn something else :(
chris-
do you know anywhere/anyone who has a print.css file for your lovely Pressrow?
i’m trying to hack away at one, but it sucks.
bad.
let me know!
-Brad
Hey Chris,
First, many thanks to you for having the XHTML Sitemap. I struggled, unsuccessfully, many times with the Google XML Sitemap plugin. It’s a good feeling when you can follow directions and things work.
However, that’s not always the case, is it… I am attempted to add the random image code in. But it totally F’d my WP :D. The first, possible problem, is that I don’t know where in the header to place it. I successfully could add text and a sample header image (so I know something can be put in the right spot) below my header (with all the links, et al) but when I paste in the code, I think the php bit does something bad. I have currently taken it off, but I’ve created a sort of progression in images–here.
I don’t know if that will help at all. Any thoughts would be appreciated. Thanks.
Chris,
Nice work. I am new to blogging and Wordpress…I like your random header images idea and would like to use it on another theme. Does your code only work with Cutline? If not, what do I need to do to get it to work in my theme?
Thanks, Dean
Hello, questions…
I have a wordpress blog, and am using Cutline. I see tons of cool features, modifications, etc… that people implement, like on your site.. or on that of Jonathan…
For example, random headers, putting an RSS site feed button on the main page…where Front Page, About, etc…can go, or placing the Front Page, etc…text, above the header.
Can I do this? What am I missing? I dont understand, nor am aware of what I need to do in order to be able to do this stuff. Is it a question of manipulating the CSS style sheet?
Thanks for everything..
Tomás
@Doug – You can do this in MT using JavaScript. Check out the source of my site… This is an alternative to php, cgi etc and works cross-browser. You just need to create the headers and then edit your templates.
Hey!
Great tutorial! I am pretty new at this, and would like to spice up the site…I have followed your directions and saved all my pic files as directed…where do i paste the random header code, though? (I use wordpress).
I know this is a fairly elementary question, but i would really appreciate your help!
Thanks so much!!!
J — Because your blog is on the hosted version of WordPress at WordPress.com, I don’t think you have the ability to add the necessary code to the
header.phpfile.Despite that, I’m pretty sure that there is a “Cutline Options” tab in the Presentation section of your WordPress dashboard, and I think there may be a random header image option on that.
Thanks for the great article. I’m having a little trouble though. My banner image info is embedded in a bunch of “div” tags that refer back to a section of the css sheet. I’m fairly new to this, so I can’t figure it out. I’m using the bluedark theme for wordpress. Any suggestions?
I have a question. I’m sort of figuring this out blindly since all this is new to me. However, I have a blog with Livejournal and in my CSS, where the header image goes, I have the link to my rotate.php file on my own server. I thought this would work, it was temporarily working with a different script I was using, but it stopped randomly choosing images so I wanted to try this one. My questions (sorry for the longwinded-ness) is, the images aren’t pulling up on my livejournal. In theory, it should be working, yes? Or is my problem that the coding is specifically for Wordpress blogs? I can provide my CSS code and the .PHP code if it helps. Thanks in advance.
Maybe you can help somehow Im missing something – followed the tutorial and am using the copyblogger theme and cannot get my random header to function. I inserted the code as follows in the header.php file as follows,
.jpg” width=”840” height=”187” alt=”image_alt_text” />
” title=”">
Anyone please help
Thanks in advance!!!
Maybe you can help somehow Im missing something – followed the tutorial and am using the copyblogger theme and cannot get my random header to function. I inserted the code as follows in the header.php file as follows,
.jpg” width=”840” height=”187” alt=”image_alt_text” />
” title=”">
Anyone please help
Thanks in advance!!!
Chris, what an easy-to-use and streamlined way to do this! I just implemented this where I would have used many many lines of Javascript to do the same this. Thank you for the great tip!
This is my code… what am I doing wrong?
my div elements are labeled ‘logo1′, etc.
how do i post my code here… last post eliminated it?
Hi Chris,
Do you have a bit more code for the CSS random image? -> (Chris P. at 10:15 am on Dec 21, 2006 )
Can’t seem to wrap my mind around it on how to do this with CSS.
Is possible use a code for blogspot header?
http://passionpc.blogspot.com/
passion — As far as I know, you cannot insert enough code into a Blogspot template in order to pull off the rotating PHP script.
I’ve never actually worked with Blogspot, though, so I’m definitely not 100% sure.
Magic! I’ve just adapted this for the CSS of a simple website based on OpenRealty, and it works perfectly. Concise yet effective code – thank you!
before i shoot myself for being so incredibly dense – WHERE OH WHERE is the active theme directory that i would upload my header pics into. i can NOT friggin find it and i feel like a total LOSER…
heeeeelp? please???
Whats the default header image sizes for Cutline? Anyone?
Thank for putting this out to the world. :D
I really was expecting more then one echo statement :D
thank you, it works great on my blog
Chris, thanks a lot for the great randomizer header code. It adds a lot to the site! By the way I noticed something odd when I first uploaded it into Cutline theme. I didn’t touch the header code but it shrank all my headers to 770 pixels wide. Kind of odd. I simply did a find/replace in the header code and switched anything that said 770 to 970 (like what you had originally written into Cutline) and this seemed to fix the problem fine. It’s just odd that I’m the only person reporting this. Anyhow everything seems to be working great. Thanks again.
Matt
Matt — The original header images were 770 pixels wide. You are probably using an unofficial 3-column modification of the Cutline theme, which is likely why you needed your images to be 970px wide.
Of course, this is also likely why no one else has reported that as a problem :)
Hi Chris,
Thanks for this nice piece code. Is there any way to automate the random display of images instead of relying on refreshing only?
Chris, brilliant, many thanks!
Is there a way of having the home page with a static header and other pages with random headers?
Hope you can help….
Hi guys,
Is there a specifiek place where you have to put the code in the header, because i doesnt seem to work.
Thx in advance
Tommy — I think that’s something that can be achieved with JavaScript, but I’m not well-versed in that area, so I can’t help you there.
Boswell — You can use the built-in WordPress function is_home() to see if the current page is the home page, and then you can serve a particular image if that condition is true.
If is_home() evaluates to false, then serve the random header image code.
Mike — The code must be between your <body> tags in order to work.
Hey Chris,
I just registered and created my first personal website yesterday using your Cutline theme. The random headers was a bonus that I discovered when I installed it. Very cool.
The issues I’m having are that I’m consistently getting the same image on pages 1 & 2 (archives & about). Random doesn’t mean always different, but that doesn’t seem random either. :)
Secondly, how can I extend the number of headers beyond 5? I have 7 to put in rotation, which could grow, but lack the css knowledge.
Thanks!
Jeremy — Although I no longer oversee Cutline development and am not the architect of the 3-column interpretation of the theme, I believe your problem is that default installations do not include the random header image code. You need to download and install the script from the Cutline site itself in order to get the image randomization working.
For more information on how the image randomizer works, you can check out my latest post on the topic over at the Neoclassical Theme demo site.
If you still experience problems, I suggest switching to the Neoclassical Theme altogether—it’s newer, nicer, and more robust than Cutline.
Hi Chris,
How can i assign urls to the images as to make them clickable? I would like to use the images as “banners” to direct visitors to other websites but I am not sure what to add to the code.
I appreciate your help.
Thanks.
Charles — Unless you link all the images to the same place, you can’t accomplish this with the default theme setup. Originally, I considered a different PHP script to handle the rotating images, but I decided that explaining how it worked would be too complicated for the average user (who I target when I create base versions of themes).
Despite this, one of the many items on my to-do list is to create a separate, downloadable image rotator script that can handle different hyperlinks like you’ve described. Unfortunately, I have no idea about the ETA just yet, simply because I’ve got so much other stuff going on.
Hi I have been trying to add a random image generator to my site for weeks. I do not know very much about web coding and its still not working? I would really appreciate it if you had any tips?
Kindest regards – Jen
Jen — The random image rotator is not working on your site because it is written in PHP, and your site is being served in plain old HTML.
In order for the rotator to work properly, you’ll need PHP installed on your server (which it likely already is). In addition, your Web page files will need to have
.phpextensions (as opposed to.html), as this will alert the server to the fact that the page needs to be compiled in PHP before being served to your site’s visitors.Hi Chris
Thanks for the tip!
We just implemented this technique on our ASP.NET server.
Jason
Hey Chris,
When I get ready to use my on jpg for images on Cutline, what’s the best method to assure they’re sized properly. I’m assuming I upload images at proper pixel width and height already? What’s the best application for doing this on a mac? Thanks
Thanks Chris, my server did not support php!. I have managed to resolve the problem now – thanks very much for your help.
I have bookmarked your site & will recommend to friends – its a great resource. :)
i loved the would be simplicity of your code, except that im a blogger.com user and for the love of my life i couldnt find a file hosting service that provides the same initial url for all the files. hence i used this code instead.
chris j — You definitely want to have your images sized properly before uploading them to your server. Personally, I use Photoshop to accomplish this, but you can just as easily use GIMP, which is free.
Chris P.
Thanks for the Gimp link
never used an x11 application before. cool.
Hey Chris, how’s it going. I’m having the damndest time trying to get a background image to display on the footer, using your cutline theme. It’s a pjt I am working on for a friend, I’m trying to sell him on the idea of switching his website to WP. Anyways. Ive copied and pasted some of the other image elements from the theme in a mad attempt to get a background image to display in the footer, so the text will sit on top of the image in the footer. I am just not entirely sure how to code it in the footer stlyes section. And Do I need to add something to the footer php?
any bone you throw my way would help
Thanks shane
Hey Chris, I think this feature is banging.
BUT. As stupid as this may sound, and I probably should’ve gotten this by now, but where do I put the code? In the ‘Edit CSS’ section? And do I use the zip file you had ready?
Thanks in advance
I think I got it. But if I am right putting the codes on the ‘Edit CSS’ section, is it true I have to pay WP for it to work?
Hi
Having some problems getting started…
1. how do i enter info into the “about” section of my blog?
2. under header.php, where exactly do I insert the code to go random?
3. also my images are in place and are sized at w 576 and h 200 so i need to change that in the code as well.
Thanks
I must admit, I much prefer to use Flash rather use animated GIF’s ; )
Also, I don’t know why one would say that .jpg files are better than .gif files for this? Jpegs are a “lossy” compression but GIF’s can be exported in 100% quality.
If you don’t mind others playing with your bitmaps (although you can flatten the layers to one file).
PNG’s are what I’d use as you have so much more control over the images, not to mention you can use a transparent canvas to blend images to any background, which always looks kinda neat, although some files can get quite large which can slow page loading times!
Hi Chris, love your Cutline.
Is it possible to add more header image files, without having to fiddle the 1, 5 code everytime?
Or can I change the 5 to 100, even though I don’t have 100 header images?
Thanks.
Hey Chris P. please insert in post above my php code link for WP themes header.php.TNX
Is there anyway to not have the same image load twice? I’d like all of the images to be seen once before it starts again.
Tried this randomizer and it works brilliantly however in Firefox only
Cant get it to work in Windows.
Maybe I missed something in the comments section
It’s really good idea. Anyway, I’m not using Wordpress currently, so I have to look for the other script language on this idea.
Holy snap I used to have similar code on my old website! I’ve been looking for the code for at least two years now on how to do the random images — thanks a ton! I’m brushing up on my web design stuff and teaching myself some php to get back into my old coding stuff; this is immensely helpful! (you might have just bought a dinner for a starving college student)
Is possible insert random image, removing the following line in css:
#header {background:#DADADA url(‘../images/header_home.jpg’) no-repeat 10px 10px; padding:10px; height:200px; }
and using php?
i have made a logo for my site and save it as a jpeg image but den i wan put it on the header of my site. i cant understand anything u wrote properly.m jus beginner . can u plz tell me in detail how to move about plz ???
Hello there
Amatuer week sorry
This is the code in the theme I am using
background:url(images/header.jpg) no-repeat center;
Di I replace all of this with your code – or di I have to do some tweaking?
I am in a similiar situation as above. The code with in the stylesheet for the current header image is:
#splash{float:center;width:800px;background:url(images/splash.gif)
I have tried all sorts of combos to get your random generator to work with no luck.
I am using wordpress 2.5 and the this theme:
http://themes.wordpress.net/columns/2-columns/4259/blue-box-01/
any ideas?
Hi,
I love the rotating headers but can’t get them to work! I’ve cropped 12 different headers and uploaded them to my neoclassical-images folder, naming them header_1.jpg etcetera up to _12. I’ve then gone to the rotating_images.php file and changed this code:
$random_image = rand(1,12); // the second number should equal the total number of images that you want to rotate
… and, as you can see, put 12 in the code for the number of images. However, they’re not appearing – I get the stock photos rotating occasionally, and in between just blank frames, sometimes with image_alt_text on the bottom. What am I doing wrong??
Incidentally, the URL under which I’m tweaking my new look is http://newsite.aldasigmunds.com. Grateful for any help!
Never mind – I found the answer. I was uploading to _images rather than _headers. Problem solved!
I love this but I don’t know which page to put the code into. When I check the header.php page there is nothing there that looks even close to the code. I don’t want to delete something or mess up some codes.
Could you help me? I have the bamboo-10 theme that I’m working on. The link is http://www.californiatrails.org
Hello Chris,
I love your template – zen is good :-)
Loved the idea of rotating headers – i created 7 but the code you are saying that people should change – that code is not the same that is in my header.php Do i just replace it with the code you list above?
Here is my site http://voidAGE.com Its a web based proxy site
Thank you again for this template
Hi -
I’m using your random header image in a wordpress site. It works great in Firefox, but in IE I do not see my images. Do you know why?
Here is a link.
Barb — I’ve spotted an errant “2” in your HTML inside the
#headimgdiv. Try removing that, and see if it doesn’t solve your visibility issues in IE.I got it. Thanks Chris P!
Quick Question… I Cant figure out the discrepancy between IE and Firefox with this awesome script of yours. Works fine in Firefox, but doesnt work in IE7. Take a look at my link above.
Any suggestions whats the problem here?
Oh, and I forgot to add… I tried to look at what you said was the cause of Barb’s problem, but I’m still a bit of an html/php newbie. Furthermore, I’m not using this script for a header, but rather just an image titled “main_#.jpg” thats on the main page.
Again… any help would be appreciated because I don’t have the web dev know-how to figure out the problem.
Hi Charlie,
Fill in the width, height and alt tags with actual values. I did not put actual values and that caused it not to work in IE.
Change it to:
Barb
Thank you so much Barb!!!
You make it sound so simple. Unfortunately I am still at a loss.
Where would I place that code?
Header (header.php) or
header_with_text.php
And how would be able to get the text to show as well?? Without messing up the header??
Clueless as to how to even go about it
hola. Great themes. Just one rookie question… umm Exactly where should I paste the Random Images Code in the theme editor?
thanks!
Wendy — Your theme is obviously a little different, and because I’m not familiar with it, I can’t say for sure. I’m going to assume that you would add the necessary code to your
header.phpfile, but I am not certain that this is correct in your case.riverrun — Although themes differ widely in how they handle this sort of thing, you should be able to place the code in your
header.phpfile in order to get the results you want.Figured it out already thanks Used the cutline to edit some images below the header and works like a charm
Thanks though for staying in touch and letting me know
Appreciated muchly
Hi Chris,
Rotating Header Image is great, I have yet install & try it.
However, it will be even great and benefit all bloggers, if we could link the header to any respective ads…. or if you have done it, please advice or any blogger read this, please do email me at brianATbriananan.com
Tks, Brian
http://briananan.com
that was so easy thanks for that.
how do i change the title text that shows the name and description of blog?
hi i wanted to randomise images, but attatch each image with a different weblink. Basically, I am trying to randomise my ads on the page and would liek to know how to do so.
Thanks.
Left a message earlier, got no resolution.
My site works in Firefox not in IE have tried to figure it out from your commentary to no avail, I use theme Bluebox and put the randomizer code in header.php
As they say in German Hilfe!!!
thanks so much for the code + directions, but i just can’t seem to make the images show.
i’m sure i’m doing some dingy thing- would you mind taking a peek?
http://www.cameragirl.com/sample.php
thanks!
This works like a charm!
Thanks a lot!! :)
I’m going to put this on my site ASAP.
Thanks
J.R.
For those who are wondering if it can be used on Blogger.com, the answer is no. It is not allowed to insert PHP code on Blogger. I think it should be allowed.
I would say to you to create a Wordpress blog because they allow PHP code, but as they charge you if you want change the CSS code… I really wouldn’t advise you to use their services.
I got another post regarding this. It can be used to add image header to any wordpress theme. You won’t regret reading it.
Hi Chris,
We entered the random header images in our site, and it works!!!…Sorta. It doesn’t rotate when I press reload, but it does change if I check on another browser. Sooo the images are static for one session, but it rotates on different browsers and different sessions. I hope that makes sense. Any help would be appreciated. Thank you.
Correction. I think it changes if you reload after laying dormant for awhile. But it’s not instant like we’d like it.
Hi Cas — Do you have a link you can share so we can take a look at the code?
The link is http://www.steelcloset.com .
I came here today to THANK you, n tell you that ur design has givn a new lease of life to my blog (and with the way it looks on the page n the attn it gets, to my writing too ;) :)
is there a way to remove the black bar on the top of each image? i tried tweaking the code and the css sheet but didn’t seem to change anything.
Great work!
The great solution is just what I’m looking for, but I tried several times and failed T.T
I am using WP2.5.1 and GenkiTheme fixed version.
I replaced the following code in style sheet
url(images/header.jpg);
with
url(images/header_.jpg);
Then the header won’t show up…
I wonder what I’ve got wrong there…Thanks a lot.
Correction:
I replaced the following code in style sheet
url(images/header.jpg);
with
url(images/header_.jpg);
I give it up…the random code was replaced automatically… Sorry
Does anyone know how to use this code when editing a tumblr blog? I have the photos saved in photobucket, but throwing in the randomizing code results in a stock image saying the picture has been moved or deleted.
Can anyone post what changes need to be made to use the randomizer on tumblr? Thanks!
Great tip, been looking for an easy way to do this.
I used the bloginfo structure to avoid having the path to the images hardcoded. My code now looks like this (with the latest cutline 3 column theme)
<img src=”/images/header_.jpg”
width=”970″ height=”140″ alt=”" />
Marcelo
Just wanted to say this is so simple and it works like a charm. I like this better than using a plugin. Very nice work and thank you, keep it up.
Awesome! You guys rock!
Question: what if the image source is not in a php file, rather it is in the style.css file? will this code still work? I tried, but no go. The original code looks like:
#header {
background: url(img/top.jpg) #FFFFFF no-repeat bottom;
border: #FFCC99 0px solid;
height: 183px;
margin: 0 auto;
padding: 0;
width: 760px;
I updated it with:
#header {
background: url(img/top.jpg”) #FFFFFF no-repeat bottom;
border: #FFCC99 0px solid;
height: 183px;
margin: 0 auto;
padding: 0;
width: 760px;
any help would be appreciated! Thanks!
Great advice – I’ve got it working on this site (not on the index, but on all the other pages). Brilliant and simple, thanks!
Hey hi… please can anyone help me on how to get the logo of my website on the header.
This is my blog on WP. What i want to do is put my logo on the left of the title. Can anyone help me out?
Hi -
I’ve used this twice now and love it!! My question is — is there a way to set a timing value so that the image changes automatically every so many seconds?
Thanks,
Barb
I’m using the default headers of Pressrow but im looking for alternatives. Its hard to find headers with the exact size Pressrow needs to look good.
thanks so much, very simple and very useful
thank you for this tutorial, it’s pretty much what i’ve been looking for, HOWEVER do you think that yuo could spice it up ang make it, not random, but date specific, as in on 01.01.2009 one image on 02.01.2009 another image and so on?
WHERE DO WE ADD THIS CODE AT???
Hi Chris, I just installed the Press Row theme on my blog (dubdew.com) and I love it! Thanks so much.
Regarding the random header script, I understand that Press Row uses background images in CSS, which makes it more complicated to implement the random header images. And while I read through the gazillion earlier comments before mine and your very detailed replies, I’m afraid I still don’t really get what to do! (I think you were explaining it to Klaus – Dec 21, 2006.) I would be SO grateful if you could email me on the provided address to lend a hand. I’ve also got a couple of other questions regarding how to make a couple of minor tweaks to the Press Row theme (generally revolving around the header though), so I’d really appreciate your help.
Thanks so much in advance!
w.
thanks, this is what i’m looking for :)
Its really an awesome post. i had been looking for this kind of tutorial from some days and finally got around it. Hats off for you buddy.
Who would have guessed that such trivial details would lead to such great benefit. I guess it’s always the small things that count.
Hi Chris, I am havig a bit of trouble with implementing this awesomeness. I used Sugarrae’s tutorial to figure out how to add custom images to my Thesis site (http://www.sugarrae.com/thesis-hooks-dummies-tutorial/#change-header) but when I put in the
I get alt text. I have this piece of code in my custom_functions.php file.
/* Custom Header Image */
function add_header_image () {
echo “
<img src=\”http://sonicpeanut.com/tester/wp-content/themes/thesis/custom/images/header_.jpg\” alt=\”Your Blog Title\” height=\”215\” width=\”940\” style=\”border:0px\” />
“;
}
add_action(‘thesis_hook_after_title’, ‘add_header_image’);
My files are named header_1 – header _7 and they are in that images folder. When I take out the randomizer code it has no problem showing a static image. What am I missing? I feel like its something simple. Thanks for your help!
aw man, for some reason my code didn’t show up right. I dont know how to make code show up in these comments things. Not that the “echo rand” thing is in the place it should be like you described.
Hi, The Random Images code is Amazing
I did the random in my web page
But just work in Firefox and doesnt work in Explorer do you have any idea why?
Thanks for your help
Hi Francisco
Did you check this from the 5/4/2008 post above?
Fill in the width, height and alt tags with actual values. I did not put actual values and that caused it not to work in IE.
Barb.
Thanks for your help, I have tried with a lot of codes but this is actually the most simple and best of all.
how can i use this code on thesis?
Where do I put it?
What in the code needs to be changed for my particular pics?
Hi! I’ve been looking for a way to randomize a graphic on my header, but can’t seem to make this work! (I’m kinda new.) The image I’m trying to randomize is caption.png in the following bit of code:
.logo h2{
float:left;text-indent:-100000px;background:url(images/caption.png) no-repeat left top;width:327px;height:94px;margin:10px 0 0 0px;
}
I’ve tried combining this with your code in various ways with no success! Which part of your code should I paste over which part of my code? I’m fairly certain that I’ve got the paths and my random images set up correctly.
Thanks!
two or three
a) is there a limit to the number of headers that you can rotate with this code i.e. I’m thinking of doing 100
b) is there a way to modify the code so that the header will change if you click on it rather than having to refresh the page?
c) are there any special concerns I should be aware of if trying to have so many rotating headers? (i.e. I have no basically zero website experience or expertise so don’t know if I might be running into a huge problem with this objective)
I can’t do it. I do not have any *.php, all I have is a custom header option and no place to copy and paste this code. Any help?
I just can select one image and when I go to customize css then I’m asked to buy something… is that what I need?
Fernando -
It looks like you are trying to implement this on wordpress.com. Is that correct? I have not used Wordpress.com and from the little reading I have done on their site I’m not convinced you could add this code to their templates. I would suggest that you post something on the forums at wordpress.com and give them a link to this page and see if they can tell you where you need to go to add this code.
HTH,
Barb
Thank you Barb, thank you so very much. I feel a bit embarrased. Thank you again.
No problem Fernando. If install Wordpress on your own private hosting account you can make any modification you want to Wordpress (including this one). If you use Wordpress.com you are limited by their rules.
Can I use this simple header method and use the galleria plug-in? I’m using the f8 lite wordpress theme and want to use galleria. However, I really want a rotating header (even if it only changes when the page is refreshed).
Thanks!
AL
wow, you site looks clean and cool. Very slick design. Love it!
Dear Chris,
I Have just launched a conference website featuring your neat Neoclassical design. My problem is this – the client wants to have the header scroll regularly (instead of when you click on a different page or post). The reason is that each header highlights a different speaker or trainer and they want all to obtain some coverage. Is there anything that can be done to speed up the change? Say every 6 – 8 seconds…. My designer is fed up with this job and is giving me the impression that this is just not possible without a massive overhaul. Can you illuminate?
I’m wanting to implement this simple image rotator in Thesis to place a large image (like what is in Neoclassical) under the header (where I’ve put my logo).
This is the code I’ve written (not really understanding it) and I’m getting a syntax error for the function. Please help!
/* Rotating Photos Below Header */
function add_rotating_photo () {
<img src=”/custom/images/header_.jpg”
width=”865″ height=”199″ alt=”some random photos of our workshops” style=\”border:0px\” />
}
add_action(‘thesis_hook_after_header’, ‘add_rotating_photo’);
Chris,
I like your PressRow template, but I’d like to change the header image. (No offense.) How do I do that? It almost seems like it should be possible in the appearance tab, since there is a choice for “Header Image and Appearance,” but all i see are choices for colors, not for the image itself.
I’m no expert, but I’ve mucked around in the theme editor before, so I can follow basic instructions.
Hello Chris,
I have tried to use the code for the header image rotator in your PressRow theme. And it at first it appeared that it was working. But the header does not appear in Internet Explorer. FF, Chrome, Safari and Opera dislpay it without any problems. Have you (or anybody outhere) got any clue what goes wrong?
Thx,
Chris
P.S. @ Sutton: you can change the header image in style.css on lines 104 till 108.
I used your neoclassical theme for my new piano website http://pianotreasure.com, made a few font/color changes, added 8 images for the rotating image php, and it looks beautiful…check it out.
One small problem: occasionally, refreshing shows no header image at all, just a one-line message saying other images are available if you refresh the page. Is there a way to avoid this? I don’t want browsers to see an empty header, even one time. Most won’t bother refreshing, they’ll just go somewhere else.
Also, is there a way to make all the images rotate while you’re viewing the site, without refreshing? Like a flash slide show of all your stored images that keeps changing while you read whatever page/post you’re on?
If I could come up with ONE professional looking header, then maybe I could think about adding another, then a rotator.
:)
I am trying to get the random image code to work and don’t seem to have any luck. I have changed the extension from html to php and thus put the code you provide in the same location of where my single header image is located. I do have all five images I have chosen to rotate put in the same folder of my site folder. I don’t know what the problem is. I am using dreamweaver to build my site and when I put your code in, dreamweaver takes out header_1 and leaves a blank location from the design perspective and thus leaving it blank. Help me please!; Thanks a million!
One more thing: what do you suggest would be my “image_path_folder?” I added the dimensions of my header images and finally do not have a blank location, but I still have what looks like a link that is down in the location of where the header would exist. In other words, where the header image would exist does have a div outline, but still the image doesn’t show up. Thanks in advance
I really want a rotating header (even if it only changes when the page is refreshed).
Thanks!AL
Hi CPearson
I just bought Thesis – I have have never had so much trouble! The basics are all there – but geez – I am not a newbie but not a coder either. I am the in-between lot – so probably your most difficult type.
All I want to to do is upload one static image to FILL the header banner and after 4 evenings of troving the web for answers – I am just about to throw in the towel. Also, I can’t have rotating images on my header unless I have a 1 or 2 column website? (I don’t really even want rotating but it seems to be the only answer for Thesis IF I want an image on my header). Disgruntled and wondering why I shelled out $87 dollars as I seem to be no better off. Just check out my website – it use to be easier (at blogger no less!)
Can you help me? I think a lot of people actually do use my website for information – but not right now – that’s certain.
esnouffer
Awesome implementation Chris! How would I modify the code to make the pictures rotate without refreshing the page?
Adam, you’d have to use JavaScript to do that. Basically, it would be totally different from the structure I’ve given you here, and you should search for “JavaScript image rotator” if you want more accurate results.
Useful peice of code. I’m going to use it to display some random products in the header of my website once I’ve done the re-build :)
Lovely script… but it doesn’t seem to display in Internet Explorer! (What a shocker right?)
Any thoughts would be lovely! I’m stumped!
Will this work in Blogger ?
I don’t know if it’s PHP based or HTML based…….is there a way I can figure this out?
im stuck in applying link on random images in php. its getting on my nerves day by day but i did not find any solution online. would u plz help me on the code below plz
<?php
//an array of 4 images in the same direcory as the script
$images = array("bag.jpeg", "diaries.jpeg","pcap.jpeg", "pen.jpeg", "trouser.jpeg","tshirt.jpeg");
//generate a random number
srand((double)microtime()*1000000);
$randomno = (rand()%4);
//display image
echo ("”);
?>
plz plz plz plz help me
Holy cow this helped me a lot! I am creating a fanlisting for a tv show and I wanted the header image to change each time the page was refreshed to show all the different characters and this helped TONS! =) Thank you so much! If you’d like to see where I used the code, it’s here.
For us super thick and novice Wordpress’ers, I just need the code and tell me where to put it. Talk to me like a second grade student though.
1. Find this string in your header.php, starting and ending with__________ and replace it with the following code.
2. Copy and past the below code in the areas starting and ending above.
Please help, headers not rotating.
I really like the idea of a dynamic header and I have the Thesis theme but I cannot seem to get the dynamic header to work using the instructions given here. I’m just getting an error message.
Also, you said:
“By default, the Thesis multimedia box will randomly rotate images that you place in your /rotator folder, thus making this an utterly brainless process.”
However, the multimedia box does not appear as a header and I’ve had no success in re-positioning the multimedia box.
Suggestions please.
Thanks.
Yes I also like a dynamic website rather.
My web uses Wordpress template. I will try to change to Header code as guided above.
What I am looking to do is similar. I am looking to have a static page as well as the blog appear on the main page of my wordpress site. Right now going to the settings section will only allow me to do one or the other. any feedback would be appreciated.
Ottawa, to accomplish what you’re trying to do, you’ll need to “hack” WordPress a bit. This is most easily accomplished with a framework like the Thesis Theme (which contains many hooks that can be used to “plug in” blog content), but it can be done in an extremely hack-ish way by filtering
the_contentas well.Because of potential conflicts with plugins, I don’t recommend filtering
the_content, so we’ll only talk about the hook method here.With the hook method, essentially what you’re going to do is run a new WordPress post query to generate your “blog.” One of my old articles contains some code examples for how to generate a WordPress query, and I also recommend the WordPress Codex page on using
query_posts.This concept, as well as the code it requires, is an intermediate to advanced concept with WordPress. If you don’t have much experience with PHP or WordPress, I recommend hiring a developer for a task like this.
Thank you so so much I’ve tested it and have it working! So AWESOME!
Just want to say a huge thank you—this is so cool. I will post what I've done with it asap.
Thank you again Chris.
Hey. I want to inquire one thing…is this a wordpress web site as we are planning to be going across to WP. In addition did you make this theme by yourself? With thanks.
Yesil, this site is indeed a WordPress site, and it runs on the Thesis Theme (with a custom design by me).
Hey Chris,
I am trying to get this code to work in Thesis 1.8.2 but nothing is happening. When I put it in Custom_Functions.php I get an error and have to go back and delete it. When I put it in custom.css nothing happens. I put in my path to images in (which I am not sure if its correct) and nothing is working.
Any help will be greatly appreciated!
Cherub, simply putting this code inside your
custom_functions.phpfile is insufficient. The code must be placed inside a function and then hooked into place (aka, where you want your images to display) using Thesis hooks.If you need additional help with this, be sure to stop by the Thesis forums for expert assistance!
hi chris,
i’m using this in a plain ole php page, no wordpress. it works great (hats off to you!!!) in opera, but not at all in IE8. The images don’t load.
any ideas?
thanks!
steph
Thanks – Been looking for something similar to randomly show my banners. It worked fine for me.
Hi Chris, I am using this:
in my .tpl file and the code is not working.
The four file names are City_1.jpg……City_4.jpg. Any suggestions?
Thanks
Awesome post! Thanks a bunch :)
Thank you for this tip. It was very useful.
great help for me really!
thanks :)
Love the tips! Going to share with fellow coders and beginner web builders including my son… Thanks for making it simple and easy to follow.