2012年7月25日

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

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='http://3.bp.blogspot.com/-8cd44G39Nbo/UA1_zN67aRI/AAAAAAAADc0/l55W6lc8VIo/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參數


更多實用工具:

29 則留言:

  1. 大大你好,
    我的Blog現在在用「熱門文章」+「最新文章」。

    請問有沒有方法把「熱門文章」的排版格式,
    改成跟「最新文章」的一樣?

    我之前試了很久,就是一直改不好。。。T.T

    回覆刪除
  2. <4950165812085369696>(以上內容請勿刪除,從括號之後開始留言)
    我用Chrome看,熱門文章與最新文章看起來版面是差不多的,圖片的寬度都一樣。我發現兩者主要的差別似乎是最新文章的圖片有陰影效果而熱門文章的圖片沒有陰影效果?

    因為不確定你的意思,請描述一下"排版格式"是指哪裡不一樣,再來看看怎麼解決。

    回覆刪除
  3. 抱歉,是我表達得不好,以下截圖:
    http://i610.photobucket.com/albums/tt184/B35_store/QQ20121010215126.jpg

    我指的所謂格式,主要是圖中紅箭頭所示的距離。
    至於陰影效果,其實我也很想有。。。囧

    回覆刪除
  4. <3767531241517351115>(以上內容請勿刪除,從括號之後開始留言)
    呵呵,真是「一張圖勝過千言萬語」~瞭解了,仔細看原來我的"熱門文章"下面也是空的比"最新文章"多,看來這是 Blogger 的 CSS 設定問題。

    調整版面的操作還滿值得發篇文,這一兩天會生出來~~

    回覆刪除
  5. <3767531241517351115>(以上內容請勿刪除,從括號之後開始留言)
    請看本文文末「2012.10.12 補充」部分。

    回覆刪除
  6. 請問如果是想要修改熱門文章截取的字數呢?
    應該要從哪裡去改,謝謝...^__^

    回覆刪除
  7. <5263413395523018927>(以上內容請勿刪除,從括號之後開始留言)請問你對 js 熟嗎?如果熟的話,摘要的字串在範本中的 <data:post.snippet/>,需要用 js 自行處理你要顯示的字數.

    回覆刪除
  8. <6453083610875138143>(以上內容請勿刪除,從括號之後開始留言)
    大大,對不起...我對JS完全不熟 = =

    回覆刪除
  9. <7071937889464030804>(以上內容請勿刪除,從括號之後開始留言)不好意思,目前那就沒辦法了~將來我是預備會寫熱門文章更新版,不過沒有時間表...:P

    回覆刪除
  10. 感謝大大的回應...謝謝啦!

    那可以再請教一個問題嗎?

    就是我的網誌存檔的文章標題字數如果超過六個字,第二行的字就會在縮一格,請問這部有辦法更改嗎? 讓他更整齊一點

    回覆刪除
  11. <109747837810276839>(以上內容請勿刪除,從括號之後開始留言)這個情形看來每個部落格都是一樣的,看久了就習慣了吧~如果會介意的話,由於 CSS 我沒有很精通,不然到blogger社群問看看有沒有高手知道:https://plus.google.com/communities/103807083735607134704

    回覆刪除
  12. <6392083280718609914>(以上內容請勿刪除,從括號之後開始留言)

    真得很感謝您的協助!!!

    感恩~~~ ^__^

    回覆刪除
  13. 請問這篇的程式碼可以獨立填寫在HTML/Javascript這個小工具裡嗎?

    因為我已經做了側欄TAB鈕之後也想把熱門文章塞進去
    可是我安裝的官方小工具沒有可以讓我拷貝小工具程式碼的地方

    所以要進去範本的HTML拷貝嗎? 然後拷貝文章內提到的(3)跟(4)的那邊所有程式碼就可以了嗎?


    回覆刪除
  14. <4395876693429723536>(以上內容請勿刪除,從括號之後開始留言)熱門文章要放到分頁小工具的話,你要看系列文第二篇「安裝 Blogger 官方小工具」,並注意 "2013.1.14 補充" 及其他使用者留言的內容,否則會遇到很多問題。

    回覆刪除
  15. <3309461772968165415>(以上內容請勿刪除,從括號之後開始留言) 我已經看得有點昏花了@@
    因為我想要安裝兩個HTML/Javascript分頁小工具,但其中一個卡著熱門文章這個改法讓我突然腦筋就凍住了!! 正在思索該怎麼改的好QQ

    回覆刪除
  16. <4821305307165449861>(以上內容請勿刪除,從括號之後開始留言)慢慢來吧~一個一個try, 成功了再下一個動作,這樣比較能排除障礙(除bug)

    回覆刪除
  17. 請問可以原視窗開啟,不要另開視窗嗎? 謝謝^^

    回覆刪除
  18. <2704472127953725692>(以上內容請勿刪除,從括號之後開始留言)沒問題,在本文的程式碼,將所有的 target='_blank' 字串刪除即可!

    回覆刪除
  19. <8662596333681249446>(以上內容請勿刪除,從括號之後開始留言)原來如此,謝謝~

    回覆刪除
  20. Icon最近的潮流是用專門的字型來處理,不像單純的圖片,縮放完全不成問題,在Retina螢幕也能正常顯示不模糊。詳細可以找找FontAwesome。
    除了Icon font,直接上SVG應該也是一種解法,只是現成的解決方案似乎還不夠多。除了那些強制設定自己字型的以外,Icon Font基本上沒什麼副作用,只要有EOT,連舊版IE都適用。

    回覆刪除
  21. <4918874882884260713>(以上內容請勿刪除,從括號之後開始留言)唔~這篇好久的文章了,icon font 年初就躺在我的待辦事項,只是不曉得何時會執行倒這一項...XD

    回覆刪除
  22. Wayne你好~~謝謝你的文章,很有幫助!!
    只是我的熱門文章也會出現圓點點,不知要怎麼改要呢? 最新文章的圓點去掉你有教了,但.....不會舉一反三~~

    回覆刪除
  23. <2594847651676081149>(以上內容請勿刪除,從括號之後開始留言)你的網址?

    回覆刪除
  24. 網址是clairestfodiary.blogspot.com
    我現在是把照片的margin調整、硬蓋住那圓點點~~

    回覆刪除
  25. <560535739417919678>(以上內容請勿刪除,從括號之後開始留言)看了你的網站,「最新文章」、「熱門文章」都有原點。「最新文章」小工具請參照我那篇文章留言 #7 的回覆來修改即可。

    「熱門文章」的原理一樣,在範本中找到熱門文章那個區塊的程式碼(可搜尋 id='PopularPosts1'),往下幾行會看到 <ul> → 改成 <ul style='list-style-type: none;'> 就行了

    回覆刪除
  26. <1335640065245292875>(以上內容請勿刪除,從括號之後開始留言)

    報告: 改好了~~謝謝Wayne大大!!

    回覆刪除
  27. 謝謝大大詳細的教學~
    每次blogger有問題上來這邊一定找得到答案 :D

    回覆刪除
  28. Blogger官方工具"熱門文章"讀取不到Imgur的圖
    求解!!謝謝

    回覆刪除
  29. <4477025025639764870>(以上內容請勿刪除,從括號之後開始留言)請見「三、修改有縮圖、無文章摘要的程式碼」→ 「圖片必須是經由 Blogger 上傳或放在 PICASA」

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。