I had difficulties getting Mike Cohen’s simple header graphic randomizer working. When it works, it randomly selects header pictures. When it doesn’t…well, it’s not pretty. Thank you, Mike, for sending me a copy of your header.php file. I immediately saw what I was doing wrong and fixed it.
Here are modified instructions to get it to work:
- Insert the following PHP function code near the top of your
header.phpfile. (This file can be found atwp-content/themes/default/header.php.) The code should go after the lines that start with< !DOCTYPEand<htmland before the line that starts with<head. (I had placed this code at the very top of the file; it doesn’t work there. :-))<?php
function header_graphic() {
echo "/images/";
$num=rand(0,7);
echo "kubrickheader".$num.".jpg";
};
?>You will want to replace the “7″ in the code with the last number in your sequence of header JPGs.
- In the same
header.phpfile, replace the line that starts with#headerwith the following code. Note that this is a long line and may wrap in your editor. Make sure you replace the entire line.#header { background: url("<?php bloginfo('stylesheet_directory'); header_graphic(); ?>“) no-repeat bottom center; }Here is my
header.phpfile with the edits included. (Save it to your computer before trying to view it. Just clicking on the link will result in an error.) - Save multiple alternative header files in your images directory. It can be found at
wp-content/themes/default/images. These header files should be namedkubrickheaderX.jpg, where theXis replaced with a sequence of numbers.
Here are the header graphics I have so far:
- kubrickheader0.jpg
- kubrickheader1.jpg
- kubrickheader2.jpg
- kubrickheader3.jpg
- kubrickheader4.jpg
- kubrickheader5.jpg
- kubrickheader6.jpg
- kubrickheader7.jpg
- kubrickheader8.jpg
- kubrickheader9.jpg
Update: Here are a few items culled from the comments.
- Kubrickr is a good source of graphics for your headers.
- If you want to use your own pictures, Janicek.com documents how to get the curved borders.
- When you save your files, make sure you use “jpg” instead of “JPG”. It makes a difference.
- If you’re having problems, here’s my header.php file. Right click to save to your hard drive
I’ve also added more pictures:
- kubrickheader10.jpg
- kubrickheader11.jpg
- kubrickheader12.jpg
- kubrickheader13.jpg
- kubrickheader14.jpg
- kubrickheader15.jpg
Update 2: If you are trying to get random header pictures using Blogger, try this.
Looks great . . . . when I solve the search engine and identity problems, I will work on the fun! You will have it mastered and I will bug you to help!
HI-
Followed the directions verbatim. Still have a blue image. Tried to download your header.php but only get a non header.php file. None of the data contained in the header.php is from header,php so maybe a zipped copy would be better placed outside the wp-content dir?
Thanks
p
p, I feel your pain. The zipped file is a good idea. Here it is.
This worked out a lot better. Strange, but your file had a lot of superflous characters in it. /tab /pre etc. After a search/replace action in your header.php I am now down to finding a single character showing up in the side of my image…but this should be a minor fix.
Thanks!
=D
Odd, I am having exactly the same problem that you had. I have done what you suggested as well…..where to place the code etc.
For some reason I cant get a copy of your header.php?
alistair, Here is the link to my header.php file in a compressed zip file. Right click on it and save it to your hard drive. Once you uncompress it, you should be able to open it in a text editor.
I don’t understand the /tab /pre etc. characters that pb found in it. Let me know if you still are having problems.
I have had a look at your header file and it looks the same as mine other than I have 7 instead of 11 headers.
When I just follow the instructions exactly, I there is no header at all, although sometimes when I refresh my original header appears. I also see a line of code at the top of the screen that says
It was originally your URL but I changed it to mine (I was just substituting yours for mine to see what would happen.
Any ideas?
[...] Introducing : Random blog headers! Thank to a hack by /dev/random and the modified instructions by blogan, this blog now generates random header graphics! How cool is that! I did, however, [...]
alistair, make sure you made both modifications. You can also e-mail your header.php file to me and I’ll see if I can spot anything.
Faith mentions that there is something wrong with my file, but I can’t tell from her article exactly what it is.
hi blogan!
for some reason, when I copy and paste the code directly from your site, the ” just before …
) no-repeat bottom center;
is different from the one in …
url(“
It took me 20 mins to notice the difference. Noob that I am. =)
For some reason, the two ” comes out differently. But once I changed them to be the same in Wordpad, the code worked perfectly.
Thanks so much!!!
Strange… When I look at them they are both the same. But, then again, it’s working on my site…
I guess I won’t argue with success. :-) I’m glad it’s working for you.
I noticed you are using Kubrickr, too. Your blog looks great! I tried, but for some reason the gray background it created around the border didn’t match they gray on the rest of my site. Oh well. It gave me an excuse to paw through my pictures and inspiration to take some more.
haha. i agree. as long as it works, i’m happy.
yes, kubrickr is so fun! i’m just trying to figure how to get my own pics up there so that i can use them for my headers.
i’m not very good at photoshop so i can’t make my own, with the nice curved border and all.
Still having problems Im afraid. Here is a link to my header
http://theriverkelvin.co.uk/header.zip
Couldnt see your email addy.
Thanks for this :)
Alistair
Alistair, I compared your header.php with mine. I used a trick that astronomers use to compare photographs. I opened both files, set the formats and positions the same on my desktop, and rapidly switched back and forth between the two. I think astronomers call it “blinking.” Anyway, I didn’t find any differences other than the number of pictures to randomize, your site name, and an extra tab near the bottom of the page.
I went to the directory where you store your images and noticed almost all end in “JPG”. Could this be case sensitive? What happens when you change them to “jpg”?
If you want to email me, use blogan at blogan dot net.
Good luck!
I noticed that my header.php I have available in a zip file was saved in rich text format. It’s now text only.
hey blogan, sorry I forgot to add the option to switch styles on the Classic Theme on my blog. It’s there now. Kubrick still better eh? Hee.
This is weird. Got it working, it was the jpg extension. Except now I have a line of code at the top of my blog.
Any ideas?
Alistair
Yup, I know exactly what causes that. You’ve inserted a couple of lines in your header.php to change over your URL for the TTLB ecosystem.
I tried to do the same thing and got the same result. I haven’t yet figured out how to add such lines to the new WordPress 1.5 theme system so they are in the head portion of page.
If I figure it out, I’ll let you know.
Faith, creating your own headers with curved borders is not that hard. Janicek.com documented the procedure with pictures and everything.
The only gotcha I’ve noticed is when I select the blue portion of the original header graphic, I need to click near the top and then shift-click near the bottom to get the entire blue section. Because it’s a gradient, a single “magic wand” selection might not select the entire blue portion.
[...] and overwrite #header and its parameters with the quoted code above. Now you are ready Good read Source This entry was posted on Thursday, March 24th, 2005 at 4:5 [...]
im trying to do what u did with your header, but im having a bit of a problem. look at the experimental site that i have (kubrick). i know that it would not take long for you to modify it because you encounter the same problems with the php and #header. I have provided you the images location as well. I would really appreciate if you could help me. thanks and sent me the modified codes. It shouldn’t take more than 2 minutes. If I you could get the header images to work then I should be ok. thanks
my images are as follows
http://bb.1asphost.com/smark016/header0.jpg
http://bb.1asphost.com/smark016/header1.jpg
http://bb.1asphost.com/smark016/header2.jpg
http://bb.1asphost.com/smark016/header3.jpg
http://bb.1asphost.com/smark016/header4.jpg
http://bb.1asphost.com/smark016/header5.jpg
http://bb.1asphost.com/smark016/header6.jpg
http://bb.1asphost.com/smark016/header7.jpg
[blogan: I moved this comment from an unrelated post.]
oh sorry I gave the wrong link the first time. here’s the correct one http://smark016.blogspot.com. ok, I have some idea what to do so insert :
Then change #header so it would look like this on my view source.
#header { background: http://bb.1asphost.com/smark016/header0.jpg(““) no-repeat bottom center; }
I think the second modification is wrong or Is that right?? I appreciate it.. Thanks!
[blogan: I moved this comment from an unrelated post.]
[...] It’s now working. Thank you, [...]