I was contacted a while back by Barbara Weibel, a very nice lady with a question about a WordPress theme modification. She wanted to know the best way to add a set of rotating images into the header — not like the rotating images php scripts that have been making the rounds for the last few years. She needed something dynamic, similar to the “cover flow” effect used by iTunes.
Boy, that one stumped me. I’m not a Flash or Ajax guru, and Jim was tied up in his own projects. I gave her what little helpful advice I had and hoped for the best.
Barbara emailed me again last week to let me know she had found a solution. She’s used my Translucent Dreams theme as a base for her blog‘s design (which, by the way, is a VERY good read if you’re looking for new bloggers to add to your blogroll!) and has found that using the NextGEN Gallery in the header accomplished the effect she was wanting.
Take a look at her blog, Hole in the Donut, and you’ll see what I’m talking about.
Barbara was nice enough to allow me to publish her notes detailing the steps she took to implement this into her blog. I took the liberty of adding some screenshots from my own test blog to help make it easier to follow along.
Note: You may need to play with the settings once you have it set up to adjust to your liking …
First, I installed and activated the WordPress NextGEN Gallery plugin. This adds a settings panel to the Dashboard that is titled “Gallery”
Second, I installed and activated the NextGEN ImageFlow add-on for the NextGEN Gallery. This shows up as an added option at the bottom of the “Gallery” settings panel on the Dashboard.
**IMPORTANT:** Be sure to upload reflect2.php and reflect3.php to your WordPress root folder!!
Next, I created and uploaded a gallery of the photos I wanted to show up in the header using the “Add Gallery/Images options in the NextGEN Gallery settings panel. I made sure they were all the same size (500 x 333) and although the documentation says you can use vertical format photos, I limited mine to horizontal, simply because I knew they would work better in the header.
Some changes were needed in the stylesheet in order to get the design to align correctly. Add this to the style.css file:
#gallery {
height:259px;
width:800px;
position:absolute;
top:-100px;
left:40px;
}Then I modified the header.php to be:
<body>
<div id="wrap">
<div id="header">
<div id="gallery">
<?php
echo nggShowImageFlow(2);
?>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name');
?></a></h1>
<h4><?php bloginfo('description'); ?></h4>
</div>
</div>
<div id="sidemagic">
NOTE: The (2) in the above php echo code refers to the number of the gallery I created — your number may be different!
Then I went back to the style.css and made the h1 and h4 position absolute and tinkered with the height for the headline and sub-headline to get them to lay where I wanted them. It now looks like this:
#header {
margin:0 auto;
padding:0;
height:259px;
width:900px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:top center;
position:relative;
}#header h1 {
font-family: Trebuchet MS, arial, sans-serif;
font-size:35px;
color:#ffffff;
line-height:normal;
position:absolute;
top:100px;
left:-30px;
}#header h1 a, #header h1 a:hover, #header h1 a:link, #header h1 a:visited, #header h1 a:active {
color:#ffffff;
text-decoration:none;
}#header h4 {
text-align: right;
line-height: 25px;
font-family: Trebuchet MS, arial, sans-serif;
width: 300px;
height: 80px;
overflow: hidden;
font-size: 16px;
font-weight: normal;
font-style: italic;
color: #5dc6cf;
position:absolute;
top:105px;
right:-30px;
}Also, you’ll need to replace the header.jpg file in the images directory with this one.
You may need to tinker a bit to get everything in just the right place. The nice thing about the NextGEN Gallery plugin is that you can exclude photos with just a check mark, so I still have all 36 in the gallery and I can go back periodically and change which ones show up.
A note on gallery settings
These are suggested, but feel free to deviate to fit your theme:
Gallery, ImageFlow, General Settings:
For this one, set “Max. number of images” to zero: (Gallery, Options)
Barbara’s information
Barbara Ann Weibel, Writer/Photographer
Blog: http://holeinthedonut.com
Photo Library: http://easywebsite.net
In closing
A big thanks goes to Barbara for sharing this with me and allowing it to be posted here. Again, I hope this is helpful to some of y’all. Feel free to comment and ask questions via the comments form below!
Dieta
That actualy makes a lot of sense especialy considering that you’re not an expert in the field. Good work.
Nicki
Hehe, thank you, but the work was done by Barbara. I’m just passing it on for others to see. ;)
Beth
SWEET! :D
I was just looking at the themes directory and happened to pick one that you did so here I am. ;)
Still (!) haven’t upgraded to wp 2.7x because I need a new theme – I might just have to do this rotating image thing!
Mind if I take one of yours (probably that same one, since I need a right sidebar because of the stupid blogroll scripts & stuff) and monkey around with it? With credits to you left in, of course! (And if I ever get motivated to do this stuff again! lol)
Beth´s last blog post: the ABC’s of victory
Nicki
Very cool! :)
Holler at me if you get stuck on anything. :D
Ellie
HI I have the NextGen gallery functioning and tested it on a test page.
But I want to replace the cross image with the gallery so church can simply add pics to have them change there.
I hope this makes sense? The cross picture is located in the style css and not the header.
I tried replacing the code with [slideshow id=1] but that did not work can you please tell me how to do this?
Thank You here is the code I need to change to get it to show from style.css
#main{
float:left;
width:710px;
padding:0px;
margin:0px;
background-image: [slideshow id=1];
background-repeat: no-repeat;
padding-top: 180px;
margin-left: 5px;}
Ellie´s last blog post: Test 2
Ellie
I figured it out myself thank you
Nicki
Hi Ellie, glad to hear it. Thanks for dropping by! :)
Kate
I just skimmed through it, but the function call was just what I was looking for. Thanks!