Craft CMS ではアセットとして登録された画像ごとに「焦点」となる座標を指定できます。
あらかじめ設定しておくと、画像の一部を切り抜く形でサムネイルを生成する「画像変換」処理の際、システムが「画像のどの部分を優先するか」を判断できるようになります。
アセットごとに指定された「焦点」は「モード:切り抜き」が選択された画像変換の デフォルトの焦点
よりも優先されるため、大枠を「画像変換」で設定しつつ、細かい調整を行いたい場合のみ個別に設定すると効率的です。
そこで、今回は画像に「焦点」を設定する方法をご紹介します。
これは Craft CMS Advent Calendar 2022 4日目の記事です。
Craft 3 / Craft 4 で使える、画像エディタ
画像エディタによる「焦点」の指定は、Craft 3 から利用可能です。
アセット編集画面の場合
編集画面右にあるサムネイル画像にカーソルを重ね、 画像の編集
(Craft 3 は 編集
)ボタンをクリックします。
サイドバーの場合
エントリなどの編集画面でアセットフィールドのサムネイルをダブルクリックして、サイドバーを呼び出します。
その後、サイドバーの右上にある サイドバーを表示
ボタンをクリックしてサムネイル画像を表示させれば、あとはアセット編集画面と同様です。
画像エディタで「焦点」をセット
Craft 3 と Craft 4 ではボタンの配置など UI の見た目が異なりますが、焦点
ボタンをクリックして表示されるマーカーをドラッグして「焦点」座標を指定します。
指定後は忘れずに画像エディタ右下の 保存
ボタンをクリックしましょう。
Craft 4 ならプレビュー上で「焦点」の指定が可能に
Craft 4 からプレビュー上で「焦点」を指定できるようになりました。
画像のプレビューは、先のキャプチャにある プレビュー
ボタンをクリックすることで呼び出せます。
アセットフィールドからプレビューを呼び出すには
アセットフィールドのサムネイルをシングルクリックすることで画像のプレビューを呼び出せます。(前述の通り、ダブルクリックだとサイドバーが呼び出されます。)
「焦点」がセットされている場合は、マーカーをドラッグして目的の場所に移動するか、焦点を無効にする
ボタンで無効化できます。 反対に「焦点」が無効化されている場合は、焦点を有効にする
ボタンをクリックして座標指定が可能になります。
保存される「焦点」座標は、画像ごとに1つ
「アセット編集画面」や「アセットフィールドのサイドバー」など任意の編集画面で調整できるものの、実際に保存される「焦点」座標は1つの画像につき1箇所となります。
そのため、同じ画像で異なる「焦点」のサムネイル画像が必要な場合は、それぞれ別のアセットとして登録することになります。
こう書いている自分自身、実際の用途を想定できていないのですが、頭の片隅に入れておきましょう。