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

Question

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

我可以通过CSS类和媒体查询来做到这一点，但是用户将不得不加载图像的两个版本。 我想避免它。

我决定利用<picture>标签。 我看到两个可能的选择，但没有一个对我有用：

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

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

因此，我需要一些建议以防止在Views中剥离<picture>标记或如何向字段类型添加某种Picture字段 。

Answer 1

Drupal 8附带的Picture模块允许您为图像字段指定到您的图像样式的映射。 图片模块默认情况下未启用。 启用它之后，您可以选择要在某个视口或最小宽度下选择的图像样式。 这些设置在主题内设置。

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