CKEditor上で画像スタイルやレスポンシブ画像スタイルを使用する方法

Drupalには「画像スタイル」や「レスポンシブ画像スタイル」といった画像に特殊な効果を付けたり、レスポンシブに適したサイズに自動的に変換して、デバイス幅に応じて出し分けてくれる機能があります。

ただし、この機能は「画像フィールド」に対して設定するため、通常はDrupalのCKEditor（WYSIWYGエディタ）では使えません。
しかしモジュールを追加することで実現できたので、今回はその方法についてまとめておきます。

なお、今回紹介する方法には下記のような注意点があります。

• 2023年5月時点ではDrupal 10に非対応
• ソースコード表示をして、直接コードを修正する必要がある

せっかくCKEditorでソースコードを触らなくても編集できるようにつくっているのに、わざわざソースコードを直接修正する必要が出てきてしまいます。

編集者がHTMLの知識をあまり持っていない場合は、画像フィールドをつくってしまった方がオペレーションミスなども減ります。
それでも、CKEditorで画像スタイルやレスポンシブ画像スタイルを使いたい場合には参考にしてください。

なお、今回はCKEditor 5で設定を行います。
CKEditor 4でも使用可能ですが、設定画面やエディタの表示が異なる部分があるのでご注意ください。

2023年5月現在ではDrupal 10で使用不可

今回CKEditor上で画像スタイルを使えるようにするためには「Inline responsive images」というモジュールが必要になります。

しかし最初にも説明した通り、本記事の執筆段階の2023年5月時点では、このモジュールの1番新しいバージョンはDrupa 8かDrupal 9にしか対応していません。

Drupal 10には対応していないためインストールもできないため、この方法は使えません。
別途画像フィールドを用意して、普通に画像スタイルやレスポンシブ画像スタイルの追加するなどの別の対応が必要になります。

もしくはこのモジュールがバージョンアップして対応したり、他のモジュールで実現できそうなものがないか探す必要があります。

「Inline responsive images」をインストールする

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

まずは「Inline responsive images」をインストールします。

モジュールページの「Releases」にあるcomposerコマンドを実行します。

コマンドを実行したら、Drupalの管理画面メニューの［機能拡張］をクリックします。
モジュールをインストールしていると、この一覧ページに新しく「Inline responsive images」が追加されています。

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

「Inline responsive images」の設定を有効にする

「Inline responsive images」をインストールすると、CKEditorの設定で画像スタイルやレスポンシブ画像スタイルを有効にする設定が追加されます。
その設定を有効に変更しましょう。

まずはDrupalの管理画面メニューの［環境設定］→［テキストフォーマットとエディター］を選択します。

ここにテキストフォーマットの一覧が表示されるので、今回は「ベーシックHTML」の「設定」ボタンをクリックして設定画面へ移動します。

設定画面の「有効なフィルター」の中に「Display image styles」と「Display responsive images」の2つの設定が追加されています。

それぞれ画像スタイルとレスポンシブ画像スタイルの設定なので、チェックを入れて、画面1番下の「構成を保存」ボタンをクリックして保存します。

これで今回使用したい「data-image-style」と「data-responsive-image-style」という2つの属性が<img>タグに対して使えるようになりました。

属性がフィルタ機能に引っかかって消えないようにする

CKEditor上でソースを修正して「data-image-style」と「data-responsive-image-style」を追加しても、ソース表示を切り替えたり保存したタイミングでこれらの属性が消えてしまう場合があります。

CKEditorには不必要なタグや属性が入ることによって表示が崩れたり、意図しない動作を防止するために、まちがいの修正機能があります。

このまちがいの修正機能が、今回追加された属性まで不必要と判断してしまい、自動的に削除されてしまっているようです。
そうならないために、整形時に指定した属性は無視するよう設定を追加します。

「CKEditor 5 plugin settings」の中にある「Source editing」をクリックします。ここに半角スペースで区切って下記のコードを追加します。

