Drupalの管理画面上で画像をトリミングする「Crop API」

Drupalで画像を設定する場合、画像が適切に表示されるようにトリミングしたり、あらかじめ指定の画像サイズにする必要があります。

画像編集ソフトが使える場合は問題ありませんが、担当者によっては画像編集ソフトが使えない場合も考えられます。

今回はDrupalの管理画面で画像のトリミング編集ができるようになる「Crop API」というモジュールについてご紹介します。

管理画面上でトリミングができるようにしたい方はぜひ最後までご覧ください。

 

画像スタイルとの違い

Drupalの画像スタイル機能を使えば、画像をアップロードしたタイミングで自動的に指定のサイズにトリミングすることも可能です。

しかしこれはあくまで自動トリミングなので、あらかじめ設定した位置がトリミングされてしまいます。

そのため、画像に合わせてトリミングしたい位置や範囲が異なる場合は、意図した部分がトリミングされません。
サイトの担当者が「この画像の右下の部分を中心にトリミングしたい」という風に好きな位置・範囲でトリミングできるようになるのが、Crop APIモジュールを使うメリットです。

画像が中途半端な位置で切れてしまうこともなくなるので、アイキャッチ画像などこだわりたい場合に使えます。

一緒に使用するUIモジュール

Crop APIモジュールは単体では使えず、Crop APIモジュール本体と一緒に「Image Widget Crop」もしくは「Focal Point」などのUIモジュールが必要になります。

Image Widget Crop もFocal Pointも設定方法にそこまで大きな差はありません。
どちらも「クロップタイプ」「画像スタイル」を作成して、それを画像フィールドに設定します。

しかし、実際にトリミングする方法はかなり違ってきます。

「Image Widget Crop」は画像上に表示される枠を操作して、トリミングする範囲を細かく指定します。
おそらく「トリミング」と聞いて多くの人が思い浮かべるUIのイメージは、こちらの方が近いと思います。

ただし、画像フィールドの表示領域が広くなってしまったり、操作者によって拡大率に差が出てしまい、拡大しすぎた結果画質が荒くなってしまう可能性もあります（設定で最低限のサイズ確保は可能）。

それに対して「Focal Point」は画像上に表示される十字線を動かすことで、どの部分を中心にトリミングするのかを指定します。
範囲などの細かい指定はできませんが、トリミングの中心になる場所を指定するだけでトリミングしてくれます。

どちらが操作者に合うか考えて、合う方を選んでもいいですし、両方インストールをして設置場所に応じて使い分けてもいいかもしれません。

Crop APIのインストール

Crop APIモジュール本体と一緒に「Image Widget Crop」や「Focal Point」などのUIモジュールが必要になるので、必要なUIモジュールも一緒にインストールします。

今回は「Image Widget Crop」と「Focal Point」両方のインストール方法や使い方をご紹介します。

この2つはトリミング方法がかなり違ってくるので、両方見た上で使いたいUIモジュールをインストールして設定するのをオススメします。

モジュールのインストール

まずは「Crop API」と「Image Widget Crop」もしくは「Focal Point」をインストールします。
それぞれのモジュールページへアクセスして、ページ下にComposerのインストールコマンドがあるので実行してインストールします。

ちなみに、今回試すバージョンはそれぞれ下記の通りです。
「Image Widget Crop」と「Focal Point」に関しては、どちらか使いたい方をインストールすればOKです。

• Drupal：10.10
• Crop API：2.3
• Image Widget Crop：2.4
• Focal Point：2.0.2

管理画面から有効化する場合

モジュールをインストールしたら、今度は管理画面からそのモジュールを有効化します。Drupalの管理画面メニューの［機能拡張］をクリックします。

モジュールをインストールしていると、このモジュール一覧ページに新しく「Crop API」と「Image Widget Crop」や「Focal Point」の項目が追加されています。

チェックを入れてページ最下部の「インストール」をクリックすれば完了です。

