Drupal:許每篇文章一張圖

Nov 30 2007

drupal

Daily Pickup | DRAKE因為某些原因,遇見了 Cool Hunting 的某個頁面,它讓每一篇文章都成了一小張圖,然後整整齊齊地擺出來,整個就是好看。於是乎,逛 Cool Hunting 時,不再是依照每一篇文章的標題或是文章摘要(teaser)來決定要不要點進去看,而是這篇文章的小圖有沒有引起你的注意。

圖像化文章列表(photolized list of articles) – 給它一個命名。

隨後想說,既然 Drupal 這麼強大,應該有辦法弄一個類似的功能出來的吧。著手研究了一下當時(寫出這個功能時,應該是 2007 年的夏天)的模組,並沒有找到類似功能的,有點接近的,可能就屬 Teaser Images@drupaltaiwan)了吧。但是 Teaser Images 只能處理放在本機上的圖片,並無法處理外連的圖片,而且如果圖片是出現在全文裏頭,而不是文章摘要的話,就沒用了…

更新:嘗試寫了一個模組,所以作法變得簡單一些些了:我的第一個 Drupal 模組:Thumbview Field。不過如果你想知道我一開始是怎麼想的,那請繼續閱讀下去,不然,就直接跳到吧。

好吧,自己用湊的方式寫一個好了,下頭是約略的想法:

  • 假設每一篇文章都可能有一張圖在裏頭,但也只是可能,而且這一張圖片可以是放在別處,像是 Flickr 或是 Zooomr 之類的地方。
  • 文章發表時,如果這篇文章裏有圖片連結( <img src=…),會自動抓出第一個圖片的網址出來,然後存起來留到需要的時候再用。
  • 使用 Views 產生一個 block,亂數選出一些文章來。
  • 使用 Imagecache ,再配合之前存下來的圖片網址,自己寫一個 theme function,以小圖來代替這一篇文章,秀出來。

接下來,就是落實的部分了。為了達到上頭的想法,得再明確一點想出一套程式作法來,這樣才好動工,於是又有了下頭這個作法列表:

  • 把目標鎖定在 blog 這個類型的文章(老實說,這個網站也只有這個類型的文章吧…)。
  • 使用 Computed Field 這個模組,這樣就可以在每新增或是修改一篇 blog 時,會去執行一次 Computed Field 裏的 php 程式碼,然後就可以利用它,動態地抓出第一張圖片的網址並且存起來。作法是,新增一個 field,然後把它加到 blog 這個文章類型裏,名字的話,就叫 first_image_url 吧。
  • 然後使用 HTML Parser 這個 php library,抓出 <img src=“…..” /> 裏的網址。
  • 接著利用 imagecache 這個模組,去動態地產生縮圖來。但因為 imagecache 只有辦法針對存放在本機的圖片,無法處理放在遠端(ex, Flickr)的圖片,於是我為此動了一點它的程式碼,目的是讓它可以自動去下載遠端的圖片,然後再進行縮圖的處理。

first_image_url 這個 computed field 裏的 php 碼:

 require_once './includes/htmlparser.inc'; $parser = new HtmlParser( $node->body ); while( $parser->parse()) {   if( $parser->iNodeName == 'img' ) {     $img_src = $parser->iNodeAttributes['src'];     break;   } } if( false === strpos(strtolower($img_src), 'http://')) {   if( false === strpos(strtolower($img_src), 'https://')) {     if( false === strpos(strtolower($img_src), 'ftp://')) {     }     else {       $img_src="ooxx_in_ftp/" . substr( $img_src, 6);     }   }   else {     $img_src="ooxx_in_https/" . substr( $img_src, 8);   } } else {   $img_src="ooxx_in_http/" . substr( $img_src, 7); } $node_field[0]['value'] = $img_src; 

首先使用 HtmlParser 去分析整個文章內容,找出第一個 img 標籤,取出它的網址。接著判斷圖片是否是連外的,是的話,就以另一種方式來存,不是的話,就直接拿來用了。舉個例子,圖片的網址如果是 http://0rz.tw/0a3o6 ,那就把它存成 ooxx_in_http/0rz.tw/0a3o6 ,這樣比較方便接下來給 Imagecache 處理。

Imagecache 方面,重點就是讓它先行判斷要處理的圖片是否是連外的(網址的開頭是 ooxx…),是的話,就先行抓回到本機暫時放著,就這麼簡單。修改過的 imagecache 在

coolhunting
Cool Hunting 上頭的一個版面。

thumb view of articles in Drupal
完整套到這個網站,配搭 CSS 就成了這個樣子了。

comments powered by Disqus