<img data-image-style data-responsive-image-style>

追加したら「構成を保存」ボタンをクリックして保存します。
これで今回追加した属性が自動的に消えなくなりました。

画像をアップロードできるようにする

デフォルトの状態ではCKEditorから画像がアップロードできるようになっていません。わざわざ画像パスを指定する必要が出てきてしまうため非常に使いにくくなっています。

画像をアップロードできるようにしたい場合は、「CKEditor 5 plugin settings」の中の「画像」をクリックして「画像アップロードを有効にする」にチェックを入れます。

あとは必要に応じてアップロードディレクトリや最大ファイルサイズ、最大画像サイズを指定します。

画像スタイルの設定をする

実際に「Inline responsive images」を使ってみる前に、CKEditor上で使いたい画像スタイルやレスポンシブ画像スタイルを用意する必要があります。

それぞれの設定方法は過去に記事にしているので、そちらを参考にしながら作成してください。

参考：画像アップ時に自動でエフェクトを追加するDrupalの画像スタイル機能 | モチヤ株式会社
参考：Drupalでデバイス幅ごとに最適な画像読み込みができる「Responsive Image」モジュール | モチヤ株式会社

「Inline responsive images」の使い方

画像スタイルやレスポンシブ画像スタイルは、CKEditorで画像をアップロードしたあとに、ソースコードを修正し、データ属性を追加することで適用できます。

実際にCKEditorを開いて画像をアップロードしてみましょう。
まずは画像をアップロードします。

アップロードし終わって貼り付けまで完了したら、「Source」ボタンをクリックします。

HTMLコードが表示されて、「<img>」内に属性を追加します。
画像スタイルを追加したい場合は「data-image-style="画像スタイルのID"」を入力し、レスポンシブ画像スタイルを追加したい場合は「data-responsive-image-style="レスポンシブ画像スタイルのID"」を入力します。

<!--画像スタイル -->
<img src="画像パス" data-image-style="画像スタイルのID">
<!-- レスポンシブ画像スタイル -->
<img src="画像パス" data-responsive-image-style="レスポンシブ画像スタイルのID">

上記のコードは少し簡略化していますが、実際はCKEditorに画像をアップロードした場合はalt属性やキャプション、横幅や高さの指定など他の指定も入っています。

画像スタイルのID確認

画像スタイルのIDを確認したい場合は［環境設定］→［画像スタイル（もしくはレスポンシブ画像スタイル）］を開き、確認したいスタイルの右にある「編集」ボタンをクリックします。

「画像スタイル名称（レスポンシブ画像スタイル名称）」の横に「システム内部名称」が表示されています。このシステム内部名称がIDになります。

スタイル名を日本語で入力しているとローマ字で自動的に設定されてあったりするので、シンプルなものに変更したい場合は「編集」をクリックして好きなIDに変更もできます。

表示の確認

入力が完了したら、実際にプレビューしてみて問題なく画像スタイルが反映されているか確認しましょう。

反映されていない場合は下記を確認しましょう。

• 設定したCKEditorを使っているかどうか
• CKEditorで「Display image styles」と「Display responsive images」が有効になっているかどうか
• 画像スタイル・レスポンシブ画像スタイルのIDが正しいかどうか
• CKEditorのまちがい修正機能で属性が除外されていないかどうか

まとめ

ソースコードを修正する必要があるため、あまり手軽に使える方法ではありませんが、CKEditor上にアップした画像でも、画像スタイルやレスポンシブ画像スタイルは適用できました。

もし常に特定箇所に画像を表示させたい場合はCKEditorにアップするのではなく、別途画像フィールドを用意して、普通に画像スタイルやレスポンシブ画像スタイルを追加した方が設定し忘れやミスを防止できそうです。

しかし画像フィールドを用意したりなどの設定が面倒なため、一時的にCKEditorから使えるようにするのは1つの手段として知っておいて損はないかもしれません。