2013年10月23日

Google Drive 當圖床對 Blogger 的不好影響__使用 Picasa 的三大好處

A+
相關文章+任意尺寸縮圖」的留言#24, 詢問了這個問題:"Blogger 文章裡相片在 google drive 時,看不到縮圖"。一般而言,很少使用者會把 Google Drive 當作圖床,且如果在 Blogger 使用的話有一些缺點及後遺症,那麼哪些族群可能會這麼做呢?

前陣子 Yahoo、無名的搬家潮期間,印象中看過一篇文章教使用者把 yahoo 的圖搬到 google drive 當圖床,因此相信有不少使用者這麼做。藉這個機會宣導一下,如果曾使用 google drive 當圖床的話,建議找時間把圖片搬到 picasa (G+相簿),在 Blogger 會是比較長遠的選項。

以下先說明無法抓到縮圖的原理,想直接看 Google Drive 不適合當圖床的理由,也就是 Blogger 使用 PICASA 當圖床的三大好處,請跳「二、使用 Google Drive 當圖床的影響」。



一、Blogger 文章 feed 縮圖原理解析


1. 首先可參考「選擇喜歡的圖片當作 Blogger 文章縮圖」,Blogger 會選取文章中的第一張圖片來製作縮圖,並儲存在後台的文章 feed 資料中。

2. 從 feed 撈縮圖資料的原理可參考「Blogger 最新文章+任意尺寸縮圖」,不過這篇講的內容以 json 為主,需要先有一點硬知識,下面用比較簡單的方式說明。

3. 我用測試網站,一篇文章放 PICASA 圖床的圖片,其他文章放非 PICASA 圖床的圖片。接著在網址貼上以下格式可顯示 Blogger 的文章 feed 內容:

http://網站名稱.blogspot.com/feeds/posts/summary

以下擷取部分 feed 內容:

<link rel='alternate' type='text/html' href='http://wfu-blog.blogspot.com/2013/05/prv-abc.html' title='隨機輪播 Blogger 的標頭(banner)圖片'/><author><name>Wayne Fu</name><uri>https://plus.google.com/108990319112241335296</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//lh6.googleusercontent.com/-7j1nFs9KS6o/AAAAAAAAAAI/AAAAAAAAHpM/OnRfH_XpFq0/s512-c/photo.jpg'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/-5Mxum2tfdCw/Ukpwn2l45lI/AAAAAAAAH1I/Cx_RS4kCRCA/s72-c/Blogger.png' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-3513801837917459549.post-7656013173114185112</id><published>2012-10-02T13:27:00.001+08:00</published><updated>2013-10-23T11:28:07.808+08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='電腦-blogger'/><category scheme='http://www.blogger.com/atom/ns#' term='電腦-google'/><title type='text'>Blogger 如何安裝兩個相同的小工具?</title><summary type='text'></summary><link rel='replies' type='application/atom+xml' href='http://wfu-blog.blogspot.com/feeds/7656013173114185112/comments/default' title='張貼留言'/><link rel='replies' type='text/html' href='http://wfu-blog.blogspot.com/2012/10/blog-post.html#comment-form' title='0 個意見'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3513801837917459549/posts/default/7656013173114185112'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3513801837917459549/posts/default/7656013173114185112'/><link rel='alternate' type='text/html' href='http://wfu-blog.blogspot.com/2012/10/blog-post.html' title='Blogger 如何安裝兩個相同的小工具?'/><author><name>Wayne Fu</name><uri>https://plus.google.com/108990319112241335296</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//lh6.googleusercontent.com/-7j1nFs9KS6o/AAAAAAAAAAI/AAAAAAAAHpM/OnRfH_XpFq0/s512-c/photo.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-3513801837917459549.post-5978107504625714407</id><published>2012-09-06T19:30:00.000+08:00</published><updated>2013-10-23T11:28:16.015+08:00</updated>

A. 紅色字串即為第一篇文章的縮圖資料,從圖片網址可知是從 blogger 上傳到 PICASA 圖床,自動產生的縮圖尺寸為 72px、正方形(後面會詳細說明)。且紅色字串的前後為 </author><thr:total>0</thr:total> 類似這樣的藍色字串。

