2012年7月1日 星期日

[小工具]Blogger 熱門文章+任意尺寸縮圖__兼談圖示製作技巧

[小工具]Blogger 熱門文章+任意尺寸縮圖__兼談圖示製作技巧

Wayne Fu 0 A+

(Pic from: psdgraphics.com, dreamstime.com, tubaba.com)
2016.8.15 公告:已推出 V2 版本,請前往這篇「Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸」。

Blogger 內建的熱門文章小工具,附帶了一個美觀的顯示縮圖功能,只要文章中有插入任何圖片的話,Blogger 會抓取第一張圖片轉換為縮圖。不過這個小工具的縮圖功能還是有一些限制,例如──

1. 從 Blogger 上傳或是 Picasa 圖床的縮圖可以正常顯示,以外的圖床則無法 100% 保證全部顯示
2. 縮圖的尺寸固定為寬 72px,長方形的圖通常會被裁切成正方形,導致圖案不完整。
3. 文章中沒有任何圖片時就無法顯示縮圖,且無法使用替代圖片當成預設縮圖。

關於第 1 點,自家產品的相容性當然較佳,想避免意外只能盡量不外連其他圖床;而本文的內容就是針對第 2、3 點來 hack。想直接修改程式碼可跳到「三、修改有縮圖、無文章摘要的程式碼」,不過還是建議先瞭解一些必要知識,再來修改程式碼,比較能符合預期的效果。另外,其他的圖床如果也想要套用本文的 hack,請見文末的說明。


一、PICASA 圖片規則

進入主題之前必須先瞭解一下 PICASA 這個平台的運作原理,「這個網頁」的心得非常棒(只不過不是每一點都是正確的),每張圖檔的網址路徑都是使用 "sxxx" 這樣的參數來控制圖片大小,例如圖片網址的參數為 "s128" 時,這張圖片便是以寬 128px 來顯示,高度則會依比例調整

簡單整理一下這個網頁的其他重點:

1. 在 "sxxx" 後面加上 "-c" 參數時,圖片會以正方形顯示;如果原圖是長方形,則左右會被裁切。舉個例子說明就很清楚,下面左圖的參數設為 "s200"、右圖的參數設為 "s200-c",一眼就能看出差別:

http://1.bp.blogspot.com/-P1X8AF00GKg/UAXeghFD9sI/AAAAAAAADIg/ei-Nny-3OEU/s200/tabs.jpghttp://1.bp.blogspot.com/-P1X8AF00GKg/UAXeghFD9sI/AAAAAAAADIg/ei-Nny-3OEU/s200-c/tabs.jpg

2. "sxxx" 的參數若超出原圖寬度,則顯示原圖尺寸,不會變大;參數最大到 "s1600" 為止。

3. 在原圖寬度以下的任何參數,PICASA 都能顯示出來,例如下圖的參數為 "s333" 這個不規則的數字:


http://1.bp.blogspot.com/-P1X8AF00GKg/UAXeghFD9sI/AAAAAAAADIg/ei-Nny-3OEU/s333/tabs.jpg

掌握了以上要點設定適當的參數,就不會讓網頁總是讀取原始大圖檔的尺寸,可以省下許多存取時間系統資源



二、製作圖示技巧

現在主流的螢幕都是 1080P,因此最好把訪客的螢幕視為 1920 x 1080 這樣的解析度。當部落格網頁的寬度設定在 1000px 左右時,代表在訪客的螢幕上通常是放大到將近兩倍(才能撐滿螢幕),而所有的圖片也必須放大近兩倍

以此為前提之下,一張壓縮過的 jpg 圖檔本身已經失真,再放大為兩倍的話,會有鋸齒、馬賽克也不意外了。所以,熱門文章小工具的縮圖為 72px 正方形大小,已經非常非常不清楚,接著在 1920 x 1080 的螢幕上又放大兩倍,效果可想而知。

想讓圖片在大螢幕上放大兩倍後不失真,最好的方法是製作一張兩倍寬度的原圖,接著再用 img 標籤去設定其顯示寬度只有 1/2,那麼這張圖在訪客的 1920 x 1080 螢幕上,放大兩倍後剛好還原為原圖尺寸,就不會失真了。

舉個實例,本站右邊的側邊欄,標題旁邊都有個小圖示,就像「搜尋」旁邊的 ,預計顯示大小為 14 x 14px,那麼製作原圖時的尺寸必須都是 28 x 28px 以上,接著在 img 標籤裡面設定 style='width: 14px; height: 14px;' 就能以 14 x 14px 顯現,並在放大兩倍後不失真。

同樣的,為了讓熱門文章小工具的所有縮圖比例一致,我每篇文章的第一張圖都設成一樣的長寬比 2:3,而預計縮圖顯示的尺寸長寬為 72 x 108px,那麼縮圖原圖在 PICASA 圖床給的參數就設為兩倍 s216