Drushで有効化する場合

Drushを使っている場合は下記のコマンドでも有効化できます。

#「Crop API」モジュールの有効化
drush en crop

#「Focal Point」モジュールの有効化
drush en focal_point

#「Image Widget Crop」モジュールの有効化
    drush en image_widget_crop

Drushのインストール方法は過去に記事にしているので、気になる方はそちらもご覧ください。

参考：ターミナルからDrupalを操作する「Drush」コマンドのインストール方法や基本的な使い方

Image Widget Cropを使う方法

クロップタイプを設定する

Drupal管理画面メニューの［管理］→［環境設定］→［Crop Types］を選択して、クロップタイプの一覧画面へ移動します。
クロップタイプは、画像をトリミングするときの比率やトリミングの最小値などを指定しておきます。

「Add crop type」ボタンをクリックして、クロップタイプを新規作成しましょう。

新規追加画面が表示されるので、各設定項目を入力していきましょう。
ちなみに「名前」が必須で、それ以外の項目は不要であれば設定しなくても問題ありません。

「Aspect Ratio」はトリミングする画像の比率を指定します。
空欄だと特に指定無しで、指定したい場合は「16:9」のように横幅と高さの順に比率を入力します。

「Soft limit」と「Hard limit」はそれぞれトリミングする画像の幅と高さの最小値を指定します。
トリミングの仕方によっては、画像内の一部小さな箇所をトリミングしてしまい、画質が荒くなってしまう可能性があります。
それを防止するのが、この「Soft limit」と「Hard limit」です。

「Soft limit」に指定した横幅と高さより小さくトリミングしようとすると、警告が表示されます。あくまで警告が表示されるだけでトリミングは実行できてしまいます。
それに対して「Hart limit」の方は、指定した値より小さくトリミングすることはできなくなります。

このように警告だけするのか、完全に禁止にするのかの違いがあります。

設定がすべて完了したら、ページ最下部の「Save crop type」をクリックして保存しましょう。

画像スタイルを設定する

次は先ほどのクロップタイプを画像フィールドに紐付けるために、画像スタイルを設定しましょう。

Drupal管理画面メニューの［管理］→［環境設定］→［画像スタイル］を選択して、画像スタイルを選択します。

「画像スタイルを追加」から新規追加します。

今回、画像スタイルの名前は分かりやすいように「Image Widget Crop Image Style」としておきます。

次はエフェクトの選択ですが、Image Widget Cropモジュールをインストールしていると、エフェクトに新しく「Manual crop」が追加されています。
このエフェクトを選択して「追加」ボタンをクリックします。

追加時に「Crop type」の選択画面が表示されるので、先ほど作成したクロップタイプを選択して「エフェクトの追加」ボタンをクリックします。

エフェクトの追加ができたら、「保存」ボタンをクリックして画像スタイルを保存します。

Image Widget Crop共通設定を設定する

クロップタイプと画像スタイルの設定ができたので、ここで一度「Image Widget Crop」の共通設定をしておきます。

Drupal管理画面メニューの［管理］→［環境設定］→［ImageWidgetCrop settings］を選択します。

ここで共通の設定が可能で、大きく分けて「Cropper library settings」と「General configuration」の2つの設定ができます。

「Cropper library settings」ではトリミング時に使用するライブラリの「cropper.js」の読み込み先を変えたい場合にパスを入力します。

空の場合はプレースホルダーに表示されているCDNが読み込まれます。
古いバージョンを使用したい場合などに変更できますが、基本的には空のままで問題なさそうです。
また、変更したあとは反影するためにキャッシュクリアが必要になります。

「General configuration」ではそれ以外の共通設定ができます。
ここで設定した項目は、後述する画像フィールドの設定時のデフォルトとして使用されます。

