[Support request] Featured image in the Header Element

Home Forums Support [Support request] Featured image in the Header Element

Home Forums Support Featured image in the Header Element

  • This topic has 23 replies, 4 voices, and was last updated 6 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 24 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?"

    #1738317
    qpaq

    Hi,

    I have an additional issue with this already resolved topic.

    I’d like to add an additional header image out of the featured image of the post. The size would be 700px wide. But I don’t want to change the existing header images of (500×300 pixel in dimension) I was able to generate additional thumbnail sizes in 700px width. But can’t make them to be displayed on the posts. The codes are below.

    The PHP Snippet to create thumbnails in 700px wide from featured images of the posts.

    // Create new image size for event hero
    add_action( 'init', function() {
        add_image_size( 'eventhero-image', 700, true );
    } );
    
    // Set new image size for event hero
    add_filter( 'generate_hero_eventthumbnail_id_size', function() {
        return 'eventhero-image';
    } );

    The Element snippet:

    <div align="left" style="padding-bottom: 10px"> 
    {{post_terms.content_type}}
    </div>
    
    <div class="hero-wrap">
       <div class="heroimg-wrap-column">
          {{custom_field._eventhero_eventthumbnail_id}}
       </div>
    	<div class="hero-wrap-column">
    		<h2 align="left" class="page-title">
    {{custom_field.event_type}}</h2>
    	<h1 align="left" class="page-title">
    	{{post_title}}
    	</h1>	
       </div>
    	
    </div>
    
    	
     <div class="postmeta-row-profile" >
    		[page_hero_gravatar] by {{post_author}} | {{post_date}} | {{post_terms.category}}
    		</div>

    I include the page sample below for you to check it out.

    #1738755
    David
    Staff
    Customer Support

    Hi there,

    in your hero-wrap contain change:

    {{custom_field._eventhero_eventthumbnail_id}}

    to:

    {{custom_field.thumbnail_id}}

    This should return the image size you applied in the generate_hero_eventthumbnail_id_size filter

    #1738770
    qpaq

    Hi David,

    Thanks for your message but that didn’t work out. It retrieves the existing image size not the one with the new 700px width.

    Shouldn’t the generate_hero_eventthumbnail_id_size be the same as the same one called inside the element header?

    #1738853
    David
    Staff
    Customer Support

    Aah spotted another error

    This is incorrect:

    // Set new image size for event hero
    add_filter( 'generate_hero_eventthumbnail_id_size', function() {
        return 'eventhero-image';
    } );

    It should be:

    add_filter( 'generate_hero_thumbnail_id_size', function() {
        return 'eventhero-image';
    } ); 

    Then change to custom field template tag i provided above will work

    #1739123
    qpaq

    Hi David,

    I need two different featured image sizes to display in different post types. The provided code changes the featured images thumbnails and overrides the existing snippet.

    EXISTING SNIPPET FOR HERO IMAGES FROM FEATURED IMAGES OF THE POST

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

    NEW SNIPPET FOR HERO IMAGES FROM FEATURED IMAGES OF THE POST

    // Create new image size for event hero
    add_action( 'init', function() {
        add_image_size( 'eventhero-image', 700, 400, );
    } );
    
    // Set new image size for event hero
    add_filter( 'generate_hero_thumbnail_id_size', function() {
        return 'eventhero-image';
    } ); 

    In regular posts’ header element I retrieve featured images by {{custom_field.thumbnail_id}}

    So I think I need a new custom field for the additional 700px wide images? Am I wrong?

    #1739194
    David
    Staff
    Customer Support

    First you would need to add your two new image sizes:

    // Add new image sizes 
    add_action( 'init', function() {
      add_image_size( 'eventhero-image', 500, 300, true );
      add_image_size( 'your-other-image-name', 700, 400, true );
    } );

    Then you use a single filter that will set the image size depending on the Singular post that is being viewed.

    add_filter( 'generate_hero_thumbnail_id_size', function($size) {
      // Set defaults size if conditions not met
      $size = 'full';
      // Check if post is your_first_post_type
      if ( is_singular( 'your_first_post_type' ) ) {
        $size = 'eventhero-image';
      }
      // Else check if is your_other_post_type
      elseif ( is_singular( 'your_other_post_type' ) ) {
        $size = 'your-other-image-name';
      }
      // Return the thumbnail size
      return $size;
    }); 
    #1740915
    qpaq

    Hi David, I understand what you wish to do but couldn’t make it. I think I have a problem to understand the post_type. I’m using custom post types named as profiles and events.

    When I insert these two into ‘your_first_post_type’ and ‘your_other_post_type’ the snippet gives a fatal error.

    #1741145
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you share the error message you’re seeing? So we could have an idea where the issue is specifically coming from.

    I’ve backread the topic and I’ve noticed a mismatch on the things you’ve been using.

    Aside from the other things David pointed out, I noticed that you used this:

    // Set new image size for hero
    add_filter( 'generate_hero_thumbnail_id_size', function() {
        return 'hero-image';
    } );

    This PHP snippet implies you’re trying to use an added image size hero-image but I don’t see you registering it.

    On this code:

    // Create new image size for hero
    add_action( ‘init’, function() {
    add_image_size( ‘eventhero-image’, 500, 300, true );
    } );

    I see you added eventhero-image, not hero-image. This can be an issue.

    David fixed some on his reply here:
    https://generatepress.com/forums/topic/featured-image-in-the-header-element/#post-1739194

    But on his code, you’re supposed to change 3 things which are:

    your_first_post_type in if ( is_singular( 'your_first_post_type' ) ),

    your_other_post_type in elseif ( is_singular( 'your_other_post_type' ) )

    and your-other-image-name in $size = 'your-other-image-name'; assuming you’ve added another image size for the other post type. Else, use eventhero-image on this as well.

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

    #1742305
    qpaq

    Hi Elvin,

    Thanks for your message. I got rid of the fatal error. However I couldn’t make the posts to retrieve the resized thumbnails. When I run this David’s snippet normal sized images are displayed.

    I have used PODS to create content_type as Custom Post Types. I have events and profiles post types. I’ve managed to fabricate two sets of featured images.

    add_action( 'init', function() {
      add_image_size( 'hero-image', 500, 300, true );
      add_image_size( 'eventhero-image', 700, 400, );
    } );

    What should I write instead of your_first_post_type and your_other_post_type

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