如何在Drupal 8中使用<picture>标签

Question

我需要在 Drupal 8 网站上显示两个版本的图片 - 一个用于“宽”视口，另一个用于“narow”。

我可以通过CSS类和媒体查询来完成，但用户必须加载图像的两个版本。我想避免它。

我决定利用<picture>代码。我看到两种可能的选择，但没有一种适合我：

1）我试图定义包含两个图像字段（我的图像的两个版本）的内容类型（ banner ）。然后在相应的视图中，我将一些字段重写为“手动”插入<picture>标记。不幸的是，似乎Drupal中的Views剥离了这个标签。

2）有“响应式图像”模块，但它处理的是以不同尺寸提供的相同源图像。这不是我的问题：我需要两个不同的图像。

因此，我需要一些建议，如何防止在视图中剥离<picture>标记或如何将某种图片字段添加到字段类型。

Answer 1

Drupal 8附带的Picture模块允许您指定图像字段的图像样式的映射。默认情况下不启用Picture模块。启用后，您可以选择在特定视口或最小宽度处选择哪种图像样式。这些设置在您的主题中设置。

添加新的图片格式后，可以在所选内容类型的“管理显示”标签中找到，以替代图片格式。