調整 熱門文章的縮圖大小
在調整 熱門文章的縮略圖之前,我們先來分析一下, Blogger 的 Image
圖像有哪些特徵、參數、數據可用。
以下 : 本文所要探討的是,應用在 Blogger HTML 主題範本裡的圖像運算語法,這種圖像運算式是 Blogger 語言專用的運算語法,可讓您將特徵應用於Google圖像的URL,例如重新定義大小和比例,或使其具有響應性。
假如你有興趣的話,可以再繼續看下去 ... 唷
參數 featuredImage
參數 isResizable
接下來要介紹的是 ~ resizeImage 和 sourceSet 這兩個運算符
調整圖片的大小 ~ resizeImage( image, number, string ) OR resizeImage( image, array[number], string)
響應式圖像的運算符 sourceSet
img 的
在網頁會輸出如下的 HTML 碼 ( 熱門文章的縮略圖 )
要開始進入我們今天的主題了 ~
當您在 Blogger 博客中添加熱門文章小部件時,縮略圖大小會被限制為默認值72×72px。
即使在應用 CSS 後,此大小在您的博客中看起來可能很小,或是模糊了。
在不使用 JavaScript 的情況下更改熱門帖子小工具的縮略圖大小
或是在右上角 ~ 按下跳至小工具
你將找到
在這2個標記之間 ~ 按Ctrl + F >> 查找 72px
</b:widget>
Bingo 找到了...
假如沒找到 72px,也不用灰心,還有其他方法可以解決。
<b:widget cond='data:view.isSingleItem' type='PopularPosts' version='2' id='PopularPosts1' locked='true' title='熱門文章' visible='true'>
....
....
在結束標記之前,插入以下的 Html 碼
</b:widget>
插入後會像這樣
<b:widget cond='data:view.isSingleItem' type='PopularPosts' version='2' id='PopularPosts1' locked='true' title='熱門文章' visible='true'>
....
....
最後按儲存 ~ OK
另外 ~ 也可以用 Javascript 解決
假如你已安裝了 ~ Jquery 函數庫,只要 一行 程式碼就搞定
刪除、 srcset 屬性後,所有熱門文章的圖像就會以原來的尺寸輸出
以下 : 本文所要探討的是,應用在 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種寫法
resizeImage Array[72,144,300] 會產生 3 張不同尺寸的圖片,這看來好像用不到 ...
這兩個運算符,都有2種寫法
- 第一個參數是圖片的網址
- 第二個參數是一個數字,它定義圖像的新尺寸
-
第三個參數是圖像的比例,可有可無,沒設定等於 == "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:
"1:1", sourceSizes: "72px" }' name='responsiveImage'/>
</a>
</div>
將 72 改成你所需要的尺寸,最後按下儲存,收工了 ~
將 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: "1:1", sourceSizes: "280px"}' 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:
"1:1", sourceSizes: "280px"}'
name='responsiveImage'/>
</a>
</div>
</b:includable>
</b:widget>最後按儲存 ~ OK
另外 ~ 也可以用 Javascript 解決
假如你已安裝了 ~ Jquery 函數庫,只要 一行 程式碼就搞定
<script> $('.PopularPosts article .item-thumbnail
img').removeAttr('srcset'); </script>
刪除、 srcset 屬性後,所有熱門文章的圖像就會以原來的尺寸輸出
ru感覺幾百年 沒登這裡了 午安 灰鴿~ 給灰鴿加油打氣一下!^_^
回覆刪除[Qz::1407821214-1316314421.gif]稀客來訪唷[Qz::1548831517-1749237829.gif]
刪除星之在問 您跑去哪裡了? 休格了嗎? 等等疑問
回覆刪除我說您在某個格子裡 研究語法 你好久沒回來痞哥了 大家都很想你捏! 哈哈哈
現在上P客去,又沒什麼事好做[Qz::1520435815-2432633312.png]我又不習慣到處串門子[Qz::1510791640-1775744022.gif]
刪除差不多也該收攤了[Qz::1518409188-3329416601.gif]