調整 熱門文章的縮圖大小

要如何? 調整 Blogger 的圖像大小尺寸

在調整 熱門文章的縮略圖之前，我們先來分析一下， Blogger 的 Image 圖像有哪些特徵、參數、數據可用。

以下 : 本文所要探討的是，應用在 Blogger HTML 主題範本裡的圖像運算語法，這種圖像運算式是 Blogger 語言專用的運算語法，可讓您將特徵應用於Google圖像的URL，例如重新定義大小和比例，或使其具有響應性。

假如你有興趣的話，可以再繼續看下去 ... 唷

參數 featuredImage

圖片網址

data:post.featuredImage

參數 isResizable

data:post.featuredImage.isResizable 會傳回該圖像是否可調整大小的布爾值（true）或（false）

可否調整大小 蛇麼意思，因通過Blogger，Picasa，GooglePhotos託管的圖像的URL，
和YouTube視頻中的縮略圖（包括縮略圖 maxresdefault.jpg）才具有能與圖像操作機制相容的調整大小功能。

所以、該參數 isResizable 是用來確定數據中所包含的圖像是否有滿足這些條件。

在條件標籤中

<b:if cond='data:post.featuredImage.isResizable'>
  <img expr:src='resizeImage(data:post.featuredImage,380,"1:1")'/>
</b:if>

在三元運算式中

<b:if cond='data:post.featuredImage'>
  <img expr:src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage,520,"4:3") : data:post.featuredImage'/>
</b:if>

接下來要介紹的是 ~ resizeImage 和 sourceSet 這兩個運算符

調整圖片的大小 ~ resizeImage( image, number, string ) OR resizeImage( image, array[number], string)

響應式圖像 ~ sourceSet( image, array[number], string)

這兩個運算符，都有2種寫法

1. 第一個參數是圖片的網址
2. 第二個參數是一個數字，它定義圖像的新尺寸
3. 第三個參數是圖像的比例，可有可無，沒設定等於 == "1:1" ，1比1 = 正方形，
   注意、第一個數字是 width 寬度，第2個數字是 height 高度，高度不能大於寬度。

調整圖片大小的運算符 resizeImage

默認語法

<img expr:src='data:post.featuredImage resizeImage 300 resizeImage "1:1"'/>
OR <img expr:src='data:post.featuredImage resizeImage 300 imageRatio  "1:1"'/>

函數語法

<img expr:src='resizeImage(data:view.featuredImage, 600, "4:3")'/>

默認陣列的寫法

<b:loop values='data:view.featuredImage resizeImage [72,144,300] resizeImage "16:9"' var='image'>

  URL : <img expr:src='data:image.url'/>
  SIZE : <data:image.size/>

</b:loop>

函數陣列的寫法

<b:loop values='resizeImage(data:view.featuredImage, [50,100,300], "16:9")' var='image'>

  URL : <img expr:src='data:image.url'/>
  SIZE : <data:image.size/>

</b:loop>

resizeImage Array[72,144,300] 會產生 3 張不同尺寸的圖片，這看來好像用不到 ...

響應式圖像的運算符 sourceSet   

默認語法

<img expr:src='data:view.featuredImage'
     expr:srcset='data:view.featuredImage sourceSet [200,400,800,1600] sourceSet "3:1"' style='width: 100%;'/>

函數語法

<img expr:src='data:view.featuredImage'
     expr:srcset='sourceSet(data:view.featuredImage, [200,400,800,1600], "3:1")' style='width: 100%;'/>

img 的srcset該屬性、會擇最接近容器尺寸的尺寸。

在網頁會輸出如下的 HTML 碼 ( 熱門文章的縮略圖 )

