the_content loading=”lazy”

  • xu wu

    (@wuxu)


    11 months, 4 weeks ago

    Lazy-loading images in 5.5

    The link above mentioned that the loading=”lazy” attribute would be added to all images output in the content. However, I am encountering a strange situation.

    1. I have added three custom post types: instruments, resources, and news, and I believe they all have the same settings.

    2. All three post types use the the_content() function to output the body in the template files.

    3. On the detail pages for resources and news, images are automatically added with loading=”lazy”; however, the articles for instruments do not have this tag! Does anyone know how to troubleshoot the settings for instruments? Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Sandeep Dahiya

    (@sandeepdahiya)

    11 months, 4 weeks ago

    Hi @wuxu

    If the the_content() function is being used for the ‘instruments’ post type as well, then there might be a filter affecting it. You can check by using: echo apply_filters( 'the_content', get_the_content() ); If the images then have the loading="lazy" attribute, it means the necessary filter is working, and there’s likely another filter interfering with lazy loading for images.

    Also, if you’re loading images using gallery shortcodes, make sure the shortcode isn’t executed before or outside the the_content filter — otherwise, the loading="lazy" attribute won’t be applied.

    Regards

    Thread Starter xu wu

    (@wuxu)

    11 months, 4 weeks ago

    HI @sandeepdahiya

    Thank you for your reply. I added the following code in the single-instruments.php template file.

    if(current_user_can('manage_options')) {
    echo apply_filters( 'the_content', get_the_content() );
    }
    ?>

    It output the full text of the article again, but when I checked the images of several articles, their img tags all started with the following code.

    instruments post type:
    <img decoding="async" aria-describedby="caption-attachment-9814" class="wp-image-9814" src="......sizes="(max-width: 499px) 100vw, 499px">
    resources post type:
    <img loading="lazy" decoding="async" aria-describedby="caption-attachment-9369" class="wp-image-9369" src=".....sizes="auto, (max-width: 683px) 100vw, 683px">

    Additionally, I found that the images at the end of the code for articles of the resources type have ‘auto’ added, while those for instruments do not.

    Sandeep Dahiya

    (@sandeepdahiya)

    11 months, 4 weeks ago

    The absence of loading=”lazy” means that wp_filter_content_tags() is not being applied properly for the ‘instrument’ post types, despite using the_content(). And sizes=”auto” is also added by WordPress’s responsive image functions — it’s missing, likely for the same reason: wp_filter_content_tags() not running.

    The most likely reason that I could think of is that a filter altering or modifying the_content(). Check your custom code files, plugin or theme files and you might spot something like this: remove_filter( 'the_content', 'wp_filter_content_tags' ) This can prevent WordPress from adding loading =”lazy” and sizes =”auto” attributes.

    Thread Starter xu wu

    (@wuxu)

    11 months, 4 weeks ago

    Hi @sandeepdahiya

    I checked my theme files, and there is no code as you mentioned. Moreover, I printed all the filters and actions in the backend using the code and found the following relevant items.

    filter,Priority, path, status

    Filter NAME,Priority, path, status

    the_content,8,apply_block_hooks_to_content_from_post_object,/www/wwwroot/www.XXXX.com/wp-includes/blocks.php:1191,TRUE
    the_content,8,WP_Embed->run_shortcode,/www/wwwroot/www.XXXX.com/wp-includes/class-wp-embed.php:62,TRUE
    the_content,8,WP_Embed->autoembed,/www/wwwroot/www.XXXX.com/wp-includes/class-wp-embed.php:442,TRUE
    the_content,9,do_blocks,/www/wwwroot/www.XXXX.com/wp-includes/blocks.php:2405,TRUE
    the_content,10,wptexturize,/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:37,TRUE
    the_content,10,wpautop,/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:446,TRUE
    the_content,10,shortcode_unautop,/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:824,TRUE
    the_content,10,prepend_attachment,/www/wwwroot/www.XXXX.com/wp-includes/post-template.php:1723,TRUE
    the_content,10,wp_replace_insecure_home_url,/www/wwwroot/www.XXXX.com/wp-includes/https-migration.php:51,TRUE
    the_content,10,RankMath\Frontend_SEO_Score->insert_score,/www/wwwroot/www.XXXX.com/wp-content/plugins/seo-by-rank-math/includes/class-frontend-seo-score.php:69,TRUE
    the_content,10,wrap_tables_with_div,/www/wwwroot/www.XXXX.com/wp-content/themes/XXXXX/functions.php:571,TRUE
    the_content,11,capital_P_dangit,/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:5681,TRUE
    the_content,11,do_shortcode,/www/wwwroot/www.XXXX.com/wp-includes/shortcodes.php:243,TRUE
    the_content,12,wp_filter_content_tags,/www/wwwroot/www.XXXX.com/wp-includes/media.php:1866,TRUE
    the_content,20,convert_smilies,/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:3474,TRUE
    the_content,1000,TRP_Translation_Render->wrap_with_post_id,/www/wwwroot/www.XXXX.com/wp-content/plugins/translatepress-multilingual/includes/class-translation-render.php:2145,TRUE
    acf_the_content,10,wp_filter_content_tags/www/wwwroot/www.XXXX.com/wp-includes/media.php:1866,true
    acf_the_content,8,WP_Embed->run_shortcode/www/wwwroot/www.XXXX.com/wp-includes/class-wp-embed.php:62,true
    acf_the_content,8,WP_Embed->autoembed/www/wwwroot/www.XXXX.com/wp-includes/class-wp-embed.php:442,true
    acf_the_content,10,wptexturize/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:37,true
    acf_the_content,10,wpautop/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:446,true
    acf_the_content,10,shortcode_unautop/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:824,true
    acf_the_content,10,wp_filter_content_tags/www/wwwroot/www.XXXX.com/wp-includes/media.php:1866,true
    acf_the_content,11,capital_P_dangit/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:5681,true
    acf_the_content,11,do_shortcode/www/wwwroot/www.XXXX.com/wp-includes/shortcodes.php:243,true
    acf_the_content,20,convert_smilies/www/wwwroot/www.XXXX.com/wp-includes/formatting.php:3474,true

    The only time I operated the_content is the_content,10,wrap_tables_with_div,/www/wwwroot/www.XXXX.com/wp-content/themes/XXXXX/functions.php:571,TRUE, it just modified the display of the table. I also tried to log out of the filter, but nothing good changes.
    In addition, the wp_filter_content_tags you mentioned are displayed as true in the_content and ACF_the_content, which is correct, otherwise the article pictures of my two types of articles, resources and news, will not be lazy.

    Sandeep Dahiya

    (@sandeepdahiya)

    11 months, 4 weeks ago

    Hi @wuxu

    If nothing in your filters list is blocking the lazy loading then it may be the case that the WordPress core is intentionally omitting loading=”lazy” on the first few images to improve LCP performance of your website (it was introuced here). You can cross-check this by adding a smaller size image on the bottom of your instrument post/page and see if it has loading=”lazy” property attached to it. If it is there, you can use wp_omit_loading_attr_threshold() to modify this behaviour.

    Thread Starter xu wu

    (@wuxu)

    11 months, 3 weeks ago

    @sandeepdahiya

    Most articles have multiple photos, such as my resources article. If it is the first photo, it will be marked with <img fetchpriority=”high” and will not add a lazy tag. The subsequent pictures will be added with lazy normally.
    In addition, I query the source code and auto size is added on the basis of lazy. Only with lazy can auto size;
    My instruments article is a really weird question, if I find anything new useful information, I will paste it here to share, and thank you for your help!

    Thread Starter xu wu

    (@wuxu)

    10 months, 1 week ago

    Today I compared several different template files, and then I added the following code before the the_content() function. Now the images are correctly assigned the lazy and auto attributes. The strange problem is solved.

    <?php
    get_header();

    //add code
        global $post;
        if ( have_posts() ) {
            while (have_posts())
            { 
                the_post(); 
            }
        }
    //add code

    the_content();
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘the_content loading=”lazy”’ is closed to new replies.