Support

Account

Home Forums Front-end Issues WordPress 4.4 responsive images

Solving

WordPress 4.4 responsive images

  • @tmconnect thank you for your image field code. I’m new to the responsive images + ACF + WordPress party, so it’s been really useful.

    Following the Responsive Images Done Right post, this is what I wanted to achieve:

    <img srcset="computer-area-1440x810.jpg 1440w 2x,
                 computer-area-720x405.jpg 720w,
                 computer-area-480x270.jpg"
         sizes ="(min-width: 45em) 63.1vw",
                 100vw"
         src="computer-area-480x270.jpg"
         alt="Computer area">

    And this is what I cobbled together, using your code as starting point:

    <img srcset="<?php echo $img_srcset; ?>"
         sizes="(min-width: 45em) 63.1vw",
                 100vw"
         src="<?php echo $image['sizes']['small']; ?>"
         alt="<?php echo $image['alt']; ?>">

    And this is what is output:

    <img srcset="http://ysgoltrewen.dev/app/uploads/2016/03/computer-area.jpg 1920w, http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-720x405.jpg 720w, http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-1440x810.jpg 1440w, http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-480x270.jpg 480w"
         sizes="(min-width: 45em) 63.1vw,
                100vw"
         src="http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-480x270.jpg"
         alt="Computer area.">

    It kind of seems to work! Sorry for verbosity but wanted to get it out there to see if this is the right path (though I know it’s a simple use-case and that there’s no device-pixel-ratio in the srcset).

  • Hi Nat,

    I was wondering about something on your solution.. The Lazysizes plugin uses data-srcset to lazy load the images. Since wordpress uses normal srcset, the images are not lazyloaded here. I’m using your code with lazysizes, but my network inspector shows all images are loaded at once. The images are responsive, but are not lazyloaded.

    Is there a way to fix this? would there be a way to string replace the srcset with data-srcset, or is that a bad thing?

    I am using:

        <?php
          $image = get_field('front_page_image');
          $imageID = $image['ID'];
          echo wp_get_attachment_image( $imageID, 'full', false, array( 'class' => 'lazyload image-100p', 'data-sizes' => 'auto' ) );
        ?>

    Which outputs in:
    <img width="3000" height="1931" src="http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2.jpg" class="image-100p lazyautosizes lazyloaded" alt="prent2" data-sizes="auto" srcset="http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2.jpg 3000w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-300x193.jpg 300w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-768x494.jpg 768w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-1024x659.jpg 1024w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-300x193@2x.jpg 600w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-768x494@2x.jpg 1536w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-1024x659@2x.jpg 2048w" sizes="440px">

    dont mind the @2x, as i’m using the wp-retina plugin.

    thanks!

  • But if You set thumbnail size into wp_get_attachment_image, then WordPress not generate srcset and sizes parametrs.

  • Hi @mathieu I have the same issue, did you find a solution for that?

  • This reply has been marked as private.
  • hi @mathieu and @jdaquila
    same problem for me. Have you solved in some way?

Viewing 6 posts - 26 through 31 (of 31 total)

You must be logged in to reply to this topic.