Archived topic
Page Hero Custom Field image size
5 replies · Started by Vlidi on January 23, 2021
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!
Hi there,
you have this CSS:
.single .page-hero {
width: 1100px;
}you should use max-width to constrain the imge.
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?
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
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!
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!
