Rotating Custom Header Image

Posted by on Sep 6, 2008 in About My Themes | 39 comments

Now you can customize your header image with just a few clicks of buttons! This is done with the use of the GD graphics technique.

How does it work?
First, I will decide which area of the header to allow custom image. Then I’ll program that section and assign a folder for you to upload your own images.

How to make it work?
Very simple. After you have unzipped the theme, you’ll find a folder named “custom” (for Photo Frame theme) or “photos” (for Postage Sydney theme). Simply upload your image(s) with the correct size to the folder and that image(s) will show up in the header.

What is the file extension for the image?
Your image should be in .jpg format.

What if I upload more than 1 image?
Your images will be rotated when you click refresh button a few times.

As an example, look at our Photo Frame theme as shown below. As you can see, there are 3 photo frames in the header. I have programmed the theme such that you can change the image in the middle frame.

Photo Frame Special Header Image

I have uploaded these 2 images to the “custom” folder (for the Postage Sydney theme, upload your images to the “photos” folder)

Photo Frame Header Image Photo Frame Header Image

To show the second image, just click the refresh button a few times and the first image will be replaced by the second one.
Photo Frame Special Header Image

I even rotate and resize the uploaded images so that it fits in the middle frame nicely!

What is the server requirement?
To make this work, your web server should have GD Library supported. GD is an open source code library for the dynamic creation of images by programmers. To check if your server supports this feature, follow this simple instruction:

  1. Download this GD testing file
  2. Unzip the file and upload it to your server
  3. Open the file in any browser
  4. If your server supports GD, all the items should display “Yes”

The server report for Templatelite can be seen here.

What if my web server doesn’t support GD Library?
The effect will not show up. Instead, the header image will show a default image. In the case of the Photo Frame theme, the default image is a butterfly as shown below:
Photo Frame Default Header Image

Themes that are currently using this effect:
Photo Frame (Recommended image size: 300×240 px and above)
Postage Sydney (Recommended image size: 180×200 px and above)

