0

I have this line of code :

    $out .= get_the_post_thumbnail('', '', array( 'alt' =>
    the_title_attribute (array('echo' => 0) ), 'class' =>
    'img-responsive', 'srcset' => get_the_post_thumbnail_url( "xs" ) ) );

Which is wrong (in respect to the srcset attribute implementation) I'm trying to add srcset/sizes to this, and I'm sure I could do it the easy way and just do as I would normally and add all of the sizes/image sizes manually but this would create several unnecessary lines of code and after doing some research I've come across functions like

  • wp_calculate_image_sizes();
  • wp_get_attachment_image_srcset();
  • wp_get_attachment_image_sizes();
  • wp_add_image_srcset_and_sizes();

And I believe they would be better to use but after doing some research I haven't been able to find a conclusive way of implementing them, the furthest I've gotten is to see the srcset attribute appear but having empty quotes.

I've also seen someone mention that if the uploaded image sizes don't have an identical aspect ratio as the original image that none of these functions will work. If anyone has any example/advice I could refer to for adding srcset an ajax-served image, I would be very greatful.

  • I believe the ajax component of this question is a red herring, you'd have the same problem if the code was on the homepage. "How do I add srcset to get_the_post_thumbnail?" would be better – Tom J Nowell Apr 22 '18 at 2:51
1

wp_get_attachment_image_srcset is the key here:

wp_get_attachment_image_srcset( int $attachment_id, array|string $size = 'medium', array $image_meta = null )

I believe the missing information you lack, is that post thumbnails are actually an attachment ID. In combination with get_post_thumbnail_id you should be able to generate srcset values.

But also keep in mind that while googling, every question I found was asking how to remove srcset not add. Apparently what you wanted was actually added in WP 4.4. The answer might actually be to not set srcset at all, and let WP set it for you.

  • Thanks for your advice, I found a built in function that was add theme support for responsive images. Ultimately I might have to create my own function though – Joshua Wilkeson Apr 22 '18 at 23:08
  • @JoshuaWilkeson other people might come across this question and see your comment, and wonder what that function was so that they can solve their problem too. What was that function? – Tom J Nowell Apr 23 '18 at 0:34
0

I ended up using a function that I found on codepen and modifying it slightly. Edit: It's also worth noting that wp_get_attachment_image_src() returned 0 for all of the image widths so I created my own array of widths and assigned them that way. (Wish I could find a use for these neat built-in methods)

function srcset_post_thumbnail($defaultSize = 'm')
{
    $thumbnailSizes = [
        'xs',
        's',
        'm',
        'l',
        'xl'
    ];
    $html = '<img sizes="';
    $html .= '(max-width: 30em) 100vw, ';
    $html .= '(max-width: 50em) 50vw, ';
    $html .= 'calc(33vw - 100px)" ';
    $html .= 'srcset="';
    $thumb_id = get_post_thumbnail_id();
    for ($i = 0; $i < count($thumbnailSizes); $i++) {
        $thumb = wp_get_attachment_image_src($thumb_id, $thumbnailSizes[$i], true);

        $url = $thumb[0];
        $width = $thumb[1];

        $html .= $url . ' ' . $width . 'w';

        if ($i < count($thumbnailSizes) - 1) {
            $html .= ', ';
        }
    }
    $alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
    $thumbMedium = wp_get_attachment_image_src($thumb_id, $defaultSize, true);
    $html .= '" ';
    $html .= 'src="' . $thumbMedium[0] . '" alt="' . $alt . '">';
    return $html;
}

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.