wp_get_attachment_image(get_sub_field('hero_image'), 'full');
This will output the entire img tag w/ the srcset, so you do not need to include the img in your template.
<div class="wrapper">
<div class="wrapper2">
<?php echo wp_get_attachment_image(get_sub_field('hero_image'), 'full'); ?> </div>
</div>
If you need to add a class to the img, you can pass an array into the function (see: https://codex.wordpress.org/Function_Reference/wp_get_attachment_image).
<?php echo wp_get_attachment_image(get_sub_field('hero_image'), 'full', 0, array('class' => 'bilder2')); ?>
I think it would be possible to parse the HTML from the editor on load and replace the image tag with one that includes srcset, but that seems like a poor solution. In addition to being a pain to code, you probably don’t want a preg_replace running every page load on every WYSIWYG field.
Hopefully ACF issues an update that will start including srcset in img tags when they are added to the WYSIWYG editor on the admin side.
Regarding your snippet above, I would return the image ID instead of array whenever possible. Again, per Joe McGill’s recommendation, it will be faster. Not the end of the world, but if possible might as well speed it up.
This isn’t a catch all way — still requires editing your template and potentially your fields. But the real solution is much simpler than the function I was previously using. Use ID as the return type on your images:
<?php echo wp_get_attachment_image(get_sub_field('image'), 'full'); ?>
(h/t Joe McGill for pointing me in the right direction.)
I have been using a function that bridged ACF and the RICG Responsive Images plugin. I went ahead and adapted that to WP 4.4.
function _acf_ricg_image($image, $alt='', $class = '', $size='full') {
if (!empty($image)) {
if (!$alt) {
$alt = $image['alt'];
}
$url = $image['url'];
if ($size) {
if (isset($image['sizes'][$size])) {
$url = $image['sizes'][$size];
}
}
if (function_exists('wp_get_attachment_image_srcset')) {
$img = '<img src="'. $url . '" srcset="' . wp_get_attachment_image_srcset( $image['id'], $size ) . '" alt="' . $alt . '"';
} else {
$img = '<img src="'. $url . '" alt="' . $alt . '"';
}
if ($class) {
$img .= ' class="' . $class . '"';
}
$img .= ' />';
return $img;
}
}
Then in my template I use:
<?php if (get_field('slide_image')) { echo _acf_ricg_image( get_field('slide_image')); } ?>
There has to be a better way to do it, but I haven’t had time to look into it yet. Will update this thread if I come up with something better.
