Simple Random Header Images for Your Blog – 130

130 Comments ↓

#Charlie  at 3:11 pm on Oct 11, 2006

Great post! I like how this technique works hand in glove with the Cutline theme. It’s almost like you planned it that way.

#jonathan  at 4:07 pm on Oct 11, 2006

Nice snippet of code… I have it in action here…

#Chris P.  at 4:47 pm on Oct 11, 2006

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!

#jonathan  at 5:06 pm on Oct 11, 2006

no problem chris… and thanks for your great work!

#Chris P.  at 5:12 pm on Oct 11, 2006

Hey, anytime…I can’t seem to get enough of this stuff!

#Doug Karr  at 5:51 pm on Oct 11, 2006

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

#Totally Random Header Images for Cutline | Cutline Theme for WordPress  at 6:22 pm on Oct 11, 2006

[...] Basically, the theory (and thus the code) behind this is quite simple, and I’ve prepared a random header image tutorial that you can peruse at your leisure if you’re into that sort of thing. [...]

#Chris  at 8:28 pm on Oct 11, 2006

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

#Chris P.  at 9:03 pm on Oct 11, 2006

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!

#Lawton  at 9:15 pm on Oct 11, 2006

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

#Lawton  at 9:17 pm on Oct 11, 2006

Does the code go in the Header file?

#Chris P.  at 9:36 pm on Oct 11, 2006

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.php file. For a specific look at how this will appear, check out how to add random header images to Cutline.

#Lawton  at 9:58 pm on Oct 11, 2006

Sorry. Which one is the widget? It’s not the plugins right?

#Chris P.  at 10:03 pm on Oct 11, 2006

The widget is, in fact, the plugin.

#Lawton  at 10:24 pm on Oct 11, 2006

Thanks buddy. PS-

Tubetorial is the Cat’s Meow.

#Lelia Katherine Thomas  at 7:37 am on Oct 12, 2006

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.

#Chris P.  at 9:30 am on Oct 12, 2006

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!

#jonathan  at 9:44 am on Oct 12, 2006

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.

#stephen  at 9:49 pm on Oct 12, 2006

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.

#Chris P.  at 11:05 pm on Oct 12, 2006

Stephen: I think Doug’s comment answers/rebuts your question better than I could.

#matrianklw  at 3:21 am on Oct 21, 2006

Does this work for Blogger?

#Chris P.  at 9:47 am on Oct 22, 2006

Matrianklw: I don’t know how Blogger’s pages are composed. For instance, are they bare html, are they php, are they PERL?

I dunno! The only way this would work (as described) is if Blogger was based on a PHP framework.

#coe  at 6:30 pm on Oct 23, 2006

Outstanding. Once again, you give great design insight. And don’t get me started about how much I like Cutline as a theme.

#Internetagentur Mimbair  at 2:37 pm on Oct 24, 2006

Clever, very clever. The first designer I meet, who plays with PHP as easy as with Photoshop.

#anada  at 11:03 pm on Oct 25, 2006

Random header image is a brilliant design with php drive. I should collect applications like this to better serve my clients.

#basil  at 1:49 pm on Oct 27, 2006

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

#basil  at 1:52 pm on Oct 27, 2006

Sorry Chaps forgot to ADD coding I used.

bentleyproperties

#basil  at 1:54 pm on Oct 27, 2006

It seems that the coding does not show up on your page. If you go to:

http://www.bentleyproperties.com.es/test.php

#Chris P.  at 1:57 pm on Oct 27, 2006

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_path with the directory where your images are stored on your server.

Cool?

#basil  at 1:58 pm on Oct 27, 2006

Sorry wrong test page

http://www.bentleyproperties.com.es/testX.php

Basil

#basil  at 1:59 pm on Oct 27, 2006

Thanks Chris I did that, you can see from the coding.

#Chris P.  at 2:12 pm on Oct 27, 2006

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.

#basil  at 3:21 pm on Oct 27, 2006

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?

#basil  at 3:23 pm on Oct 27, 2006

.jpg” width=”image_width” height=”image_height” alt=”image_alt_text” />

#basil  at 3:25 pm on Oct 27, 2006

Fro. my browser here it looks like you don’t get all the coding
.jpg”

#The Lucky Punter  at 10:51 pm on Oct 27, 2006

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

#Chris P.  at 10:26 am on Oct 28, 2006

Punter,

Questions will be answered in the order they were received

1. Some modification would be required in order to make the code work for PressRow. Unfortunately, PressRow’s header uses CSS background images to display the pictures, but the code above (as well as the Cutline theme) uses actual <img ... > tags to display the images.
2. Author names are already coded into the template, and they just need to be “uncommented” in order to work. You’ll find author references within the <h4> tags in the following template files:
   • archive.php
   • index.php
   • search.php
   • single.php
