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

Question

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

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

我决定利用@​​987654322@ 标签。我看到了两个可能的选项，但没有一个对我有用：

1) 我试图定义包含两个图像字段（我的图像的 2 个版本）的内容类型（banner）。然后在适当的 View 中，我重写了一些字段以“手动”插入 <picture> 标记。不幸的是，Drupal 中的 Views 似乎去掉了这个标签。

2) 有“Responsive Image”模块，但它处理不同尺寸的相同源图像。这不是我的问题：我需要两张不同的图片。

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

Answer 1

Drupal 8 中包含的图片模块允许​​您为图像字段指定到图像样式的映射。默认情况下不启用图片模块。启用后，您可以选择将在某个视口或最小宽度处选择哪种图像样式。这些设置在您的主题中设置。

添加新的图片格式后，可以在所选内容类型的“管理显示”选项卡中使用它，作为图片格式的替代。