B. 在底部附近可看到第二組藍色字串(第二篇文章的資料),但中間並沒有包含紅色字串(縮圖資料),因為這是用了 flickr 及其他圖床測試的結果,均無法產生縮圖資料。

因此結論為,在 Blogger 中要正常顯示文章縮圖,最好使用 PICASA 圖床、或由 Blogger上傳。另外,若想得知網站的縮圖資料是否正常,可由以上步驟來檢驗。



二、使用 Google Drive 當圖床的影響


1. 無法使用縮圖的功能

從上面的說明可瞭解, Blogger 文章 feed 無法產生非 PICASA 圖床的縮圖,那麼如果網站有安裝下列工具的話(或使用動態檢視範本)就可能看不到縮圖:


最後一項不少部落格會安裝,就是頁首有大大的圖片、會隨機輪播文章圖片這樣的小工具。


2. 圖床容量有限制

Google Drive 有容量限制,而 PICASA 可技術性達到無容量上限,詳細內容可參考這篇「PICASA 官方說明」,簡單摘要如下:

  • 使用 PICASA 當圖床,800 x 800 以下的圖片無儲存空間限制。
  • 使用 PICASA 當圖床且已使用 G+ 帳號,2048 x 2048 以下的圖片無儲存空間限制。
  • 而且 G+ 會自動將所有上載的相片縮小到 2048 像素,這代表使用 G+ 永遠不會有儲存空間的問題。


3. Picasa 的網址參數

PICASA 的圖片都可經由修改網址參數,來達到調整實際圖片尺寸的效果,詳細說明請參考「Blogger 熱門文章+任意尺寸縮圖」→「一、PICASA 圖片規則」。

這有很多好處,例如以下應用:

 A. 一張比較大的圖片,可以修改參數後,讓比較小的尺寸在不同的情境使用,而不需要上傳各種不同尺寸的圖片。例如文末的作者資訊有兩張 FB 圖案、留言區塊的 FB 留言框也有一張 FB 圖案,這三個不同大小的 logo 其實都是同一張圖,只是用了不同的網址參數就能呈現不同的尺寸效果。


 B. 文章裡的圖片,可以使用較小尺寸的參數,加快網頁載入速度;而點擊後可另開視窗顯示原圖,讓訪客看清楚圖片裡的資訊。就像使用下面這樣的語法:

<a href="http://PICASA網址參數.../s1600/WFU.png" target="_blank"><img src="http://PICASA網址參數.../s300/WFU.png"/></a>
s1600 就是原圖尺寸,而 s300 代表圖片的長邊是 300px。


 C. 可藉由程式來控制圖片的尺寸,例如 Blogger 縮圖尺寸固定都是 72px、正方形,藉由修改網址參數後,就能顯示不一樣的縮圖尺寸,例如本站側邊欄的小工具「熱門文章」、「最新文章」、「最新回應」及「相關文章」等等,都是運用這樣的技術。想使用 javascript 來實現這樣的效果,詳細的作法請參考「正規表示式線上自動產生器」→「二、修改 PICASA、Blogger 圖檔的真實尺寸」。



三、推薦的 Blogger 搬家工具


回到開頭要解決的問題,如果從其他部落格搬家到 Blogger 時,能一併將圖片轉移到 PICASA 圖床,就不會有本文的這些麻煩了,以下推薦幾個免費的搬家工具:

◎ 無名 blog 搬家到 blogger (含圖片):http://xyz.cinc.biz/2013/09/wretch2blogger.html

已測試使用者多,相對而言穩定。


◎ 修正 yahoo / 無名 blog 搬遷 破圖:http://kudgame.blogspot.tw/2013/09/yahoo-blog.html

已測試使用者多,相對而言穩定。


◎ Yahoo 完美搬家方案到 Blogger+Picasa 網上版BETA:http://koosan.blogspot.com/2013/10/migrate-yahoo-blog-to-blogger-picasa-with-images-comments-beta.html

已測試使用者還不多,Yahoo 搬家者或許可先測試上一個,有問題再測試這一個。



四、小結


