2013年10月23日

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

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

Wayne Fu 0 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3jyzJGltl0VQyzwSpZT3lJ9s2qLUmaH-lWLrm9tC0E-5shXAkD9nO8MjIAg6tTaR3pLrsZUOmks7hZehbkgfh0k7rEiEjSO-2vbmOhSC-IESYO-p2cAfIrwNB0Wx82_LbEQOknzag7iZ/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 完美搬家方案到 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 相關心得:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

12 則留言:

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

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

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

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

    :(

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

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

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

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

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

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


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

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

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

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

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

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

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

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

    相薄存取速度比googledrive快。

    回覆刪除
  10. <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都可以。

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

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

    回覆刪除

張貼留言注意事項:

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

TOP