Setting specific header image for each page on site

  • Unknown's avatar
    fleeceactress · Member ·

    Hi!

    Currently I have various different header images, and they are set to randomly appear on each of the different pages that site visitors may click on.

    Just wondering if it is possible to assign specific header images to specific pages, rather than having them randomized?

    (I realize that I could just select 1 single header image to appear on each of the pages of my site, but I’d like to use all of them to have more variety, yet control which image goes with which page.)

    Thanks & Happy New Year!

    Fleece

    The blog I need help with is: (visible only to logged in users)

  • melindahelt · Staff ·

    Hi

    The easiest way for you to manage the images on each page would be to select a theme that let’s you customize the images per page.

    Sela is similar to your current them and will allow you to do that. If you look at https://selademo.wordpress.com/page-templates/default/, you’ll see how the photos fit into the top of each page.

    Here’s a forum post where someone had a similar question, but using a different theme. Take a look at this post, but please note that the specific code will not work as your theme is different.

    https://en.forums.wordpress.com/topic/different-featured-image-on-each-psge?replies=10#post-2794289

    If you have a premium or business level account and would like to try to edit the CSS to display the images on your current theme, I can help you out with that.

    Hope this helps. Let us know what you think!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Fleece, what we would have to do would be to include custom CSS rules to hide the normal header and then add in the header image you wish to have on each page. We would need rules for each specific page and use the page id CSS class from the opening body HTML tag to add the new image to each page. This would be an example for your Bio page. I just randomly grabbed an image URL from your media library and set it to so that the people show and it covers the entire header area. Likely things would have to be adjusted for the images you choose. 

    .page-id-19 .header-image img {
	visibility: hidden;
}
.page-id-19 .header-image {
	background: url('https://meetfleece.files.wordpress.com/2013/02/bridesmaid_056.jpg') no-repeat scroll center 30% / cover;
}
  • Unknown's avatar
    fleeceactress · Member ·

    Thanks so much, both of you! @melindahelt, that sounds like a good idea, but I’m a little worried that switching to a totally new theme will open a can of worms, because I don’t know if the design choices I’ve made on the current theme (including a bit of CSS that I’ve added over the years) will transfer over to a new one.

    @thesacredpath, thanks so much for coming up with that!! I tried it and it works great.

    I’m going to attempt to replicate what you’ve created, and apply it to each of the pages on my site and their different corresponding images, although I may need to ask you another question or two about it as I go along!!

  • Unknown's avatar
    thesacredpath · Member ·

    Great, Fleece, let me know if you have any problems.

  • The topic ‘Setting specific header image for each page on site’ is closed to new replies.