New Banner Pictures
In an effort to have as nice a blog as Kelly and Eric , I added pictures to the banner of my blog. There are 14 different pictures that can show up at the top of the page. With the exception of the Escher lizard pattern, Susan or I took all of the pictures. Most are from our trips including Baja California, Galapagos, New York, and Colorado, but also local trips to Stone Mountain and the Kangaroo Center. One (a funny one of Katie) is from my backyard. You can keep clicking Refresh (or Reload) to see more images. Or you can cheat and click here to see a list of them.
To do this I used Kelly's site as an example. I noticed that her images were sized to 702 pixels by 73. So I decided to to make mine the same size. However it's really hard to see what's going on with such a short picture, so on the first picture (the one of Katie) I decided to crop my pictures to 702 x 136. Once I had collected a bunch of images of the proper size, I logged on to my blog and used "Upload File" to transfer the files one by one to a local folder I called "rotateheader".
Then I had to read Jeb's blog entry about rotating pictures to figure out how to make that work. They key thing was I had to download the rotate.php script and upload it to the same folder as the pictures.
Then I tried to figure out how Kelly made hers work. At first I edited the main template and put an image link where the header went. But that just inserted a picture and then the text was below that. I wanted the picture to be the background of the title. I found out I had to edit the styles-site template, adding all of the stuff Kelly had after the stylecatcher code. Kelly's folder of images is called "rotatebanner" so I had to change that first in the "banner" section. Also she uses a reddish background color for the banner and I wanted to use the olive one that my site uses.
But when I tried that the images didn't come out quite right so I had to adjust the padding for the banner-header (Ted's Blog) and banner-description (Do not meddle . . . ). To see all of my taller pictures I had to increase the padding at the top (the first number for banner-header padding) to 50 pixels. The header itself is a font that is 30 pixels high, then there is 5 pixels of padding below that (the third number; I guess it goes top, right, bottom, left). So far that is 50+30+5 = 85 pixels of height for the banner area. Then the description has 5 pixels of padding at the top, plus the font is 12 pixels. So that gets you to 85+5+12 = 102 pixels. For whatever reason, that is exactly the right amount to see 136 pixels of height (actually I clip a couple of pixels off of the 136). On Kelly's all those numbers added up perfectly to 72. Kelly's template also had padding on the left and right, but I found that the pages for the individual entries, which have narrower banner areas, would wrap the description onto two lines and make the banner taller than it should be. To fill up that extra vertical space it would tile another copy of the image so you'd see a strip of the top of the next image in the banner below the image. That didn't look right. However by eliminating the side padding I was able to make the description fit on one line.
It took me most of the afternoon.
| Permalink
| 
Comments (4)
Well that was a walk down memory lane. You experienced many of the frustrations I did when setting up Abbey's Road and Kelly's Kicks rotating banners. The only work Kelly had to do was say "ok... that would be cool" when I suggested that I add the rotating photos to her banner. You really have some great banner photos, though, and now that you have a defined pixel h x w, it is easy to add to the collection.
You have some very good banner photos. Something about this one stands out...
fernandina.jpg
Maybe the already "cloudy" look it has.
The interesting thing about making the banner photos is it forces you to make cropping decisions you would not nomally make. The end result is often a more interesting photo. I like the browns and greens created with your kanagroo photo.
kangaroos.jpg
Posted by Jeb | October 31, 2005 12:19 PM
I like really like the way the banner pictures turned out. The wide pictures definitely give you a different perspective. The uncropped kangaroo picture really wasn't that good a picture, because it was just a field full of kangaroos. But by taking a wide band I got most of the kangaroos and left out most of the ordinary trees, fence, sky, and grass that weren't that interesting anyway. It's a much more interesting picture now. The picture of Kelly and Claire on Kelly's blog is that way too where it is more interesting seeing just that band showing their eyes.
The Fernandina picture is one of my favorites, but I still like the full version better (and I just realized that I misnamed it; it should be Espanola):
shore.jpg
I got one of the best compliments ever on this picture. A friend showed it to his wife. She really liked it and asked "What kind of filter did he use?" and he said "I think it just looks like that." Which is true. So I guess it's not a compliment.
Posted by brted | October 31, 2005 1:46 PM
I found it extremely hard to fit whatever I wanted into such a thin space. With the Pink Floyd one, I cheated and repositioned the figures of the band. I ran the cover of Piper at the Gates of dawn through a filter in photoshop which resulted in one of the wallpapers on my blog.
Posted by Eric | October 31, 2005 9:08 PM
These are great pictures, but some of them look backwards!!!
Posted by UT Girlfriend | November 1, 2005 1:23 PM