Essence Pro – featured image not appearing as Post header

[mtibesar]

Hello,

The featured image assigned to each Post does not appear when opening up the Post.

The featured images do appear on the main blog page though.

How do I get the Post featured image to appear when opening up the post (versus the homepage image) please?

https://www.veteransstatebenefits.com/book/veterans-state-benefits-texas/

[Brad Dalton]

This may help

---

Code for Paid Members & Clients Only.

[mtibesar]

Hi Brad and thank you for trying.

The code worked, however, it's not what is needed. Please refer to this URL to see the results:

our second book

The code does place the featured image just above the content however, Essence Pro has this large hero image at the very top of the Post. The featured image should go to the very top of the Post.

I don't understand the StudioPress theme developer's logic here. Why can't you set a featured image on a Post or a Page and have it override the homepage image that is being forced upon all the Posts and Pages? Are you listening StudioPress?

The Essence Pro behavior is such that whatever image is placed on the homepage it is repeated on ALL pages and ALL posts. Great! But what if you need to have different images on some of the pages and posts???

[mtibesar]

[Brad Dalton]

Sorry, i misunderstood. Did you want to replace the header hero image on single posts with the featured image? Or something else?

---

Code for Paid Members & Clients Only.

[mtibesar]

Yes please Brad. Thank you very much!

[Brad Dalton]

Thats what it does by default based on my testing.

---

Code for Paid Members & Clients Only.

[mtibesar]

You are correct Brad. I inadvertently caused this problem.

I discovered that when I added css to the Custom CSS to lighten the opacity of the homepage header (which is very dark) this code then apparently overrides all the featured images on the posts and pages. When I remove this code all the featured images now appear.

/* Lighten the opacity of the header */
.header-hero {
    background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 100%, rgba(0,0,0,0.85) 100%), url(https://www.veteransstatebenefits.com/wp-content/uploads/2019/04/cropped-bigstock-Touching-Us-Army-Soldier-Reuni-237306892-3.jpg);
}

So the real problem now is,, how do I significantly lighten the opacity that is applied to the homepage's hero image only?

[Brad Dalton]

Start a new topic for this question.

You can target the front page using the .front-page class.

---

Code for Paid Members & Clients Only.

[Author]

Posts