Different featured image on each page

  • Unknown's avatar
    bdnewell · Member ·

    How can I use different featured image on each page Rebalance theme!

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

  • melindahelt · Staff ·

    Hi

    Are you talking about the header image at the top of the page (the image above your logo, with the book and the heart?)

    If so, that header image is controlled by your theme will remain the same across every page.

    You can add different images to each of your pages in the page content area.

    Hope this helps!

  • Unknown's avatar
    bdnewell · Member ·

    Shoot! I was hoping there was a way to change it with css!

  • melindahelt · Staff ·

    It may be possible with some advanced CSS. But you’ll need to write custom CSS for every page and post on your site… I’ll need to check and see if it’s compatible with that theme.

    The Hemingway Theme (https://wordpress.com/themes/hemingway-rewritten/) does have a built in option to make custom headers for each page and post out of your page/post’s featured images.

  • melindahelt · Staff ·

    Tagging this as modlook. I’m unable to tell for sure without a premium account if it’s doable to do different header images per page via CSS.

  • supernovia · Staff ·

    Hi @melindahelt and @bdnewell , I think you could do it with some CSS, but it would be hard to manage. Basically you’d need to add CSS specs for every single post or page that needs a different image. If you’ve got a small site, or if you wanted to specify images for entire categories, that would be doable. If you were to try to do it for every post, though, it would become unwieldy.

    All of these themes have featured image headers built in, if you’re willing to try something else:
    https://wordpress.com/themes/filter/featured-image-header

    Given all that, if you’d still like to try to specify header images in Rebalance, let me know whether you want to do it per post / per page / per category, and I’ll try to point you in the right direction.

    And thanks for your help here, @melindahelt :)

  • Unknown's avatar
    bdnewell · Member ·

    I have put so much work in this theme I don’t want to change again. I am only talking changing a couple of page headers. I would also love to be able to do featured images for categories as well. The individual posts have featured images when you click on them; they’re fine.

  • supernovia · Staff ·

    Okay, give me a link to one page or post that needs to change, and a link to the image you will want to use.

    Then give me a link to a category you want to change, and a link to the image you’d like to use there.

    If I can pull it off, I’ll give you example code for both. :) Cheers!

  • Unknown's avatar
    bdnewell · Member ·

    Link to category
    https://deborahnewell.com/category/love-marriage-life/
    and photo
    https://memoriesandtreasuresblog.files.wordpress.com/2016/07/wedding_cake-header2.jpg

    link to page
    https://deborahnewell.com/chapter-preview/
    link to image
    https://memoriesandtreasuresblog.files.wordpress.com/2016/10/cropped-cropped-feature-cover1.jpg

    I would be ecstatic if you could figure this out! Thank you!

  • supernovia · Staff ·

    Alright, this will do the trick. :) Again, if you try it with too many pages it can get a bit unweildy, but if you’re only doing a few categories and a few specific pages, you should be okay. Notice I used your real examples as well as a few fake examples. For other pages and categories, view or inspect the page source and find the category or page class in the “body” section of the HTML. :)

    /* First, list all of the categories and pages that should not show the main image. For individual pages, you'll need to find the page ID, and you can do that a few ways but probably the easiest is viewing the page source and finding "page-id" on the page.  Then you'll need to list them just like this: */

/* This first set of specs hides the image */

.category-love-marriage-life .site-header-image, 
.page-id-2539 .site-header-image,
.category-something-else .site-header-image,
.page-id-0000 .site-header-image {
    visibility: hidden;
}

/* This next set sets the "rules" for how to display the new background image: basically we want it to "cover" the same height and width as the old image */
.category-love-marriage-life a.site-header-image-link, 
.page-id-2539 a.site-header-image-link,
.category-something-else a.site-header-image-link,
.page-id-0000 a.site-header-image-link {
    background-size: cover;
}

/* Finally, specify a different image for each page or category like this */

.category-love-marriage-life a.site-header-image-link {
    background-image: url('https://memoriesandtreasuresblog.files.wordpress.com/2016/07/wedding_cake-header2.jpg');
}

.page-id-2539 a.site-header-image-link {
    background-image: url('https://memoriesandtreasuresblog.files.wordpress.com/2016/10/cropped-cropped-feature-cover1.jpg');
}

/* fake examples */

.category-something-else  a.site-header-image-link {
    background-image: url('https://memoriesandtreasuresblog.files.wordpress.com/2016/10/something-else.jpg');
}

.page-id-0000  a.site-header-image-link {
    background-image: url('https://memoriesandtreasuresblog.files.wordpress.com/2016/10/anotherpicture.jpg');
} 

/* That's it! */
  • The topic ‘Different featured image on each page’ is closed to new replies.