設定項目	設定内容
Always expand crop area	チェックを入れると、常にトリミングエリアが開いた状態で表示される
Warn user when a file have multiple usages	チェックを入れると、ファイルが複数使用されている場合に警告が表示される
Show default crop area	チェックを入れると、デフォルトのトリミング領域が表示される
Cropping Notifications （Crop apply）	チェックを入れると、トリミング適用時に通知が表示される
Cropping Notifications （Crop update）	チェックを入れると、トリミングの更新時に通知が表示される
Crop preview image style	トリミングプレビュー用の画像スタイルを選択する
Crop Type	画像に適用するクロップタイプを選択する
Set Crop Type as required	要求された場合に使用するクロップタイプを選択する

設定が出来たら「構成を保存」で保存します。

Image Widget Cropの画像フィールドを設定する

次はトリミングできるようにしたい画像フィールドを設定します。
今回は試しに、コンテンツタイプが「記事」の「画像」項目にアップロードする画像をトリミングできるようにしてみます。

Drupal管理画面の［サイト構築］→［コンテンツタイプ］を選択します。

コンテンツタイプの一覧が表示されるので、「記事」の右端にある「矢印」アイコンをクリックして［フォームの表示管理］を選択します。

あとは設定したい画像フィールドの「画像」セレクトボックスを選択して「ImageWidget crop」に変更します。

変更したら、右端の「歯車」アイコンをクリックして詳細な設定を表示します。
この設定は先ほど設定した、Image Widget Cropの共通設定内の「General configuration」で設定した内容がデフォルトとして設定されます。

設定したら「更新」をクリックして、ページ最下部の「保存」ボタンもクリックして保存します。

表示管理の画像フィールドに画像スタイルを設定する

最後に表示管理の画像フィールドに、先ほど作成した画像スタイルを設定します。
この設定をしておかないと、管理画面でトリミングをしてもサイト上ではトリミングしていないアップロードしたままの画像が表示されてしまいます。

［表示管理］タブへ移動して、「画像」の1番右端の「歯車」アイコンをクリックします。

「画像のスタイル」で先ほど作成した画像スタイルの「Image Widget Crop Image Style」を選択します。
選択したら「更新」ボタンを押して、ページ最下部の「保存」ボタンを押して設定完了です。

Image Widget Cropで実際にトリミングする

すべての設定が完了したので、実際にコンテンツを追加してトリミングができるようになっているか確認しましょう。

記事コンテンツを追加して、画像をアップロードします。
アップロードが完了したら画像の下に「Crop image」という項目が追加されています。

閉じていればクリックで開けるので開きましょう（設定で「Always expand crop area」にチェックが入っていればデフォルトで開いた状態になります）。

ここで画像のどの部分をトリミングするか選択できるので、枠をドラッグアンドドロップで移動してトリミングを行います。
最初の状態に戻したい場合は「Reset crop」ボタンを押せばリセットできます。

また、クロップタイプの「Soft limit」で設定した値を下回った場合は、枠が赤くなって警告されます。

トリミングは特に確定ボタンがあるわけではなく、そのまま記事を保存すれば、トリミングされた画像が確認できます。

Image Widget Cropを使えば、このようにDrupalの管理画面上で簡単に画像のトリミングができるようになります。

Focal Pointを使う方法

クロップタイプを設定する

Drupal管理画面メニューの［管理］→［環境設定］→［Crop Types］を選択して、クロップタイプの一覧画面へ移動します。

「Focal Point」モジュールをインストールしていれば、デフォルトで「Focal point」という名前のクロップタイプが作成されています。

「編集」ボタンをクリックして編集画面に移動して設定しましょう。
設定に関してはImage Widget Cropのときとまったく同じになります。

設定がすべて完了したら、ページ最下部の「Save crop type」をクリックして保存します。

画像スタイルを設定する

次に画像スタイルの設定をします。
Drupal管理画面メニューの［管理］→［環境設定］→［画像スタイル］を選択して、画像スタイルの一覧画面へ移動します。

「画像スタイルを追加」をクリックして、新たに画像スタイルを作成しましょう。
画像スタイル名は、分かりやすいように「Focal Point Image Style」としておきます。

次はエフェクトの選択ですが、Focal Pointモジュールをインストールしていると、エフェクトが2つ追加されています。
必要な方のエフェクトを選択して「追加」ボタンをクリックします。

• Focal Point Crop：画像のトリミングを行う
• Focal Point Scale and Crop：画像のトリミングと拡大・縮小を行う

すると、どちらのエフェクトを選択した場合でも、トリミングされたあとの「横幅」と「高さ」を指定する画面が表示されます。

設定ができたら「保存」ボタンをクリックして保存しましょう。

Focal Pointの画像フィールドを設定する

次はトリミングできるようにしたい画像フィールドを設定します。
Image Widget Cropと同じように、コンテンツタイプが「記事」の「画像」項目にアップロードする画像をトリミングできるようにしてみます。

Drupal管理画面の［サイト構築］→［コンテンツタイプ］を選択します。

コンテンツタイプの一覧が表示されるので、「記事」の右端にある「矢印」アイコンをクリックして［フォームの表示管理］を選択します。

あとは設定したい画像フィールドの「画像」セレクトボックスを選択して「Image (Focal Point)」に変更します。

選択したら、今度は右端の「歯車」アイコンをクリックして詳細な設定を行います。

「画像スタイルのプレビュー」は編集中のプレビュー画像として使用されるので、先ほど作成した「Focal Point Crop」などのエフェクトを設定した画像スタイルを選択しないように注意してください。

「Default focal point value」では、トリミングの中心となる位置の座標を指定します。
単位はパーセントで、デフォルトは「50,50」なので「左から50%、上から50%の位置を中心にトリミングする」という意味になります。

設定できたら「保存」ボタンを押して保存しましょう。

表示管理の画像フィールドに画像スタイルを設定する

最後に表示管理の画像フィールドに、先ほど作成した画像スタイルを設定します。
［表示管理］タブへ移動して、「画像」の右端の「歯車」アイコンをクリックします。

「画像のスタイル」で先ほど作成した「Focal Point Image Style」画像スタイルを選択します。
選択したら「更新」ボタンを押して、ページ最下部の「保存」ボタンを押して設定完了です。

Focal Pointで実際にトリミングする

これで設定は完了なので、実際に画像のアップロードとトリミングをしてみます。
記事コンテンツを追加して、画像をアップロードします。

アップロードが完了したら、画像のプレビュー表示に重なる形で、白い十字線が表示されています。

この十字線を、トリミングで真ん中に指定したい場所にドラッグするか、もしくは画像をクリックして十字線を移動して設定します。

また、十字線をダブルクリックすると、「Focal point」という入力フィールドが下に表示されて、正確な座標を入力して指定できるようになります。

トリミング後の表示を確認したい場合は、画像のプレビュー表示のすぐ下に表示されている「プレビュー」をクリックします。

クリックすると「Images preview」モーダルが開いて、画像スタイルごとにどのようにトリミングされるかプレビュー表示されます。

このように「だいたいこの辺を中心にトリミングしたい！」というときに簡単な操作でトリミングできるのが「Focal Point」の特徴です。

まとめ

「Image Widget Crop」と「Focal Point」はどちらもCrop APIを使って画像トリミングするためのUIモジュールですが、トリミングの方法は全然違うのが分かったのではないでしょうか。

個人的には「Image Widget Crop」の方が細かく設定できて便利だと思います。

ただ、そこまで細かく範囲指定をしなくても中心だけ指定できれば問題ない場合や、大量に画像を設定しないといけない場合などは画像フィールド1つ1つ範囲指定をしていくよりも十字線を移動していく方が設定がラクになりそうです。

モジュール2つとも有効にして、画像フィールドによって使い分けることもできるので、実際の運用をイメージして設定するようにしましょう。