[Resolved] Adding article overview in header element

Home Forums Support Adding article overview in header element

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #950042
    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

    #950133
    Leo
    Staff
    Customer Support

    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 🙂

    #951455
    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.

    #951535
    Leo
    Staff
    Customer Support

    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

    #952260
    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;
    }
    #952266
    Leo
    Staff
    Customer Support

    Very good job 🙂

    Try this CSS as well:

    @media (max-width: 768px) {
        .header-section {
            flex-direction: column;
        }
    }
    #952285
    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.

    #952456
    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)!

    #952524
    Leo
    Staff
    Customer Support

    Glad you got it!

    You are a very quick learner 🙂

    Hope you found it somewhat interesting!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.