How to get a page's featured image from a term slug (same name)

Question

I have this code (that i've inserted into archive.php) that displays a page's content on the corresponding post category archive with the same slug.

<?php $term = get_queried_object(); ?> <?php $page = get_posts([ 'name' => $term->slug, 'post_type' => 'page']); if ( $page ){ echo $page[0]->post_content; } ?>

I'd like to find a way I can use the term slug to display the page's featured image.

Answer 1

So as I said in the comments, if you're referring to the page referenced by the $page[0] variable, then you could just use get_the_post_thumbnail() like so: (note that I checked if $page[0] is set before attempting to use it)

// The HTML/formatting is entirely up to you..
if ( ! empty( $page ) && isset( $page[0] ) ) {
    echo get_the_post_thumbnail( $page[0] );
    echo '<hr>' . $page[0]->post_content;
}

Please check the documentation for more details on using the function, but as for changing the or using a different thumbnail size (the default size is named post-thumbnail), just set the second parameter to the name of a registered image size, e.g. medium or a-custom-size. E.g.

echo get_the_post_thumbnail( $page[0], 'medium' );

And note that featured images or post thumbnails have their own post where the type is attachment, so if you want to get the ID of a post thumbnail or the attachment post, you can use get_post_thumbnail_id():

$thumb_post_id = get_post_thumbnail_id( $page[0] ); // get the post ID
$thumb_post    = get_post( $thumb_post_id );        // get the full post data

// For debugging purposes:
var_dump( $thumb_post_id, $thumb_post );

So actually, once you have the post data (e.g. the one in $page[0] and $thumb_post above), you could then easily get all the other data for that post like the featured image if any/applicable, title, date, custom fields, categories, etc. Try a var_dump( $page[0] ); and then you'd see various post data, however, for custom fields and other data not directly available in the post object, you can ask in separate questions. :)

Additional Notes

get_the_post_thumbnail() uses wp_get_attachment_image() which adds the srcset and sizes attributes used to make the image responsive (so that the browser could pick the right image to load based on the user's device) — see Resolution switching: Different sizes on the MDN Web Docs website.

Therefore, in reply to your comment: "echo get_the_post_thumbnail( $page[0],'medium' ); isn't working", it's probably actually working, but the browser picked a different image responsively based on the above attributes.

For example in my case, echo get_the_post_thumbnail( $page[0], 'medium' ) did output the correct image URL (which became the value of the image's src attribute) for the medium size (300px wide):

<!-- I wrapped the srcset value for brevity -->
<img width="300" height="205"
    src="https://example.com/wp-content/uploads/2021/12/sample-image-300x205.jpg"
    ...
    srcset="https://example.com/wp-content/uploads/2021/12/sample-image-300x205.jpg 300w,
        https://example.com/wp-content/uploads/2021/12/sample-image-1024x701.jpg 1024w,
        https://example.com/wp-content/uploads/2021/12/sample-image-768x526.jpg 768w,
        https://example.com/wp-content/uploads/2021/12/sample-image-1536x1051.jpg 1536w,
        https://example.com/wp-content/uploads/2021/12/sample-image.jpg 1920w"
    sizes="(max-width: 300px) 100vw, 300px" />

But my browser's viewport width was 360px, hence the browser picked another image (768px wide) from the srcset attribute — and if there was also a 600px image there, then that one would've been used instead of the 768px.

Don't want the srcset and sizes attributes?

Well, that's not a good idea and the MDN Web Docs also stated, "Using this technique could save mobile users a lot of bandwidth", so I would suggest you to just keep using that technique, i.e. those two attributes.

However, just so that you know, you can use wp_get_attachment_image_src() like so to manually generate the <img> tag, which then gives you a full control over the HTML. E.g.

$id   = get_post_thumbnail_id( $page[0] );
$data = wp_get_attachment_image_src( $id, 'medium' );

if ( $data ) {
    echo '<img src="' . esc_url( $data[0] ) . '" width="' . $data[1] . '" height="' . $data[2] . '" alt="">';
}

And there's also get_the_post_thumbnail_url() if you just want to get the URL. E.g.

$url = get_the_post_thumbnail_url( $page[0], 'medium' );

echo '<img src="' . esc_url( $url ) . '" alt="">';