3. I’ve just updated the index.php file for the theme, so if you download it again and overwrite your index.php file, the length of your home page will be determined by your WP Options panel (which can be as big or small as you like).

#basil  at 2:10 pm on Oct 28, 2006

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

#basil  at 2:12 pm on Oct 28, 2006

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_……………………..

#Chris P.  at 12:33 am on Oct 29, 2006

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.

#Bigg Links - October 30th 2006 at Take More Risks  at 10:32 am on Oct 30, 2006

[...] Be careful what you write online - uh oh :p A cool tutorial showing you how to display different images as your blogs header at random. An interesting review of Internet Explorer 7. Information Design is 95% typography. Firefox ist verboten - at least in Miami-Dade [...]

#moirae  at 1:54 pm on Nov 5, 2006

If you want to see an awesome use of random header images, check out a blog called January One.

#Andrej  at 5:27 am on Nov 8, 2006

Thank you!

#mountaineer  at 11:38 pm on Nov 15, 2006

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.

#Chris P.  at 12:35 am on Nov 16, 2006

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.

#Doug  at 2:39 pm on Nov 17, 2006

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.

#Someone  at 10:08 pm on Nov 25, 2006

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.

#Chris P.  at 11:49 am on Nov 26, 2006

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.

#Someone  at 2:07 pm on Nov 26, 2006

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

#Someone  at 12:52 pm on Nov 28, 2006

i’ve made it by myself. thanks for ya reply anyway.

#Klaus  at 6:38 pm on Dec 20, 2006

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!

#Chris P.  at 10:15 am on Dec 21, 2006

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 div elements for each different image that I wanted to use.

I started by establishing a naming convention for my header div elements—banner_1, banner_2, banner_3, and so on. Next, I declared different background images for each banner element within my stylesheet.

At this point, achieving randomization is relatively simple, as I only needed to call the appropriate banner div from 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 div elements 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 img tag with both alt and title attributes is simply better from an accessibility standpoint.

#Luca  at 11:43 am on Dec 21, 2006

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

#Chris P.  at 1:16 pm on Dec 21, 2006

Luca,

Read the comment directly above yours.

#Robert Richard  at 7:24 am on Jan 29, 2007

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.

#Chris P.  at 8:46 am on Jan 29, 2007

Robert — In your header.php file, 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.

#The Marmot’s Hole » Blog back to normal  at 9:31 am on Jan 29, 2007

[...] On a design note, I’ve implemented a random banner image—hit refresh and you should see it in action. If you’d like to create a random banner image on your Wordpress blog like your Uncle Marmot, Chris Pearson tells you how to do it. [...]

#Stewie  at 7:45 pm on Feb 7, 2007

Just pushed this up tonight. What an excellent tool.

Thanks!

#Alexey M.  at 10:51 pm on Mar 2, 2007

Very simple decision. But if pictures greater each time long loads. I have refused.

#Big Square Blog » Random Header Images For Your Blog Using DIVs and PHP  at 10:25 pm on Mar 4, 2007

[...] Chris Pearson has a handy tutorial on his website for how to achieve this effect. While it produces the look that I was going for, it wasn’t exactly the way I wanted to go about generating random header images for the Big Square Blog. Chris’ method involves the implementation of PHP code within an image tag, which means that even CSS-incompatible web browsers and printers can view or print out each of his random header images. [...]

#Sandra  at 7:30 am on Mar 8, 2007

i tried lots of times and i couldn´t…. I think i have to learn something else

#Brad  at 11:10 am on Mar 28, 2007

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

#Rhett  at 1:14 am on Apr 16, 2007

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.

#Dean  at 2:50 pm on Apr 21, 2007

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

#tomás  at 7:42 pm on May 5, 2007

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

#Matt  at 3:41 pm on May 7, 2007

@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.

#J  at 9:59 am on May 25, 2007

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!!!

#Chris P.  at 1:40 pm on May 27, 2007

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.php file.

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.

#Dan  at 10:23 am on Jun 22, 2007

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?

#Rachael  at 8:49 pm on Sep 3, 2007

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.

#John Kalev  at 7:12 pm on Sep 10, 2007

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!!!

#John  at 7:13 pm on Sep 10, 2007

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!!!

#Jeff Friend  at 1:18 pm on Sep 12, 2007

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!

#John  at 8:45 pm on Sep 25, 2007

This is my code… what am I doing wrong?

my div elements are labeled ‘logo1′, etc.

#John  at 8:46 pm on Sep 25, 2007

how do i post my code here… last post eliminated it?

#Me  at 4:09 am on Oct 1, 2007

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.

#passionepc  at 9:41 pm on Oct 2, 2007

Is possible use a code for blogspot header?

http://passionpc.blogspot.com/

#Chris P.  at 9:46 pm on Oct 2, 2007

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.

#Paul C  at 5:55 pm on Oct 11, 2007

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!

#claudia  at 7:34 pm on Oct 22, 2007

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???

#db  at 11:13 am on Oct 26, 2007

Whats the default header image sizes for Cutline? Anyone?

#Laura  at 7:40 am on Oct 31, 2007

Thank for putting this out to the world.

I really was expecting more then one echo statement

#afp  at 11:49 pm on Nov 5, 2007

thank you, it works great on my blog

#Matt Presta  at 9:16 am on Nov 6, 2007

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

#Chris P.  at 9:31 am on Nov 6, 2007

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

#Tommy  at 4:35 am on Nov 8, 2007

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?

#Boswell  at 4:19 pm on Nov 15, 2007

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….

#Mike  at 3:18 am on Nov 22, 2007

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

#Chris P.  at 4:16 pm on Nov 23, 2007

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.

#Jeremy  at 5:22 am on Dec 2, 2007

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!

#Chris P.  at 3:03 pm on Dec 2, 2007

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.

#The Bedrock Grid WordPress Theme  at 9:17 pm on Dec 5, 2007

[...] rotating header images. These images rotate without any WordPress plugin, nor do they rotate using the method Chris Pearson uses. No, these images, which you will place in the /headers/ directory of the theme, rotate as many [...]

#Charles  at 10:13 pm on Dec 11, 2007

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.

#Chris P.  at 9:07 pm on Dec 16, 2007

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.

#Jen  at 2:42 pm on Dec 18, 2007

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

#Chris P.  at 6:58 am on Dec 19, 2007

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 .php extensions (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.

#JasonMcIntyre  at 12:25 am on Dec 22, 2007

Hi Chris
Thanks for the tip!
We just implemented this technique on our ASP.NET server.

Jason

#chris j  at 12:47 am on Dec 28, 2007

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

#Jen  at 4:45 pm on Dec 28, 2007

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.

#kunal bhatia  at 11:08 am on Dec 29, 2007

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 P.  at 2:28 pm on Dec 29, 2007

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 j  at 5:04 pm on Dec 30, 2007

Chris P.
Thanks for the Gimp link
never used an x11 application before. cool.

#Shane  at 12:02 pm on Jan 2, 2008

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

#Adriaan  at 12:17 pm on Jan 6, 2008

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

#Adriaan  at 6:01 am on Jan 7, 2008

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?

#Carolyn  at 9:50 pm on Jan 12, 2008

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

#Blog Theme Decision |  at 12:03 pm on Jan 22, 2008

[...] I love its features.  I love the fact that you can insert a little bit of code and have the random headers.  Eventually, I will learn to work with the custom CSS sheet to change all the colors and [...]

#Roy  at 7:37 pm on Jan 26, 2008

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!

#Rahmi  at 5:39 am on Jan 27, 2008

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.

#Nocom  at 10:37 pm on Feb 3, 2008

Hey Chris P. please insert in post above my php code link for WP themes header.php.TNX

#Nicolas  at 7:22 pm on Feb 5, 2008

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.

#Boston Womens Rugby  at 6:55 pm on Feb 19, 2008

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

#Azhagiya Tamilmagan  at 10:42 am on Mar 8, 2008

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.

#Clask  at 5:42 pm on Mar 9, 2008

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)

#Guida Facile  at 12:56 pm on Mar 16, 2008

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?

#Chris  at 11:43 am on Mar 24, 2008

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 ???

#Simon  at 8:44 am on Mar 28, 2008

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?

#Matt  at 7:08 pm on Apr 10, 2008

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?

#Alda  at 7:02 pm on Apr 13, 2008

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!

#Alda  at 8:05 pm on Apr 13, 2008

Never mind - I found the answer. I was uploading to _images rather than _headers. Problem solved!

#Enci  at 3:21 am on Apr 23, 2008

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

#richie  at 5:09 am on Apr 25, 2008

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

#Barb  at 2:24 pm on Apr 29, 2008

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.

#Chris P.  at 10:30 pm on May 1, 2008

Barb — I’ve spotted an errant “2” in your HTML inside the #headimg div. Try removing that, and see if it doesn’t solve your visibility issues in IE.

#Barb  at 10:10 am on May 3, 2008

I got it. Thanks Chris P!

#Charlie  at 6:32 pm on May 4, 2008

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?

#Charlie  at 6:44 pm on May 4, 2008

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.

#Barb  at 6:59 pm on May 4, 2008

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:

<img src="http://babybarth.com/images/main/main_.jpg" width="230" height="276" alt="Baby Pic" />

Barb

#Charlie  at 7:20 pm on May 4, 2008

Thank you so much Barb!!!

#Lighthouse Bible Baptist Church » Added Random Images on the Header  at 7:44 pm on May 7, 2008

[...] Check out the header for this website. I added randomized images  - hit f5 to refresh the page and see the images replace with a new one. kudos to this site: pearsonified. [...]

Hoot and/or Holler ↓