39 Comments

  1. Photo Frame picture replacement.
    Hello, I have followed all the steps on how to load the picture on the ‘custom’ folder, however having problems uploading the picture on the website since there are no steps explaining how to complete the processs. Please explain.Thank you.

  2. Please check with your hosting provider if their server supports GD Library.

    One way to check if your server supported GD: if your theme is showing the butterfly image in the middle frame, your server doesn’t support GD

    Hope I have addressed your issue.

  3. i changed the pictures now I want to change them again and it will not get rid of one of the pictures
    The one that WAS in the Images file.
    The one in the custom file changed just fine

  4. Hi – I love the theme! My question is, can you change all three photos, not just the centre one? I’d love to be able to switch between the three framse a slection of random photos.

    Cheers, Scott.

  5. Hi Scott, I am sorry that you can only change the photo in the middle frame at this moment. However, we’ll look into the possibility of changing photos in all 3 frames. If that is feasible to do so technically, we’ll release a new revision and let you know.

    Thanks for the suggestion.

  6. Hi Stephen, please try to delete the cache and reload the page again. Or try “Ctrl + F5”

  7. Scott, if you know a bit of Photoshop, you can modify the image “header_bg.jpg”. A good example is bloghomedenver.com. The images on the left and the right side are static but the middle one is random.

  8. Absolutely love the theme. Kudos to you! I have a request tho – now days, most images (especially digital images) have a 16:9 aspect ratio and Im finding it tough to insert some of my favorite images that truly utilize these dimensions. Any possible way to update the header so that the random images that display (absolutely LOVE this by the way) could incorporate the 16:9 aspect ratio? THANKS!!!

  9. Matthew, we have limited resources to change the size of the photo frame to 16:9 ratio. Actually, even if your images has a ratio of 16:9, you don’t have to worry as I have programmed such that the uploaded images will be automatically resized and croped to fit in the middle frame.

  10. Thanks for the quick reply mr. admin…. Understand, just thought it would make a great implementation. Yes, I love the photo-frame feature. REALLY love it. Its great that it crops the image indeed, but when i compose my shots – they make full use of the 16:9 ratio. Thats ok, if the theme is 4:3 – well, then I’ll make the most of 4:3. Again, thanks for the great theme.

  11. Hi, love the template :))

    Is there a way I can increase the font size of the blog title?

    Thanks

  12. I love this theme, and would really like to use it on my site, but the two static header images just don’t fit in quite right. So I’m seconding the request to have them all rotate, and am crossing my fingers that it’s possible! I simply don’t have the image-manipulation skills to do anything with it myself. I’m a writer for a reason. πŸ™‚

  13. Metta, seems like many of you like to have three of the images rotated. Tell you what, this will be on the top of my to-do list after we have relaunched the new design of Templatelite.

  14. Awesome! I’m looking forward to it. πŸ™‚

  15. Sad information : if the server use Debian Etch or Ubuntu, the function imagerotate needed to this cool feature is missing.
    If someone knows a good alternative…

    cEd

  16. Dave, to change title font size, please open this file: title-img.php

    and look for

    imagettftext($im, 22, 2, 20, 70, $white, $font, $text);

    22 is the font size. Change it to whatever value you like and save the file.

    22 => font size
    2 => degree
    20 => x pos
    70 => y pos

  17. Debian problem solved by installing php5-gd from dotdeb.org.

    Working perfectly now.

    Regards
    Cedric

  18. Hi there,
    I absolutely love your theme!
    I installed it and got the butterfly picture. Then I went to my host (awardspace.com) and searched there for details about the GD Library. The help forum threw me in a direction of a page called phpinfo.html which stated the following under GD
    GD Support enabled
    GD Version 2.0 or higher
    (…)

    Now sorry for the stupid question, but doesn’t that mean that the picture randomization should work?

    If the answer is no, please answer me this:
    As you mentioned Photoshop above, would I be allowed to replace all three pictures in the frames with personal ones as long as I don’t touch the credits or other parts of the layout?

    Thanks in advance πŸ™‚

  19. Eehad, the picture randomization should work in your server. Please let me know if it doesn’t work and I’ll look into that in details.

    Also, it is perfectly fine to replace the three pictures as long as you keep the footer links intact.

  20. I tried it again, first clearing all the files then re-‘installing’ the theme, but it does not randomize.
    I’m also not able to get it to display the blog name in the top left corner.
    I’ve seen that in the example page you gave earlier (bloghomedenver.com) this worked fine.
    no clue what’s causing this.

  21. Brian, First off thanks for the great setup. I was wondering if it is possible to change the tag line. I have a long tag line and part of it is dropping too low and cant be read. Could I expand the width, raise it a little or maybe? Any suggestions. Thanks for the help. I am sure you are very busy.

  22. Mickeyace, I saw that you are using Photo Frame ver 1.02, you can try to install Photo Frame 1.05, which support 3 lines tag line.

  23. Brian, I like your photoframe, so thank you for such a warm design. I have a problem with the butterfly picture. I uploaded my own picture for the middle frame and it is there, but the butterfly alway shows up before. How to get rid of it?

  24. Ania, does your server support GD? You can verify it by referring to the FAQ above which states “What is the server requirement?”

    Also, can you show me the URL of your site?

  25. Looking to have the middle picture feed from Gallery2 versus uploading to custom folder. Just need to know where to put this line of php: “print g2_sidebargridblock(‘randomImage’, 1, 300, ‘ ‘);” as it is the call from wordpress to gallery2 using the wpg2 plugin. I assume this would replace the theme’s call to the custom folder, but I can’t nail down where that’s happening.

  26. Rebecca, I am sorry that currently I have no idea as to how to make this work as per your request.

  27. I think you have a great theme. Very clean and fast.

    Rebecca has a great idea. Link the photo at the top to a gallery. Then you don’t have to have them in 2 places and just use your gallery. A lot of people use gallery2

  28. Hi there! Really love this theme and I’d like to tweak the design a little bit. Is is possible that you still have the PSD file of the header? πŸ™‚ I didn’t want to ruin the middle frame since I think that feature rocks!

    And oh, are the header links limited to only 5 pages? I have 6 which is the guestbook link and I wanted to place it together with the remaining links.

    Maye πŸ˜€

  29. Jim, thanks for the suggestion. I’ll look into that.

  30. Maye, you can have the PSD file at a cost of $30. Please refer to our terms of use for details.

    As for the header links, your 6th link has become hidden in the header. I am afraid you have to remove it.

  31. Hi Brian,

    It IS an outstanding template. I love it πŸ™‚ Thanks.
    Somehow, I have an ‘crazy’ idea (i guess).. is it possible to relate the picture with the chosen content?

    For example, if I have a content subject titled ‘A’ and a photo ‘pic1.jpg’ then if ‘A’ is shown as the top content in the current page, automatically the ‘pic1.jpg’ will be shown as the middle picture.

    Well, it can be very tricky though, but I guess it would also be a very nice one too. Do you think so? πŸ˜€

  32. Fino, your idea is very unique. I’ll do a feasibility study on that one. Thanks for the suggestion.

  33. This worked well for me. Will use on my digital photo frame site. Thanks much!

    hokieg

  34. Nice theme,useful information,thanks.

  35. Great themes! Thank You. πŸ™‚

  36. Hi Brian,

    My wordpress photoframe theme is running under turnkey-linux and i’ve install php5-gd but still can’t get the image. My blog title is also not displayed. How to check my GD is running coz my server is in CLI mode, thanks,

    • @Darren,

      I haven’t tested with Linux OS yet, however it may cause because of the path. You can try to modify frame-img.php under theme images folder:

      Modify line 18
      $font = ‘gabrwffr.ttf’;
      to
      $font = ‘/var/www/wordpress/wp-content/themes/photoframe/images/gabrwffr.ttf’;

      And check the permission of the font file.

      Hope it works.

      P.s. I saw you use the old version of Photo Frame Theme, it is better to use the latest version.

      • Hi Brian,

        I’ve update to photo frame ver 1.10 and modify the title-img.php ($font not found in frame-img.php) and finally get my blog title back, thanks.

        But my image in the middle-frame still can not be displayed. Any clue? My OS is running on Ubuntu 8.04 and WP 2.8.5

        By the way I’m trying to add favicon.ico for my blog by modify the header.php. I add and put my icon file in images folder but no luck. My favicon.ico is 16×16 pixel

        • @Darren, all theme support has now been moved to the forum for better management. Please register yourself a forum account and post your issue and I’ll address it there.

Leave a Reply to Dave Cancel reply

Your email address will not be published. Required fields are marked *

Experience ThemeMask

View a mask:

Get the masks now!


Theme runs on
Elegantthemes Chameleon