Blogger 如何自訂縮圖、封面圖尺寸

很久以前曾寫過「Blogger 封面圖+縮圖 各種呈現方式」，說明如何在首頁顯示文章縮圖，在文章頁顯示封面圖。現在 Blogger 範本提供了非常實用的語法，可直接對縮圖、封面圖進行裁切，調整為任意長寬比例，本篇就來看看如何實作。 不過奇特的是，這麼重要且強大的功能，跟上一篇「Blogger 日期格式化詳解」一樣，Blogger 官方沒有釋出任何公告或說明文件，只有網路流傳的資訊。我猜測原因是，自從 2017 年「Blogger 推出官方 RWD 範本」後，就不希望使用者亂改範本了吧？畢竟許多不熟語法的新手，按著網路水準參差不齊的文章亂改範本，所造成的各種奇怪問題與客訴，責任並不在官方。那麼 Blogger 自此不公開重要語法說明文件，大概是為自己省麻煩吧！ 所以，本站長久以來的原則都是，請「官方 RWD 範本」使用者接受預設效果，沒事別動範本內容。本篇的教學，除非特別註明適用於「官方 RWD 範本」，否則一律以「官方 "非RWD" 範本」為主。同時，請具備基本的 HTML 基本語法知識後，再來閱讀本文。沒有任何語法基礎的使用者，建議交由專業人士處理。 (圖片出處: unsplash.com)

一、參考資料

1. resizeImage Blogger 新增 resizeImage 這個工具函數，可對圖片調整比例、裁切，完整使用語法及參數可參考這篇文章：

• Blogger resizeImage Operator

簡單說明一下操作方式： <img expr:src='resizeImage(data:post.firstImageUrl, 800, "5:3")'/>

• data:post.firstImageUrl → 這是文章的首圖網址
• 800 → 代表設定成 800px 寬
• 5:3 → 代表圖片會裁切成這個長寬比例
• 最重要的一點，經實測結果發現，寬度數值及比例這兩個參數前面，一定要有空格，否則語法無法執行

2. 自訂背景圖 如果將圖片用於背景圖，那麼裁切圖片尺寸的 CSS 語法可參考這個討論串：

• resizeImage parameters

使用以下的 CSS 語法： {background-image:url(<b:eval expr='resizeImage(data:post.firstImageUrl, 800, "5:3")'/>)}

二、改首頁縮圖尺寸

製作首頁文章縮圖的操作可參考「Blogger 封面圖+縮圖 各種呈現方式」→「三、首頁縮圖+文摘」。修改縮圖尺寸之前是利用 CSS 設定，實際上瀏覽器還是要載入原圖尺寸，所以載入時間較久。 現在直接裁切縮圖尺寸的方法為，從原本語法中找到以下字串： <img expr:src='data:post.firstImageUrl'/> 改成下面的語法： <img expr:src='resizeImage(data:post.firstImageUrl, 300, "1:1")'/> 參數修改請參考「一、參考資料」→「1. resizeImage」即可，同時 CSS 也不需再另外設定圖片尺寸了。

三、改文章封面圖尺寸

製作文章頁面封面圖的操作可參考「Blogger 封面圖+縮圖 各種呈現方式」→「二、文章標題前後擺封面圖」。修改縮圖尺寸之前是利用 CSS 設定，實際上瀏覽器還是要載入原圖尺寸，所以載入時間較久。 現在直接裁切縮圖尺寸的方法為，從原本語法中找到以下字串： <img expr:src='data:post.firstImageUrl'/> 改成下面的語法： <img expr:src='resizeImage(data:post.firstImageUrl, 1000, "16:9")'/> 參數修改請參考「一、參考資料」→「1. resizeImage」即可，同時 CSS 也不需再另外設定圖片尺寸了。

四、改熱門文章小工具縮圖尺寸

以前 Blogger 範本中，熱門文章小工具的縮圖標記語法是 data:post.thumbnail，產生的縮圖網址無法被 resizeImage 這個新的語法工具支援。如果你使用的是 Blogger 官方舊範本，建議可以先移除原本的熱門文章小工具，從後台重新新增一個熱門文章小工具，就會產生新的縮圖資料標記 data:post.featuredImage，這樣就能確保成功修改縮圖尺寸。 產生完新的熱門文章小工具後，在範本中找到以下程式碼區間： <b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts'> ... ~ ... </b:widget> 在這個區間中，可找到縮圖相關語法如下： <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>

• 預設縮圖寬度為 72px，改為自己想要的寬度即可
• 預設縮圖長寬比例為 1:1，改為自己想要的比例即可

五、官方 RWD 範本

以上的說明都是針對「官方非 RWD 範本」，如果使用官方 RWD 範本想要調整縮圖尺寸，可直接參考以下兩篇文章：

• Blogger 縮略圖攻略
• 調整熱門文章的縮圖大小

六、處理 RWD 圖片

最後，開頭的參考資料語法中，還有一個工具 sourceSet 可以處理 RWD 圖片，不過我認為意義不大，因為真正的大尺寸圖片、需要 RWD 的圖片都在文章中。而 sourceSet 無法處理網頁上最多、最需要自適應，也就是文章中的圖片，所以不去瞭解這個工具也沒什麼關係。 關於 RWD 圖片我曾寫過「製作 RWD 自適應圖片 讓手機自動載入小圖」可瞭解基本概念，而想要讓 Blogger 文章中的圖片都能改用自適應圖片語法，可直接使用我開發的這個工具即可：

• 自適應 RWD 圖片語法產生器

更多「Blogger 語法」相關文章：