[Resolved] Adding article overview in header element

[Rob]

Hey GP,

Amazing product. Thanks for a great WP theme.

Is it possible to add an article overview in the header element? Similar to what is shown here:

https://sciencebasedmedicine.org/are-those-inactive-ingredients-in-my-medicine-really-inactive/

It seems like this article overview text, “Drugs and supplements contain dozens of inactive ingredients. Is this a concern to those with allergies and sensitivities?”, is different from what shows in the SEO. I’m hoping to add something similar for my articles.

Best,
Rob

[Leo]

Hi there,

You can use custom field in page hero:
https://docs.generatepress.com/article/header-element-template-tags/#custom_field-name

Let me know if this helps 🙂

[Rob]

Thanks Leo! This works great. I just added the custom field ‘{{custom_field.overview}}’ and inserted it into my single post header.

I’m wondering if it’s possible to stylize the custom field with CSS. Currently, my single post setup looks like this (here’s a link)…

View post on imgur.com

…and that’s using this html in the header:

<h1 class="header">{{post_title}}</h1>
{{custom_field.overview}}
<div class="image">
    <h4>Medically reviewed by: <a href='https://perfecthairhealth.com/about#medical-team/'>Po-Chang Hsu, M.D.</a></h4>
    <img src='https://perfecthairhealth.com/wp-content/uploads/2019/07/Po-Chang_Hsu-small.png'>
</div>

…and this CSS (from my previous support post):

.page-hero.reviewedby .image {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .page-hero.reviewedby .image {
        flex-direction: column;
    }
}
@media (min-width: 769px) {
    .page-hero.reviewedby .image img {
        border-left: 1px solid #fff;
        padding-left: 20px;
    }
    .page-hero.reviewedby .image h4 {
        padding-right: 20px;
    }
}

h1.header {
    letter-spacing: 2px;
    margin-bottom: 4em;
}

If possible, I’d like to make the header with the post overview look similar to this page’s header:

View post on imgur.com

Specifically:

1. The h1 title and custom_field.overview text align left
2. The custom_field.overview text size increased and with bigger character spacing and line spacing
3. The background color of the custom_field.overview text is slightly lighter
4. The “Medically reviewed by: ____” is stacked, with the bar + photo to the right

Here’s a crude version of what this would look like (colors are placeholders):

View post on imgur.com

I’m sorry for all of the requests! If I know the basics behind the CSS, I can play around with things without needing to bother you. I’m also happy to pay for your time.

[Leo]

You would basically need to reconstruct what was done before unfortunately.

You can try the HTML part in the article below to create the 3 columns layout for description, review by and author image:
https://docs.generatepress.com/article/split-header-three-sections/

Then you can tweak the width: 33.33333%; part to create uneven columns.

You can target each <div> by using the unique class name. So if you want the header-section-1 to have a different background color, this would be the CSS:

.header-section-1 {
    background-color: #fff;
}

If you want to learn more about HTML and CSS, I highly recommend going through the free lessons from this site:
https://www.codecademy.com/catalog/language/html-css

[Rob]

Thanks Leo! This is really helpful.

Using the three-column header setup along with CSS, here are the results:

View post on imgur.com

This looks great for desktop. The only thing I can’t figure out is how to make this mobile-friendly. Right now, the columns aren’t collapsing for mobile.

Is there any way to do this? Here’s the current HTML for the header:

<h1 class='header' align='center'>{{post_title}}</h1>
<div class="header-section">
    <div class="header-section-1">
{{custom_field.overview}}
	</div>

    <div class="header-section-2">
        <p align='right'>Medically reviewed by:
								<br>
					<a href='https://perfecthairhealth.com/about#medical-team/'>Po-Chang Hsu, M.D.</a></p>
					</div>
		<div class="header-section-3">
					       <img src='https://perfecthairhealth.com/wp-content/uploads/2019/07/Po-Chang_Hsu-small.png'>
			</div>
	</div>

And here’s the CSS:

.header-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.header-section-1 {
	width: 65%;
}

.header-section-2 {
    width: 25%;
}

.header-section-3 {
    width: 10%;
}

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
}

.header-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-section-1 {
	text-align: left;
    background-color: rgba(56,56,56,0.54);
	    box-shadow: 0px 1px 7px -3px rgba(0,0,0,0.75);
	padding: 15px 15px;
	margin: 0px 0px;
	letter-spacing: 1.2px;
	font-weight: 100
}

.header-section-1 {
	border: 1px solid #fff3;
        padding: 20px;
}

.header-section-2 {
	letter-spacing: 1px;
	font-weight: 100;
	margin-right: 8px;
	border-right: 1px solid #fff3;
	padding: 2px;
}

h1.header {
    letter-spacing: 2px;
    margin-bottom: 4em;
}

[Leo]

Very good job 🙂

Try this CSS as well:

@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }
}

[Rob]

This is awesome! Thank you!!

I am almost certain this is my LAST question…

Is it possible to stack the columns as:

COLUMN 1
COLUMN 2 + 3

I only ask because there seems to be an alignment issue with mobile, because header-section-2 is aligned right, so it looks a bit odd in mobile:

View post on imgur.com

If it’s not possible to stack the columns like that on mobile, then another workaround would just be to change the alignment on mobile for header-section-2 to center and hide the border. Either solution would work just fine.

In any case, THANK YOU for everything that you guys do. I really appreciate all of your patience.

[Rob]

Hey Leo,

I think I figured it out. I added the following CSS:

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
	.header-section-2 {
		margin: 10px;
	}
	.header-section-2 {
    display: flex;
    align-items: center;
    justify-content: center;
	}
	.header-section-3 {
		margin: -30px;
	}
}

Thanks for teaching a man to fish (with CSS)!

[Leo]

Glad you got it!

You are a very quick learner 🙂

Hope you found it somewhat interesting!

[Author]

Posts