将Drupal 8中的"srcset“更改为"data-srcset”。

Question

我想将Drupal 8响应图像中的属性"srcset“更改为"data-srcset”，将"srt“更改为"data-srt”，而且我在几个小时内没有找到解决方案。

有什么想法吗？

谢谢。

-) AK

Answer 1

1. 将responsive-image.html.twig文件复制到主题
2. 然后在without上使用{{ source_attributes }}小枝过滤器。文档。
3. 添加data-srcset="{{ source_attributes.srcset }}以在所选属性中呈现srcset，在本例中为data-srcset
4. 您的修改必须类似于这个<source{{ source_attributes|without('srcset') }} data-srcset="{{ source_attributes.srcset }}"/>

Answer 2

我在THEME.theme中得到了这个解决方案

对于正常图像：

  function THEME_preprocess_image(&$variables) {
    $variables['attributes']['data-src'] = $variables['attributes']['src'];
    $variables['attributes']['src'] = '';
  }

对于有反应的图像：

  function THEME_preprocess_responsive_image(&$variables) {
    $variables['img_element']['#attributes']['data-srcset'] = $variables['img_element']['#attributes']['srcset'];
    $variables['img_element']['#attributes']['srcset'] = '';
  }

Answer 3

THEME.theme中的预处理功能是正确的发展方向。下面是到目前为止发布的代码的改进：

/**
 * 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);
  }
}