Change "srcset" to "data-srcset" in Drupal 8 - drupal

Question

I want to change the attribute "srcset" to "data-srcset" and "srt" to "data-srt" in Drupal 8 responsive images and i didn't find a solution in hours.
Any ideas?
Thanks.
:-) AK

Answer 1

Copy responsive-image.html.twig file to your theme
Then use the without twig filter over the {{ source_attributes }}. Documentation.
Add data-srcset="{{ source_attributes.srcset }} to render the srcset in the attribute you choose, data-srcset in this case
Your modifications must look like this <source{{ source_attributes|without('srcset') }} data-srcset="{{ source_attributes.srcset }}"/>

Answer 2

I ended up with this solution in THEME.theme
for normal images:
function THEME_preprocess_image(&$variables) {
$variables['attributes']['data-src'] = $variables['attributes']['src'];
$variables['attributes']['src'] = '';
}
and for responsive images:
function THEME_preprocess_responsive_image(&$variables) {
$variables['img_element']['#attributes']['data-srcset'] = $variables['img_element']['#attributes']['srcset'];
$variables['img_element']['#attributes']['srcset'] = '';
}

Answer 3

The preprocess function in THEME.theme is the right way forward. Here's a refinement of the code posted so far:
/**
* Implements template_preprocess_responsive_image().
* #see core/themes/stable/templates/field/responsive-image.html.twig
*/
function THEME_preprocess_responsive_image(&$variables) {
// Loop through the sources in case there's more than one source for this image
foreach ($variables['sources'] as $source) {
// Get the original srcset for each source
$original_srcset = $source->offsetGet('srcset')->value();
// Assign it to a new attribute called 'data-srcset'
$source->offsetSet('data-srcset', $original_srcset);
// Unset the original srcset
$source->offsetSet('srcset', NULL);
}
}