[Resolved] Full Thumbnail Size for Template Tag in Element Header

[PJ]

I am struggling to get the thumbnail to return at full size for my custom header. I followed this topic https://generatepress.com/forums/topic/page-header-featured-image-template-tag/ , but I think the filter is no longer in use. I couldn’t find it in the documentation.
Thanks,
PJ

[David]

Hi there,

i believe that Filter only works with the featured image that is part of the Header Element.
How are you adding the Image?
If i look at the HTML in your site i am seeing the full range of src-set images

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[PJ]

I am using the template tag custom_field._thumbnail_id and adding it through the header element.

 <div class="alison-post-headers">
	<div class="alison-post-titles">
		<h1>{{post_title}}</h1>
		<h2>
			{{post_date}} | {{post_author}}
		</h2>
	</div>
	<div class="alison-post-img">
		<img url=({{custom_field._thumbnail_id}}
	</div>
</div>

[David]

And what change are you trying to make?
If you right click and inspect the image in your browser you will set that WP is outputting the src-set of images. Which ranges from the thumbnail to the full size image.
On my desktop its currently displaying the 768x576px image as this is the one required for the container it is being displayed in.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[PJ]

Interesting. It’s 300×225 on mine, even though the div is 744×400. I am currently on a 15″ laptop at 1920×1080. The image is considerably blurry. I have the following PHP code in an attempt to return the full thumbnail. It is based on the post I linked above. I have tried it with the filter they have, and I tried a different filter since that filter no longer seems to exist in the documentation. Here is the code with the new filter below:

add_filter( 'generate_page_header_default_size', 'tu_adjust_page_header_featured_image' );
function tu_adjust_page_header_featured_image() {
    return 'full';
}

[David]

Instead of using the Template Tag – add this php function to your child theme functions.php or via the code snippets plugin:

add_shortcode( 'post_thumb', 'db_get_full_thumbnail' );
function db_get_full_thumbnail() {
    ob_start();
    echo get_the_post_thumbnail( get_queried_object_id(), 'full' );
    return ob_get_clean();
}

Then replace this:
<img url=({{custom_field._thumbnail_id}}

With this shortcode:

[post_thumb]

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[PJ]

Gorgeous. Thank you!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts