[Resolved] Page Hero Custom Field image size

Home Forums Support [Resolved] Page Hero Custom Field image size

Home Forums Support Page Hero Custom Field image size

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1630519
    Vlidi

    Dear GP team,

    I have searched various different solutions for this on the Forum, but eventually had to see with you.

    Finally I made a Page Hero for Single Posts as I need it, and it works OK, still fidling with the mobile version.

    The structure of the Page Hero for Single Posts is as follows:

    1. Custom taxonomy title
    2. Post tile
    3. Custom field for subtitle created in ACF
    4. Post Author & Post Date
    5. Featured image inserted as {{custom_field._thumbnail_id}}
    6. Featured image caption inserted via the shortcode created in Code Snippets

    The current code in Elements is this:

    <div class="hero-category">
    {{post_terms.CUSTOM-TAXONOMY-TITLE}}
    </div>	
    <div>
    	<h1 class="hero-post-title">
    	{{post_title}}
      </h1>
    		<h2>{{custom_field.SUBTITLE}}</h2>
    				{{post_author}}{{post_date}}
    {{custom_field._thumbnail_id}}
    </div>
    [featured_caption]
    <style>
    	.page-hero img{ margin: 50px auto; width:100%; }
    	h1.hero-post-title{ color: #333333;}
    </style>

    My question:

    The Featured Image is of quite low res as it is pulled as thumbnail_id. (BTW occasionally it is rendered in medium resolution, not sure why it happens.)
    How can I pull the set image size I would create as Custom Size?
    I guess the best would be to create the proper size using this function.

    Thanks for any help with this!

    #1630582
    David
    Staff
    Customer Support

    Hi there,

    you have this CSS:

    .single .page-hero {
      width: 1100px;
    }

    you should use max-width to constrain the imge.

    #1630590
    Vlidi

    Hey David, exactly that, just stripped all CSS, realized in the meantime about the width parameter, and edited the post πŸ™‚
    Thank you very much for the superfast reply!
    GP support continues to be amazing, it is almost in real time now πŸ™‚

    I am still trying to figure out how to pull the right image size, any thoughts?

    #1630870
    David
    Staff
    Customer Support

    You can filter the Hero Image attachment size with this filter:

    add_filter( 'generate_hero_thumbnail_id_size', function() {
        return 'large';
    } );

    And then you can use any of the default attachment sizes or ones you generate using the function you references above. But it is only a single image, so its the same image size for any device size

    #1631181
    Vlidi

    Thanks David!
    Now I can control the image size as neded, no more blurry desktop headers πŸ™‚
    Even better, the archives are not affected and serve their designated thumbnail sizes.

    It would be great to be able to set some smaller size for mobile, but still I get like 98% on GTMetrix, so I guess I can live with this.

    Thank you once again for the great support!

    #1631297
    David
    Staff
    Customer Support

    yeah responsive background images are not easy – we may have something for that in later versions of the Block Element and GenerateBlocks πŸ™‚

    Glad to be of help!

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