サイトのサムネイルを簡単に表示する

　「open.thumbshots.org」というサイトで、世界中のサイトのサムネイルを収集しているようで、簡単にサイトのサムネイルを表示させることができるようです。

<img src="http://open.thumbshots.org/image.pxf?url=http://studio-arz.com" width="120px" height="90px" alt="http://studio-arz.comのサムネイル" />

　このように、普通にimgタグのsrc属性として「http://open.thumbshots.org/image.pxf?url=」に続いてサムネイルを表示させたいサイトのURLを入力するだけでOK。取得できるサムネイル画像は120×90pxで固定のようです。

　非常に簡単なので、様々な応用が利きそうですね！

　ウチのサイトの場合はまだキャッシュがクリアされていないようで、今日現在、少し前まで使っていたデザインのものが表示されています。また、わりと新しく開設したサイトの場合はサムネイルの生成ができない場合もあるようです。

　DokuWikiで使う場合はwebthumbsプラグインが便利です。

　プラグインマネージャーが使えないようなので、手動で「lib/plugins」内に「webthumbs」という名前のフォルダを作成し、その中に「syntax.php」という名前でこのコードをコピーし保存します

例：次のように記載すると、「http://www.dokuwiki.org」のサムネイルが生成されるとともに、サムネイル画像にリンクが生成されます。

<webthumb:http://www.dokuwiki.org>

　ソースコードを見る限り、次のようにHTMLコーディングされるようですね

<a href="http://www.dokuwiki.org"><img src="http://open.thumbshots.org/image.pxf?url=http://www.dokuwiki.org"  style="border: 1px solid black;" /></a>

　このプラグインを使うと、imgタグの必須属性である「alt」がコーディングされませんので構文エラーとなります。また、できれば「width」や「height」属性も出力しておいた方がいいでしょう。従って、次のように改造したらいかがでしょうか？

    function _preview($data) {
 
    			$sResponse = "";
 
    			$sResponse = '<a href="'.$data[1].'"><img src="'.$this->sWebService.$data[0].'" width="120px" height="90px" alt="'.$data[1].'のサムネイル画像" style="border: 1px solid black;" /></a>';
    			return $sResponse;
 
    }

　また、「style=“border: 1px solid black;”」の部分はお好みにあわせて変えてあげるとイイでしょうし、hoverなども指定したい場合は、class属性を追加し「lib/plugins/webthumbs」フォルダ内に「style.css」をつくり、そちらに記載してもイイかもしれません。

• 投稿する前に「Discussionのガイドライン」をご一読くださいませ。