画像のアドレスからアタッチメントidを取得し、そのアドレスの別サイズの画像を表示させる

【長い前置き】
Typesのカスタムフィールドセットを利用して、「メインイメージ」とか「サブイメージ」を作りました。
「メインイメージ」は大き目サイズで表示させてー、サブイメージはサムネイルサイズの正方形のを表示させたい！という設定です。

カスタムフィールドの「画像アップロード」から、画像をアップロードし、その画像の「サイズ」で「サムネイル」を選んで、追加されている「Types」というとこの「field値で設定」をクリックしたら「サムネイル」の画像のURLが値に挿入されるんだろうなぁと思っていたのです。

違った…。

挿入されるのは、その画像のオリジナルファイル名。一番おおきな画像です。wordpressを通してアップロードしたのだから、サムネイルもミドルサイズもすべて作られているはず…もったいない！！

オリジナルファイル名ということは、うまくすればwp_postからIDを取得し、そのIDで「wp_get_attachment_image_src」を使用して、表示したい画像サイズのファイルを引っ張ってこれるはず……。と、考えたり調べたりしていたら、とっても素敵なサイトさんを発見しました。

【結論】

WordPressで画像のURLからアタッチメントIDを取得する

まさに、その方法です。正規表現が苦手な私として、とってもありがたいことでございました……。

 

サムネイル、ミドルサイズ、ラージサイズ……任意のサイズで画像を保存させたい

【長い前置き】
「メインイメージ」は、お客様がデジカメでとった写真そのまま入れてもらって、横長に勝手に加工されるほうが楽ですよね。「mainimage」に使用するためのサイズに自動的に保存してくれないかな。

【結論】
add_image_size　を使用すれば簡単です。
仕様するテーマフォルダにfunctions.phpを作って（あるならそのファイルに追加）、上記のコードを追加するだけ！
メディアのサイズ選択には表示されないけど、特殊なサイズを取り出すなんて、特殊な条件だろうから、テーマファイルに書いてしまえばいいですよね。

ちなみに、私は

[php]

<em id="__mceDel">add_image_size( ‘mainimage’,675 , 403, true );

[/php]

を追加して、その画像を引っ張ってくるところは

[php]

<img src="<?php echo get_attachment_image_src($post -> {‘wpcf-mainimage’}, ‘mainimage’); ?>" alt="" />

[/php]

としました。mainimegeはTypesで設定したカスタムフィールドなので、「wpcf-」が頭についてます。

 

また、随時更新します。