Skip to content

Modern Image Formats - post thumbnail dont follow picture element #2178

Closed

Description

@1ucay

No others plugins installed, only Modern Image Formats with settings

AVIF - Generate images in this format
✓ Also generate fallback images in the original upload format
✓ Generate all fallback image sizes including custom sizes
✓ Use < picture > Element (experimental)

in php call

<?php the_post_thumbnail( 'medium_large' ); ?>

<img width="768" height="768" src="DOMAIN/uploads/2025/09/Copilot_20250725_003154-768x768-jpg.avif" class="attachment-medium_large size-medium_large wp-post-image" alt="Deserunt reprehenderit minim" decoding="async" fetchpriority="high" srcset="DOMAIN/uploads/2025/09/Copilot_20250725_003154-768x768-jpg.avif 768w, DOMAIN/uploads/2025/09/Copilot_20250725_003154-512x512-jpg.avif 512w, DOMAIN/uploads/2025/09/Copilot_20250725_003154-163x163-jpg.avif 163w, DOMAIN/uploads/2025/09/Copilot_20250725_003154-350x350-jpg.avif 350w, DOMAIN/uploads/2025/09/Copilot_20250725_003154-292x292-jpg.avif 292w, DOMAIN/uploads/2025/09/Copilot_20250725_003154-jpg.avif 1024w" sizes="(max-width: 768px) 100vw, 768px" />

Shouldn't it also be in the picture element with a source tag?
Thank you

Activity

  1. moved this to Not Started/Backlog 📆 in WP Performance Ongoingon Sep 16, 2025
  2. 1ucay commented on Sep 16, 2025

    @1ucay
    Author

    My fix

    <?php
    
    if ( ! defined( 'ABSPATH' ) ) {
        die( 'Cannot access pages directly.' );
    }
    
    /* Fix Modern Image Formats with post_thumbnail */
    add_action( 'plugins_loaded', static function() {
        if ( function_exists( 'webp_uploads_is_picture_element_enabled' ) ) {
            remove_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10 );
        }
    } );
    
    add_filter( 'wp_get_attachment_image', 'core_wp_get_attachment_image', 20, 5 );
    function core_wp_get_attachment_image( $html, $attachment_id, $size, $icon, $attr ) {
    
        if ( is_admin() || empty( $html ) )
            return $html;
    
        $html = apply_filters( 'wp_content_img_tag', $html, 'the_content', $attachment_id );
    
        return $html;
    }
    
    ?>
    
  3. b1ink0 commented on Sep 17, 2025

    @b1ink0
    Contributor

    I was able to replicate this bug. It seems the issue is with the webp_uploads_update_featured_image() function hooked to post_thumbnail_html, which only calls webp_uploads_img_tag_update_mime_type() and does not conditionally call webp_uploads_wrap_image_in_picture() based on webp_uploads_is_picture_element_enabled().

    And, right now we are using the post_thumbnail_html filter for the featured image, but we could use the wp_get_attachment_image filter as the bug reporter suggested. However, this filter would also include any image echoed using the wp_get_attachment_image() function, which is used for featured images and is also typically used by other plugins. So, I'm not sure whether the Modern Image Formats plugin should also handle those images.

    Also, while trying to replicate this bug, I noticed that (Using Twenty Twenty-One) Image Widgets or widget blocks containing the Image block and Gallery block don’t get their sources replaced with modern image formats because the webp_uploads_wrap_image_in_picture() function only allows the the_content context, while widgets send the widget_block_content context. @adamsilverstein, is this intentional?

  4. 1ucay commented on Sep 17, 2025

    @1ucay
    Author

    Thanks for your answer. How about a new checkbox "experimental use of wp_get_attachment_image()" in the settings? If users don't report any issues in future, it could be used in the plugin itself as the default.

  5. adamsilverstein commented on Sep 19, 2025

    @adamsilverstein
    Member

    the Image block and Gallery block don’t get their sources replaced with modern image formats because the webp_uploads_wrap_image_in_picture() function only allows the the_content context, while widgets send the widget_block_content context. @adamsilverstein, is this intentional?

    I don't think so - seems like and oversight. it should be fine to enable for the widget context. I think we added that conditional to avoid replacing images in places like an the RSS feed where modern formats might not be accepted.

    It seems the issue is with the webp_uploads_update_featured_image() function hooked to post_thumbnail_html, which only calls webp_uploads_img_tag_update_mime_type() and does not conditionally call webp_uploads_wrap_image_in_picture() based on webp_uploads_is_picture_element_enabled().

    @b1ink0 - can you try adding that logic to webp_uploads_update_featured_image in a PR for testing? We need to make sure there aren't unexpected side effects. If everything works as expected we can change this.

    How about a new checkbox "experimental use of wp_get_attachment_image()" in the settings? If users don't report any issues in future, it could be used in the plugin itself as the default.

    @1ucay thanks for the bug report! Adding another UI controlled option in settings feels like it might confuse casual users, let's see how this works and maybe returning a picture element should just be the default. It's certainly what you expected.

    We can also consider a hook that would enable developers to control the option. Users already have a UI option to turn off the picture element feature.

  6. b1ink0 commented on Sep 19, 2025

    @b1ink0
    Contributor

    @adamsilverstein created a draft PR to test side effects (#2179). In my testing with the TT5 theme, it did not affect the layout and correctly added the <picture> element for the featured image.

  7. adamsilverstein commented on Sep 19, 2025

    @adamsilverstein
    Member

    That looks great @b1ink0, thanks! I will try to spend some time testing further soon.

    @1ucay can you test the PR (#2179) to verify it resolves your issue?

  8. 1ucay commented on Sep 22, 2025

    @1ucay
    Author

    Dear all,
    yes with PR #2179 working ok 👍 Thank you

  9. moved this from Not Started/Backlog 📆 to Done 😃 in WP Performance Ongoingon Sep 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] BugAn existing feature is broken

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions