調整 熱門文章的縮圖大小 文章列表

調整 熱門文章的縮圖大小


要如何? 調整 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 屬性後,所有熱門文章的圖像就會以原來的尺寸輸出

留言 ( 4 )

  1. ru感覺幾百年 沒登這裡了 午安 灰鴿~ 給灰鴿加油打氣一下!^_^

    回覆刪除
    回覆
    1. [Qz::1407821214-1316314421.gif]稀客來訪唷[Qz::1548831517-1749237829.gif]

      刪除
  2. 星之在問 您跑去哪裡了? 休格了嗎? 等等疑問
    我說您在某個格子裡 研究語法 你好久沒回來痞哥了 大家都很想你捏! 哈哈哈

    回覆刪除
    回覆
    1. 現在上P客去,又沒什麼事好做[Qz::1520435815-2432633312.png]我又不習慣到處串門子[Qz::1510791640-1775744022.gif]
      差不多也該收攤了[Qz::1518409188-3329416601.gif]

      刪除

張貼留言




           

預 覽 視 窗

新舊排序 :

    © Copyright 2021 Design By 灰鴿   技術堤供 : Blogger