如何使用 <picture> 標簽在Drupal 8

Question

我需要在Drupal 8網站上顯示圖像的兩個版本 -一個用於“寬”視口，另一個用於“ narow”。

我可以通過CSS類和媒體查詢來做到這一點，但是用戶將不得不加載圖像的兩個版本。 我想避免它。

我決定利用<picture>標簽。 我看到兩個可能的選擇，但沒有一個對我有用：

1）我試圖定義內容類型（ banner ），其中包含兩個圖像字段（我的圖像的兩個版本）。 然后在適當的視圖中，我重寫了一些字段以“手動”插入<picture>標簽。 不幸的是，Drupal中的Views似乎剝奪了這個標簽。

2）有“ 響應圖像 ”模塊，但它處理的是不同尺寸的相同源圖像。 這不是我的問題：我需要兩個不同的圖像。

因此，我需要一些建議以防止在Views中剝離<picture>標記或如何向字段類型添加某種Picture字段 。

Answer 1

Drupal 8附帶的Picture模塊允許您為圖像字段指定到您的圖像樣式的映射。 圖片模塊默認情況下未啟用。 啟用它之后，您可以選擇要在某個視口或最小寬度下選擇的圖像樣式。 這些設置在主題內設置。

添加新的圖片格式后，可以在所選內容類型的“管理顯示”標簽中找到該格式，以替代圖片格式。