サムネイル画像を生成せずに最新記事一覧にサムネイルっぽく画像を表示させてみた

2011/2/18 23:16

ブログのサイドバーに表示している「最近の記事一覧」に、エントリーで使われている画像をサムネイルっぽく表示するようにしてみました。

わざわざサムネイル画像を作成するのはめんどくさかったので、 img タグでやや小さめに画像を表示させ、それに正方形の div 要素をかぶせてCSSで overflow:hidden を指定して余分な部分を隠す、という方法をとってみました。

↑ 実際の img タグはこれくらいのサイズ。外側のdiv に overflow:hidden を指定してるのであたかも正方形のサムネイルかのように表示されてます。

表示全体は PHP でおこなっています。

最新記事の取得はRSSを利用していますが、HTTPとか経由せずにローカルのファイルを file_get_contents で読み込んで、あとはパターンマッチです。

エントリー本文にあるimgタグの取得もパターンマッチでいけると思います。(実際は、このブログでは記事のタイトル、本文、最初に使っている画像ファイルパスを別のファイルに書き出して再利用しやすくしているので、それを利用しています。)

imgタグにwidthとheightを指定してあるので、わざわざ画像ファイルを読み込んでファイルの幅と高さを取得するとかする必要もありません。あとは計算して縮小後の width と height を出力します。

というわけで、正方形のサムネイル画像の生成とかめんどくさいって時は、この方法をお試しください。

Webエンジニアやってます。最近はドットインストールの開発がお仕事です。その傍ら、個人で Meity や電車遅延なう、梅酒.in、 #グラドル自画撮り部の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。