WordPressトリミングイメージ

WordPressのadd_image_size()で画像サイズを追加する際トリミングの基点を変更する方法


WordPressで通常の画像サイズ「thumbnail」「Medium」「large」「full」の他に画像サイズを追加する時に使用する関数「add_image_size」。この関数自分は画像の名前指定、縦横サイズ指定、トリミングの有無を指定するだけかと思っていましたが、なんとトリミングの基点も変更できるということを知りました。

トリミングの基点を変更したいと思ったきっかけ

これまで、縦位置で撮影している人物写真などをアップする際、中央基点で上下をトリミングすると人物の頭の上が少し切れたりしていました。

WordPress中央基点の画像トリミングイメージ

なのでPhotoshopなどの画像編集ソフトで画像をトリミングし直してからアップしていました。でも、毎回画像編集ソフトでトリミングするのも面倒。数が多いとさらに大変だし(アクションを使う方法もありますが…)、画像編集ソフトが使用できないクライアントの場合はこの状態では不親切かなと…

Photoshopを使った画像トリミングイメージ

しかし、この方法を設定すれば、毎回同じ位置でトリミングする場合、画像編集ソフトで修正する手間が省けるのでちょっと喜んでいます。

WordPress上部中央基点の画像トリミングイメージ

トリミングの基点を変更するには、画像サイズを追加する「add_image_size()」関数を使用します。

add_image_sizeの仕様

add_image_sizeの仕様は以下のようになっています。

$name
画像サイズの名前を指定します。「thumb」「thumbnail」「medium」「large」「post-thumbnail」は既に使用されているので避けてください。それ以外なら自分で管理しやすい名前でOKです。
$width
画像の横幅のサイズを指定します。画像のピクセル数で指定します。単位は必要ありません。
$height
画像の縦幅のサイズを指定します。画像のピクセル数で指定します。単位は必要ありません。
$crop
今回のトリミングの基点変更の指定はここで行います。通常トリミングをするか否かをtrueがfalseで指定していましたが、例えばarray( 'center', 'top' )と指定することで上部真ん中を基点にトリミングをするという指定ができます。

トリミング基点の変更例

下記のコードをfunctions.phpに記載することでトリミング基点を変更した画像サイズを追加できます。

トリミング基点変更のまとめ

今回の設定で毎回同じトリミングをする際、いちいち画像編集ソフトを使用しなくても、WordPress側で自動トリミングをしてくれ、更新作業の負担を軽減することができました。トリミングの基点「違う!そこじゃない!」と思っていいた方の負担を少しでも軽減できたらなと思います。