<img alt="圖片" sizes="72px" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjj1ObYdRO6INVxDok-aDIhAOJ0Z5nR4gy-bTWK5hZDn6C3lmcoOXNTH_oQhgAwuL_9upxUe6BXFdonDfmg9jGr7ymW3gLQ5m7kJNL3ssk3cF9ArnELva5hlLFW5eYIMck86lhRvhw-Tz6oX9AcoxOcbaiM=" srcset="https://blogger.googleusercontent.com/img/proxy/AVvXsEjj1ObYdRO6INVxDok-aDIhAOJ0Z5nR4gy-bTWK5hZDn6C3lmcoOXNTH_oQhgAwuL_9upxUe6BXFdonDfmg9jGr7ymW3gLQ5m7kJNL3ssk3cF9ArnELva5hlLFW5eYIMck86lhRvhw-Tz6oX9AcoxOcbaiM=w72-h72-p-k-no-nu 72w, https://blogger.googleusercontent.com/img/proxy/AVvXsEjj1ObYdRO6INVxDok-aDIhAOJ0Z5nR4gy-bTWK5hZDn6C3lmcoOXNTH_oQhgAwuL_9upxUe6BXFdonDfmg9jGr7ymW3gLQ5m7kJNL3ssk3cF9ArnELva5hlLFW5eYIMck86lhRvhw-Tz6oX9AcoxOcbaiM=w144-h144-p-k-no-nu 144w">

要開始進入我們今天的主題了 ~

當您在 Blogger 博客中添加熱門文章小部件時，縮略圖大小會被限制為默認值72×72px。
即使在應用 CSS 後，此大小在您的博客中看起來可能很小，或是模糊了。

在不使用 JavaScript 的情況下更改熱門帖子小工具的縮略圖大小

轉到 我的主題 >編輯HTML，在代碼區域內的任意位置單擊，然後按Ctrl + F打開 Blogger 搜索框。

鍵入PopularPosts，然後按Enter。在代碼中查找以下部分：

 
或是在右上角 ~ 按下跳至小工具 

 
你將找到  

                    <b:widget cond='data:view.isSingleItem' type='PopularPosts' version='2' id='PopularPosts1' locked='true' title='熱門文章' visible='true'>

在這2個標記之間 ~ 按Ctrl + F  >> 查找 72px

</b:widget>

Bingo 找到了...

<div class='item-thumbnail'>

    <a expr:href='data:post.url'>

      <b:include data='{ image: data:post.featuredImage, imageSizes: [72, 144], imageRatio: &quot;1:1&quot;, sourceSizes: &quot;72px&quot; }' name='responsiveImage'/>

    </a>

  </div>

將 72 改成你所需要的尺寸，最後按下儲存，收工了 ~

假如沒找到 72px，也不用灰心，還有其他方法可以解決。

    
     <b:widget cond='data:view.isSingleItem' type='PopularPosts' version='2' id='PopularPosts1' locked='true' title='熱門文章' visible='true'>

....
....
在結束標記之前，插入以下的 Html 碼
</b:widget>

<b:includable id='snippetedPostThumbnail'>

  <div class='item-thumbnail'>

    <a expr:href='data:post.url'>

      <b:include data='{image: data:post.featuredImage, imageSizes: [280,520], imageRatio: &quot;1:1&quot;, sourceSizes: &quot;280px&quot;}' name='responsiveImage'/>

    </a>

  </div>

</b:includable>

插入後會像這樣

   <b:widget cond='data:view.isSingleItem' type='PopularPosts' version='2' id='PopularPosts1' locked='true' title='熱門文章' visible='true'>
....
....

 <b:include data='post' name='postFooterJumpLink'/>

      </div>

        </b:includable>

 <b:includable id='snippetedPostThumbnail'>

  <div class='item-thumbnail'>

    <a expr:href='data:post.url'>

      <b:include data='{image: data:post.featuredImage, imageSizes: [280,520], imageRatio: &quot;1:1&quot;, sourceSizes: &quot;280px&quot;}' name='responsiveImage'/>

    </a>

  </div>

</b:includable>

</b:widget>

最後按儲存 ~ OK



另外 ~ 也可以用 Javascript 解決

假如你已安裝了 ~ Jquery 函數庫，只要 一行 程式碼就搞定

<script> $('.PopularPosts article .item-thumbnail img').removeAttr('srcset'); </script>

刪除、 srcset 屬性後，所有熱門文章的圖像就會以原來的尺寸輸出