[Resolved] Header Element: How to show featured image next to the post title, author etc.?

[Hugo]

I tried to do this myself, but unfortunately, my skills are a bottleneck. I don’t know if I’m abusing the support system of GP, if so, let me know.

I want to customize my Header Element, so that it is formatted in a certain way for all my posts.

I basically want to divide it into 2 columns.

I want the left column to contain the post title, excerpt, author, date published. I already know how to arrange this, based on your excellent header examples page.

However, I’m stuck on the right column. I want this column to contain the featured image of the post.

Here’s an example: image on imgur
Here’s another similar example: image on imgur

Is this something you can help me with? I want to eventually redesign my website to have a similar Post Header.

[David]

Hi there,

you can use this template tag to display the featured Image:

{{custom_field._thumbnail_id}}

Very similar design request today you may find of interest:

https://generatepress.com/forums/topic/blog-post-makeover/#post-1543836

[Hugo]

Thanks for the link. I hadn’t seen that other topic.

I think this gives me enough information to go on. Thanks. If I am still not skilled enough to fix this, I’ll be back with more questions haha.

[David]

You’re welcome 🙂

[Hugo]

Hi David,

I added all the code you mentioned in the linked topic.

Excerpts and featured images work, so that’s fantastic. Thanks.

The only thing that I can’t figure out is how to get them to show up side to side. By using the CSS from your linked topic, the HTML elements show up in a single column, all underneath each other (including the featured image).

FYI, I’ve changed the HTML of the Header Element to the following:

<div class="hero-grid">
	<div class="hero-content">
		<p style="font-size:12px">
			[wpseo_breadcrumb]
		</p>
		<h1>{{post_title}}</h1>
		[page_hero_excerpt]
	  <p style="font-size:12px">
			<i>Written by {{post_author}} - Last updated on [modified_date]</i>
		</p>
	</div>
	<div class="hero-image">
		{{custom_field._thumbnail_id}}
	</div>
</div>

For completeness sake, this is the CSS I copied:

@media(min-width: 769px) {
    .hero-grid {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    .hero-grid>div {
        flex: 1 0 50%;
        padding: 40px;
    }
}

.hero-grid .meta {
    display: block;
}

.hero-grid>div.hero-content {
    padding: 30px;
}

(I think the CSS of the linked post missed an “@” in front of “media”. Please confirm 🙂)

[David]

Good spot on the missing @ – thanks and corrected on original.
Do you have this set up on a post i can see ?

[Hugo]

Yes, added my staging site in the private comments to this post. 🙂

[Hugo]

Nevermind for now, I just noticed that I had two separate “@media(min-width: 769px)” in my custom CSS. I now copied part of the code inside the already existing “@media(min-width: 769px)” part and it works. Thanks! 🙂

[David]

Awesome

you may want to include the overflow: hidden property to the .hero-grid element eg.

.hero-grid {
    overflow: hidden;
}

This will stop your image from breaking out of the container when the screen is smaller, and will stop horizontal scroll.

[Hugo]

Thanks David, it works.

With some customization, I got it to look exactly as I want.

One more question: Is it possible to vertically align both columns? For example: on a tablet, one column’s height might be bigger than that of the featured image. In that case, can the featured image be vertically positioned in the center? Same goes the other way around.

[David]

Edit this part of the CSS to include the vertical-align property commented below:

.hero-grid {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    vertical-align: center; /* include this line */
}

[Hugo]

Hi David, sorry for the late reply, but I got everything working completely as I wanted it to!

Thanks a LOT for your support. Simply amazing.

[David]

Glad to be of help!

[Author]

Posts