Blog

PHPを手軽に使って、画像のサムネイルを出力する方法

2013.12.10Cat:PHP デザイナー

写真などの画像を大量に見せるサイトでは、

元の大きさの画像を直接配置せずに、

画像を縮小したサムネイル画像をまず配置し、

そこをクリックしたときに、リンクやライトボックスなどで元の大きさの画像を見せるというやり方がよく行われます。

このとき、WordpressやMTなどのCMSを使っている場合は、CMSの機能を使ってサムネイルを動的にできますが、

CMSを使わないべた書きのサイトの場合は、サムネイル画像を一つずつ準備しなくてはならず、とても手間がかかります。

 

CMSを使うまではなくても、元の大きさの画像から動的にサムネイル画像を出力できれば、

その手間を省くことができます。

そこで、PHPを使って、サムネイル画像を動的に出力する方法について調べて、作ってみました。

 

今回は、直接PHPを PHPファイル上に書くのではなく、

HTMLから、<img>のソースとしてPHPを指定してサムネイル画像を取得する方法を考えました。

 

まず、HTMLで、画像を取得する記述をします。

<img>のソースに、サムネイル画像を出力するPHPを指定し、GETとして、元画像のURLとサムネイルの横幅を指定します。

これで、静的なHTMLから、PHPにアクセスできます。

 

次にPHPを記述します。

画像の大きさ変更と出力の方法については、こちらのサイトを参考にさせていただいてます

画像を拡大・縮小する方法

 

ちなみにこの方法では、GDライブラリを使っているため、PHPのバージョンが4.3以降か、事前にGDライブラリをインストールしている必要があります。

 

まずは、GETから、元画像のURLとサムネイルの大きさを取得します。

 

次に、元画像の大きさを取得し、比率を割り出して、サムネイル画像の高さを調整します。

縦長だった場合は、高さをwidthで指定された大きさにして、幅を調整します。

 

これらの情報をもとに、画像を出力します。

 

これで、元画像からサムネイル画像を動的に生成することができるようになりました。

↓こちらが実際にこの仕組みを使ってみたものです。

DEMO
↓そして、こちらがサムネイル画像を生成するPHPの全文です。

 

PHPを使える環境が必要ですが、データーベースなどを用意する必要もないので、

手軽にサムネイル画像を動的に生成する時に便利な方法だと思います。

 

追記:

PHPで画像を出力するときは、ヘッダーの設定をしないといけませんでした。

今回の場合はJPEGなので、

という記述を、PHP内で行う必要がありました。

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