0

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.com/wp-content/uploads/2019/07/4H8A5933.jpg" 
class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" 
alt="" 
srcset="https://hongkong-rocks.com/wp-content/uploads/2019/07/4H8A5933.jpg 1280w, https://hongkong-rocks.com/wp-content/uploads/2019/07/4H8A5933-300x200.jpg 300w, https://hongkong-rocks.com/wp-content/uploads/2019/07/4H8A5933-768x512.jpg 768w, https://hongkong-rocks.com/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.com/wp-content/uploads/2019/07/4H8A5933.jpg" 
class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" 
alt="" 
srcset="https://hongkong-rocks.com/wp-content/uploads/2019/07/4H8A5933.jpg 1280w, https://hongkong-rocks.com/wp-content/uploads/2019/07/4H8A5933-300x200.jpg 300w, https://hongkong-rocks.com/wp-content/uploads/2019/07/4H8A5933-768x512.jpg 768w, https://hongkong-rocks.com/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.com/tag/mutant-monster/ and the way the post featured image looks like here: https://hongkong-rocks.com/2019/07/20/mutant-monster-2/

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

  • 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 Jul 22 at 13:50
  • I tried with all the deactivated plugins already, that did not change anything. Added the header.php template – uncovery Jul 22 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 Jul 22 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 Jul 22 at 17:06
  • 1
    Thanks a lot, will check that. – uncovery Jul 23 at 1:08
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.