[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 時點斷點會看到的名稱相同喔，請先看清楚自己設定的名稱！

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