Question

我想在Drupal 8响应式图像中将属性“srcset”更改为“data-srcset”和“srt”更改为“data-srt”，而我几小时内找不到解决方案。

有什么想法吗？

感谢。

:-) AK

Answer 1

将responsive-image.html.twig文件复制到您的主题
然后在without上使用{{ source_attributes }}树枝过滤器。 Documentation。
添加data-srcset="{{ source_attributes.srcset }}以在您选择的属性中呈现srcset，在这种情况下为data-srcset
您的修改必须如下<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);
  }
}

在Drupal 8中将“srcset”更改为“data-srcset”

3 个答案: