Making images in post block more responsive with srcset

  • Resolved jb01

    (@jb01)


    4 years, 6 months ago

    I noticed the “post” block outputs feature images without a srcset which was less than ideal. I’ve got a suggested update to this file:
    /public_html/wp-content/plugins/otter-blocks/vendor/codeinwp/gutenberg-blocks/inc/render/class-posts-grid-block.php
    Around line 162:

    before:
    $list_items_markup .= sprintf(
    ‘<div class=”wp-block-themeisle-blocks-posts-grid-post-image”>%3$s</div>’,
    esc_url( get_the_permalink( $id ) ),
    esc_url( $thumbnail[0] ),
    esc_html( get_the_title( $id ) )
    );

    after:
    $list_items_markup .= sprintf(
    ‘<div class=”wp-block-themeisle-blocks-posts-grid-post-image”>%2$s</div>’,
    esc_url( get_the_permalink( $id ) ),
    wp_get_attachment_image( get_post_thumbnail_id( $id ), $size, false, [“alt”=>esc_html( get_the_title( $id ))] ),
    );

    If you could integrate that into the block, then next time it is updated, it won’t overwrite my customizations ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @jb01,

    Thank you for the idea. We check and implement it in next release. ??

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @jb01,

    I was on this task and noticed some issues with this approach. First, let’s recap why it is the way it currently is:

    We started out by showing full size images in Posts Block but used complained that a small 200×200 (or even less in some cases) spot for the Featured Image was loading full-size images. Sounds fair so we reduced it to call Thumbnail (and gave the user an option if they want to use bigger images).

    Now, with using srcset, it’s loading high res images even when the square is small, because screensize is large. So it gets back to us in the same problem where the browser has to fetch full size image even when the display of it is below few hundred pixels.

    Let me know your thoughts.

    Thread Starter jb01

    (@jb01)

    That’s not the way srcset works. You put the smaller image size in the “src” attribute. Then the browser will decide which is the appropriate size from the srcset and load that based on the browser size and amount of space that element takes up. The browser does not load every version within the srcset. You set the rules as to which image will be used at each screen size. It can also better support high density screens (like Retina). This is why it will improve loading time while looking good in different layouts.

    Here’s some sample code of you haven’t done this before – https://flaviocopes.com/html-responsive-images-srcset/

    Hope this helps.

    • This reply was modified 4 years, 4 months ago by jb01.
    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    Hey @jb01,

    We’ve added this to the latest version of the plugin in 1.5.10. Let me know how it works for you. Thank you!

    Thread Starter jb01

    (@jb01)

    Looks good, thanks very much! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Making images in post block more responsive with srcset’ is closed to new replies.