三月 22, 2019 | 前端與Vue

[Drupal 8 教學] 裁切不同尺寸有什麼問題!放心交給 Responsive Image !

按照設計圖做一做,發現為什麼手機版的圖片比例很奇怪呢?明明是照著比例縮下去的,仔細看看才發現,原來手機版的圖片比例跟桌機版是不同的。這下好了,該怎麼辦?

按照設計圖做一做,發現為什麼手機版的圖片比例很奇怪呢?明明是照著比例縮下去的,仔細看看才發現,原來手機版的圖片比例跟桌機版是不同的。這下好了,該怎麼辦?

如果你是使用 Drupal 7,不用擔心傳送門在這 想要讓圖片也有RWD,難道只能寫前台嗎?那可不一定~。Drupal 8 呢?Drupal 8 很棒的將 Drupal 7 用到的兩個模組內建了,這個模組就是 Responsive Image

<br />

Step.01 開啟 Responsive Image 模組

Responsive Image 模組,只要在 擴展 中找到打勾並點擊安裝就完成了!

之後你就可以在 設定 > 媒體 > Responsive Image style 找到設定。點擊新增後,你會看到 分界點 (Breakpoint) 群組,在這裡你可以定義自己主題會用到的 Breakpoint。

所以接下來,要來設定主題要用的 Breakpoint 哩!

<br />

Step.02 建立 mytheme.breakpoints.yml

mytheme.breakpoints.yml 加在你的 custom theme資料夾內,如圖範例的是 mytheme。mytheme 請替換成你的資料夾名稱,記得名稱都要取相同。所以右邊 mytheme.breakpoints.yml檔案,你會看到 mytheme 又出現了!

依照上圖,你可以自訂任何這個專案會使用到的斷點。在此,我們設定了三個斷點,是 0 , 768 跟1200,或者也可以這樣設:

(min-width: 560px) and (max-width: 850px)

更多的設定,請參考這篇文章:Working with breakpoints in Drupal 8

<br />

Step.03 新增 Responsive image styles

mytheme.breakpoints.yml 檔案設定好了,就可以來新增 Responsive image styles。首先:選擇自己在 mytheme.info.yml 裡面設定的 name 名稱唷,例如:

mytheme.info.yml

所以在分界點的地方,請選擇你定義的名稱,如圖是 custom theme。然後你就會看到我們剛剛在文件內設定的 3 個斷點。在這部分就可以依照自己的需求,挑選要使用的斷點摟!不使用的話,就是依照原圖片裁切的設定唷!

<br />

結論

Drupal 8 的 Responsive Image 與 breakpoints 變成是內建的功能,在設定上簡化許多。步驟極為簡單:

  • 啟用 Responsive Image 模組
  • 設定 breakpoints.yml檔案,把所有需要的斷點加上去
  • 針對特定圖片尺寸,設定斷點

要注意在設定文件時看清楚 檔案名稱 是否有設定正確,yml檔案的名稱不一定會與你在設定 Responsive Image 時點斷點會看到的名稱相同喔,請先看清楚自己設定的名稱!

另外,因為此斷點是針對圖片尺寸的,如果有兩個區塊用到同個圖片尺寸設定,那就會吃到相同的斷點設定唷!