[Resolved] Featured image in the Header Element

Home Forums Support Featured image in the Header Element

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1472837
    qpaq

    Is there a way to display the featured image with preferred sizing in the header element before the post title and content? I was able to display it via a shortcode but couldn’t make the size adjustments and also couldn’t display the captions? Ideally, I’d like to show the featured image in the hero area aligned to the right with rounded corners with approx. 500x300pixel dimensions with the post title on the left?

    Screenshot

    #1472919
    David
    Staff
    Customer Support

    Hi there,

    first you would need to register a new Image size for your 500 , 300px image.
    You can do that with this PHP Snippet:

    // Create new image size for hero
    add_action( 'init', function() {
        add_image_size( 'hero-image', 500, 300, true );
    } );
    
    // Set new image size for hero
    add_filter( 'generate_hero_thumbnail_id_size', function() {
        return 'hero-image';
    } );

    Then you will need to install and run the Regenerate Thumbnails plugin to create these new image sizes for existing media attachments.

    For the Header Element you can use this template tag to display your image within the content:

    {{custom_field._thumbnail_id}}

    If you can wrap that in some HTML like so i can provide the CSS for alignment etc.

    <div class="hero-wrap">
       <div class="hero-wrap-column">
          {{post_title}}
       </div>
       <div class="hero-wrap-column">
          {{custom_field._thumbnail_id}}
       </div>
    </div>

    Please provide a link to where i can see these changes.

    #1473666
    qpaq

    Hi David,

    I guess I’ve managed to do it, slightly different than what you’ve shown. I couldn’t make it with wrapping with div but able to approach to the solution with the header element.

    <h1>
    {{post_title}}
    </h1>
    {{post_date}} | by {{post_author}} 
    <p>
    	{{post_terms.category}} 
    </p>
    {{custom_field._thumbnail_id}}
    #1473758
    Elvin
    Staff
    Customer Support

    Hi,

    Your code could work but it’ll still require a styling.

    Can you try David’s approach again?

    Here’s a slightly modified version of his code:

    <div class="hero-wrap">
       <div class="hero-wrap-column">
    	<h1 class="page-title">
    	{{post_title}}
    	</h1>		
       </div>
    		
       <div class="hero-wrap-column">
          {{custom_field._thumbnail_id}}
       </div>
    </div>

    And here’s the CSS:

    .hero-wrap{
      display:flex;
      flex-direction:row;
      justify-content: center;
    } 
    .hero-wrap-column{
      padding: 20px;
      text-align: left;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1474144
    qpaq

    Thanks Elvin, that worked out like a charm. I’ll play around with CSS to style it.

    #1475396
    Elvin
    Staff
    Customer Support

    Nice one. No problem.:)

    A wise man once said:
    "Have you cleared your cache?"

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