三、修改有縮圖、無文章摘要的程式碼

首先,請確定是否已經裝了熱門文章小工具,且圖片必須是經由 Blogger 上傳或放在 PICASA。關於縮圖那一部分的程式碼,有兩種選擇:A. 只有縮圖、沒有文章摘要。B. 有縮圖、也有文章摘要。

以下步驟先針對 A 點進行修改──

1. 到 Blogger 後台 → 範本 → 編輯 HTML

2. 搜尋「(3) Show only thumbnails」這樣的字串,這區塊便是 A 點的程式碼。接著──

<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

把以上幾行程式碼,全部置換為以下的程式碼:


主要的更改就是把綠字的部分刪除、加入藍字與紅字的部分,存檔即完成,想先看效果可參考右邊的側邊欄。以下為修改的說明:

I:只要是從 Blogger 上傳、或是放在 PICASA 的圖片,被轉換的縮圖參數一定是 "s72-c",意思就是裁切成 72px 寬的正方形。所以利用 replace 置換字串,將 "s72-c" 改成我們想要的寬度,縮圖就能變得多大。以本站為例,我想讓縮圖變成 108px 寬,將這個數值乘以二後,我置換的參數成為 "s216"。為何乘以二的原因請參考「二、製作圖示技巧」,而紅字 "s216" 請改為自訂的尺寸參數

J:紅字 "108" 代表縮圖顯示的寬度,請改為自訂的縮圖寬度

N:想讓文章沒縮圖時也能顯示預設圖片,那麼請將這一行紅字部分的圖片網址,改成自訂圖片網址就行了。當然,這張圖片的寬度,應該要和其他的文章縮圖尺寸保持一致;另外的紅字 "108" 代表這張預設圖片顯示的寬度,一樣請改為自訂的預設圖片寬度


四、修改有縮圖、也有文章摘要的程式碼

這部分的程式碼接續在以上程式碼的下一行,就是 (4) Show snippets and thumbnails 的區塊,跟「有縮圖、無文章摘要」格式大同小異,主要差別是多了一行 <div class='item-snippet'><data:post.snippet/></div>,用來顯示摘要之用。如果有需要修改這部分的話,參考之前的修改邏輯即可:

1. 刪除綠字的程式碼
2. 在一樣的位置插入藍字、紅字程式碼。

因為內容差不多,且由於篇幅的關係,所以偷懶一下不再重複列出程式碼,如果有問題請再提出了。最後,如果你的圖床不是 PICASA,又想使用這個 hack,只要有辦法搞清楚該圖床的縮圖規則(例如 flickr 的原圖網址 xxx.jpg 只要改成 xxx_t.jpg, 就是縮圖的網址),是有可能套用這個 hack 的。


2012.10.12 補充

此部分為回答【留言 #02】的內容──

1. 圖片邊框陰影效果:原程式碼改為以下兩行──

  J:增加紅字部分 document.write("<img src='"+ pic +"' style='width: 108px; height: auto; border: 1px dotted lavender; box-shadow: 2px 2px 2px #d6d6d6; padding: 0px;'/>")

  N:增加紅字部分 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vF5Z2NG2njsRhbrfixCBZfYQNvsddiVXtv98KepRrCpDM-DpOeclpnpHSI4c6Gp1Rwi8kZEczrZAp8WlCaDDBE4BtUoPCjkFSnOrBhQTgoP6v2OX6sRUi3eMCApCh7kWRf3nzaU5H7Ff/s1600/no-image.jpg' style='width: 108px; height: auto; border: 1px dotted lavender; box-shadow: 2px 2px 2px #d6d6d6; padding: 0px;'/>

紅字部分的數值也可自行調整效果。


2. 縮短與上下邊界的距離:原程式碼改為以下兩行──

  C:增加紅字部分 <div class='item-thumbnail' style='margin-top: ??px; margin-bottom: ??px;'>

margin-top 代表與上邊界的距離;margin-bottom 代表與下邊界的距離。由於每個範本的效果可能不一樣,?? 要填入的數值得自行測試,請參考「Google Chrome 開發人員工具──調整部落格版面實作」的流程來找出適合的數值。

  R:增加紅字部分 <div class='item-title' style='margin-top: ??px; margin-bottom: ??px;'><a expr:href='data:post.href'><data:post.title/></a></div>

R 行 ?? 要填入的數值與 C 行一模一樣即可。

另外,如果覺得圖片與文章標題的距離太近,可以在 C 行的 style 屬性裡面增加一個參數 margin-right: ??px;,設定圖片與右邊文章標題區塊的距離,?? 的數值一樣請自己測試一下,通常 10px 是 ok 的。

Google Picasa圖片外鏈的url參數


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP