I am trying to display the featured image of the first post in the respective archive of the tag page.

The template I am using is twentyseventeen. I already see the image by inserting the following code:

if (is_tag() && have_posts()) {
    echo '<div class="single-featured-image-header">';
    the_post();
    echo get_the_post_thumbnail( get_the_ID(), 'twentyseventeen-featured-image' );
    rewind_posts();
    echo '</div><!-- .single-featured-image-header (custom for tag archive)-->';
}

the code for the normal featured image is bascially the same, just a different condition:

if ((is_single() || (is_page() && !twentyseventeen_is_frontpage())) && has_post_thumbnail(get_queried_object_id())) {
    echo '<div class="single-featured-image-header">';
    echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
    echo '</div><!-- .single-featured-image-header -->';
}

While I can see the image, it's displayed smaller than a normal featured image. The image on the archive page has the following markup:

<img 
src=".jpg" 
class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" 
alt="" 
srcset=".jpg 1280w, .jpg 300w, .jpg 768w, .jpg 1024w" 
sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" 
width="1280" 
height="853">

The correct display post featured image is this here:

<img 
src=".jpg" 
class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" 
alt="" 
srcset=".jpg 1280w, .jpg 300w, .jpg 768w, .jpg 1024w" 
sizes="100vw" 
width="1280" 
height="853">

So I have the same class, but there are those sizes injected for some reasons and I do not know how to influence this.

Anyone has an idea how to influence those injected sizes?

You can see the archive page here: / and the way the post featured image looks like here: /

Here is the header.php template:

I am trying to display the featured image of the first post in the respective archive of the tag page.

The template I am using is twentyseventeen. I already see the image by inserting the following code:

if (is_tag() && have_posts()) {
    echo '<div class="single-featured-image-header">';
    the_post();
    echo get_the_post_thumbnail( get_the_ID(), 'twentyseventeen-featured-image' );
    rewind_posts();
    echo '</div><!-- .single-featured-image-header (custom for tag archive)-->';
}

the code for the normal featured image is bascially the same, just a different condition:

if ((is_single() || (is_page() && !twentyseventeen_is_frontpage())) && has_post_thumbnail(get_queried_object_id())) {
    echo '<div class="single-featured-image-header">';
    echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
    echo '</div><!-- .single-featured-image-header -->';
}

While I can see the image, it's displayed smaller than a normal featured image. The image on the archive page has the following markup:

<img 
src="https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933.jpg" 
class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" 
alt="" 
srcset="https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933.jpg 1280w, https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933-300x200.jpg 300w, https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933-768x512.jpg 768w, https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933-1024x682.jpg 1024w" 
sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" 
width="1280" 
height="853">

The correct display post featured image is this here:

<img 
src="https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933.jpg" 
class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" 
alt="" 
srcset="https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933.jpg 1280w, https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933-300x200.jpg 300w, https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933-768x512.jpg 768w, https://hongkong-rocks/wp-content/uploads/2019/07/4H8A5933-1024x682.jpg 1024w" 
sizes="100vw" 
width="1280" 
height="853">

So I have the same class, but there are those sizes injected for some reasons and I do not know how to influence this.

Anyone has an idea how to influence those injected sizes?

You can see the archive page here: https://hongkong-rocks/tag/mutant-monster/ and the way the post featured image looks like here: https://hongkong-rocks/2019/07/20/mutant-monster-2/

Here is the header.php template: https://pastebin/2wJk4EAz

• themes
• post-thumbnails
• archives

Share Improve this question edited Jul 22, 2019 at 14:50 uncovery asked Jul 22, 2019 at 10:47 uncoveryuncovery 1991111 bronze badges 5

• 1 Can you show your header template? (header.php) But you can also try deactivating all plugins to see if the issue is caused by a plugin. – Sally CJ Commented Jul 22, 2019 at 13:50
• I tried with all the deactivated plugins already, that did not change anything. Added the header.php template – uncovery Commented Jul 22, 2019 at 14:46
• Also, not sure why a plugin would affect the archive page header but not the normal post page header. Both of them call the header with get_header(); – uncovery Commented Jul 22, 2019 at 14:58
• 1 Sorry, I forgot to edit my previous comment (which I've deleted). Your code worked fine for me, so I'm guessing the issue might be some custom code in your theme functions or a template part being used on the tag archives. – Sally CJ Commented Jul 22, 2019 at 17:06
• 1 Thanks a lot, will check that. – uncovery Commented Jul 23, 2019 at 1:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

So I found the issue. The twentyseventeen theme has a built-in function in functions.php that does this:

Add custom image sizes attribute to enhance responsive image functionality for post thumbnails

function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size )

it has an if (is_archive()) condition in there. I had to override the function with my own custom function using a higher priority and in that custom one remove the is_archive() condition.