據了解,Yahoo、無名的群聚性很強,使用者之間的聯繫很熱絡,這也是會讓 Blogger 使用者羨慕的地方。那麼,有看到這篇文章的原 Yahoo、無名站長,請發揮你們的群聚性,轉告其他有意、尚未搬到 Blogger 的朋友關於本文的這件事,避免重蹈覆轍。據這位留言的小姐表示,她的部落格有兩千篇文章,如此要處理這麼多文章的縮圖,說真的是一件挺麻煩的事。


Google Drive 相關心得:

23 則留言:

  1. 你既小結真恰當 「尚未搬到 Blogger 的朋友關於本文的這件事,避免重蹈覆轍。」
    當初搬BLOG時就是不斷搜尋好平台、好搬法。
    衡量過之後,以為 GOOGLE DRIVE + BLOGTRAN + notepad (replace all 改變相片路徑) , 已經是最徹底,搬晒所有文章、照片、回應、分類的方法。
    沒想過會遇到縮圖問題 >.<
    如果我將全部相片(18,000張)放到PICASA的話,可以用 replace all 找出 image 再改成PICASA的link嗎?
    PICASA跟GOOGGLE DRIVE一樣,可以SET為SHARE FOLDER,取得儲存空間網址嗎?

    回覆刪除
  2. <428512049855430890>(以上內容請勿刪除,從括號之後開始留言)hi Maggie, I'm sorry for your condtion...but,

    Google Drive 檔案路徑是固定的,所以可以 replace all;而 PICASA 你可以看到,每張圖片的網址都是亂數,所以做不到你的要求.

    如果想要不麻煩的話,或許得按「三、推薦的 Blogger 搬家工具」,重新搬一次了...

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

    免費那個作者回覆了
    「您好
    只轉純文字的話,我不確定
    因為我沒看過 yahoo 的備份檔格式

    如果要連圖片一起轉的話,確定不行
    因為程式是到無名網站抓圖片,再傳到 picasa」

    :(

    回覆刪除
  4. 試試這個?
    http://kudgame.blogspot.tw/2013/09/yahoo-blog.html

    回覆刪除
  5. http://koosan.blogspot.tw/2013/10/migrate-yahoo-blog-to-blogger-picasa-with-images-comments-beta.html
    這個也是教picasa

    回覆刪除
  6. <4344562222488283215>(以上內容請勿刪除,從括號之後開始留言)感謝提供資訊,已更正
    內文。留言 #3、#4 Radio 推薦的網站不錯,可測試看看。

    回覆刪除
  7. <4036376232443854991>(以上內容請勿刪除,從括號之後開始留言)非常感謝您提供的資訊,已補充到內文! ^^

    回覆刪除
  8. 如果我從新搬一次的話,已滙入的2300篇(只發佈了其中的幾十篇),以及新寫的十幾篇,應該怎樣處理?要全部刪除嗎?

    如果用http://kudgame.blogspot.tw/2013/09/yahoo-blog.html?m=1
    的方法,新寫的那些就不會出現?(因備份時那些新網誌還未包括在內)。

    另外,你說標籤避免用「'」、「"」,哪請問「&」、「+」可用嗎?

    回覆刪除
  9. <933741529316089437>(以上內容請勿刪除,以下引言請自行刪減) [quote]如果我從新搬一次的話,已滙入的2300篇(只發佈了其中的幾十篇),以及新寫的十幾篇,應該怎樣處理?...[/quote]因為我沒搬家過,不敢亂給意見,怕操作錯誤,或許你可以請教提供搬家工具的作者~

    [quote]你說標籤避免用「'」、「"」,哪請問「&」、「+」可用嗎?[/quote]用引號以外的半形符號是沒問題的

    回覆刪除
  10. <933741529316089437>(以上內容請勿刪除,從括號之後開始留言)
    理論上,新寫的十幾篇不要刪,其他之前匯入的刪掉,再重新匯入。
    但最保險的方式,是將目前已匯入的2300篇+新寫的十幾篇,匯出後,再開一個新網誌匯入,當做備份,這樣就有一模一樣的兩份。
    再拿其中一份做操作,就算失敗也不怕。


    標籤官方是說不要使用 &<>@!,
    https://support.google.com/blogger/answer/44498

    我自己則是非不得已,盡量連「+」都不使用
    因為前台點選有「+」的標籤,沒辦法正確列出文章,
    例如「C++」,會當成「C」
    http://vietzone.blogspot.tw/search/label/C%2B%2B

    回覆刪除
  11. <4220752981904794992>(以上內容請勿刪除,從括號之後開始留言)非常感謝您的補充說明, 由於我的樹狀標籤是用 js 執行,因此只注意到不能使用引號,避免讓程式當掉,而沒注意到標籤在網址列時,使用特殊符號會造成的影響。

    回覆刪除
  12. Wayne兄,我見大部份香港/海外朋友從YAHOO搬過來的,都用google drive方法,容易明白,操作相對簡單。好像大逃亡一樣,越快越好,無考慮其他問題。

    我篇Blogger+Picasa無人問津。:D

    回覆刪除
  13. 而我自己,因為較早前已將圖片搬去wordpress,為了提升速度,最終人手copy-and-paste去google doc再回blogger/picasa。

    這篇:http://koosan.blogspot.hk/2013/10/copy-and-paste-blogger.html

    回覆刪除
  14. <1831854745726909785>(以上內容請勿刪除,從括號之後開始留言)需要您的幫忙宣導了 ^^

    回覆刪除
  15. <4323873763375289912>(以上內容請勿刪除,從括號之後開始留言)這篇的技巧看起來滿不錯的,非常實用,有時間要來操作研究看看!

    回覆刪除
  16. <4323873763375289912>(以上內容請勿刪除,從括號之後開始留言)コーさん, 已測試過 copy/paste 到 google drive 的效果,自動上傳的圖檔網址,就算改為 blogspot 的形式,仍然無法支援 blogger 的縮圖效果喔,因為看來網址並沒有 s??? 這樣的參數,提醒您一下!

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

    對,應該沒有s參數,而且暫時找不到相薄位置,好像hidden相薄似。

    相薄存取速度比googledrive快。

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

    Wayne兄,最近再看看,copy到google doc的方法。

    相片原來有s參數,不過方法不同。要放在最後,用=s100。

    例:
    https://lh3.googleusercontent.com/Tkl6X1UaPeD2sf1QiwMaM0k3xakzSdrd52Fo-j_ZZcaLmpi9iuI9y-DZNqOJYh8zLPsc7O3UknOAuHMXs2p9nfx3CdIlaZfG0-_y6JffUmSGVtnnF28qCJoH

    width 100px
    https://lh3.googleusercontent.com/Tkl6X1UaPeD2sf1QiwMaM0k3xakzSdrd52Fo-j_ZZcaLmpi9iuI9y-DZNqOJYh8zLPsc7O3UknOAuHMXs2p9nfx3CdIlaZfG0-_y6JffUmSGVtnnF28qCJoH=s100

    s72-c都可以。

    回覆刪除
  19. <5111900070898817177>(以上內容請勿刪除,從括號之後開始留言)您這發現真的很棒!原來是這個樣子啊~

    雖然Blogger後台文章feed還無法根據這個圖片網址格式產生文章縮圖,不過應該是可以有一些應用才是~

    回覆刪除
  20. 因始終摸不慣Google的模式!寫新網誌時加照片,經Picasa上傳,「原size」偏大,改選「大」又偏小,如何可設定新上載于網誌上的相片size喜好呢?請指點迷津津!^^

    回覆刪除
  21. <5661521411353725215>(以上內容請勿刪除,從括號之後開始留言)如果你有 HTML 語法基礎的話,那麼可以切換到 HTML 的編輯模式,自行調整圖片大小,例如: <img src="xxx" style="width: ??px"/> 類似這樣,?? 改為自己想要的尺寸。

    回覆刪除
  22. <2595835020078603537>(以上內容請勿刪除,從括號之後開始留言)
    哈哈!謝謝你!我雖沒有HTML語法基礎,但我懂得前往HTML編輯模式那兒「偷雞」,而且試驗成功了,已能將原圖改為375x500,約等于google document轉過來的原圖大小!
    啦啦啦啦... 嘻嘻,蠢人學得方法,好開心呢!謝謝! Kissesssssssss

    回覆刪除
  23. <1729237587894867937>(以上內容請勿刪除,從括號之後開始留言)不客氣~會改的話就表示懂 HTML 語法 ^^

    回覆刪除

張貼留言注意事項:

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