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

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

Home Forums Support Header Element: How to show featured image next to the post title, author etc.?

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

    #1544418
    David
    Staff
    Customer Support

    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

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

    #1544783
    David
    Staff
    Customer Support

    You’re welcome πŸ™‚

    #1562245
    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">
    			Support  Header Element: How to show featured image next to the post title, author etc.?
    		</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 πŸ™‚)

    #1563168
    David
    Staff
    Customer Support

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

    #1563211
    Hugo

    Yes, added my staging site in the private comments to this post. πŸ™‚

    #1563219
    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! πŸ™‚

    #1563352
    David
    Staff
    Customer Support

    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.

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

    #1563943
    David
    Staff
    Customer Support

    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 */
    }
    #1571245
    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.

    #1571321
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.