カスタムフィールドの画像を任意のサイズで表示する

カスタムフィールドに画像を登録すると、基本的にはその時点で4種類のサイズの画像が保存されます。

WordPressの管理画面『設定＞メディア』で設定していた3種類のサイズと、カスタムフィールドに登録した画像そのもののサイズです。

• サムネイルのサイズ
• 中サイズ
• 大サイズ
• フルサイズ（登録した画像の元の大きさ）

上記、上から3つの画像サイズは自由に設定できます。

例えば次のような設定が可能です。

• サムネイルのサイズ：100 × 100
• 中サイズ：300 × 300
• 大サイズ：700 × 700
• フルサイズ（登録した画像の元の大きさ）

事前に生成されていないサイズの画像を表示したい

ここで、カスタムフィールドに設定した画像を、上記のいずれのサイズにも当てはまらないサイズ、例えば『200 × 200』で表示させたい場合はどうすれば良いでしょうか？

スタイルシート、もしくはimgタグにサイズを記述して画像を縮小表示すれば良いかもしれませんが、そのときはどのサイズの画像を使用しますか？

『200 × 200』より大きなサイズである『中サイズ』ですね。フルサイズでやってしまうと無駄に重い画像を使用することになってしまうからです。

しかし、こういう場合はどうなるでしょうか。

元々は『200 × 200』で中サイズの画像を縮小表示させていたものの、やはり中サイズより大きい『400 × 400』で表示させたい、という場合です。

コードを直接いじって、『大サイズ』を出力させるようにしないといけませんね。

では今度は大サイズより大きいサイズを表示させたい場合は・・・と言っていたらキリがありません。

こんなときに便利なのが、『wp_get_attachment_image』です。

何が便利なのかと言うと、wp_get_attachment_imageに画像サイズを引数として渡すことができ、そのサイズに最も近い画像を選んできてくれて表示できる点です。

例えば、

$attachment_id=get_field('example_image',$post->ID);
echo wp_get_attachment_image($attachment_id,array(200, 200));

1行目でカスタムフィールド（ここではAdvanced Custom Fieldsを使用）から画像のIDを取得し、2行目でimgタグを出力しています。

wp_get_attackment_imageの2番目の引数に配列array(200, 200)を設定することで、幅200px 高さ200pxよりも大きい画像の中から最小の画像が選ばれ、imgタグのソースコードに

width= "200" height= "200"

が記述されるようになります。

最終的に表示させたい画像のサイズさえ指摘しておけば、適した画像はWordPressが適宜選んでくれるという訳です。

また、例では正方形で説明しましたが、横長の写真や縦長の写真でも、指定したサイズに収まる範囲で最大のサイズで表示できるように調整してくれます。

もっとも、wp_get_attachment_imageを使用するのは例外的な画像サイズを使用したい場合で、最初からホームページ内にそのサイズを使用することがわかっていれば、『add_image_size』を使用して、自動的に生成される画像サイズの種類を複数用意しておいた方が良いと思います。