Drupal 9用のColorBoxモジュールに関する包括的なチュートリアル（およびそれを拡張する方法）

公開: 2020-09-29

画像は、Webサイトのユーザーエクスペリエンスを向上させる上で重要な役割を果たします。ある研究によると、私たちが脳に渡す情報の90％は視覚的なものです。多くのWebサイトは、この理論を単独で回避し、画像やビデオファイルなどの大量のリッチメディアでユーザーを攻撃します。それらのほとんどは、これらのメディアファイルのプレゼンテーションの側面を見落とし、期待外れのユーザーエクスペリエンスになってしまいます。彼らが必要としているのは、画像をエレガントかつ直感的に表示できる非常に軽量なjQueryプラグインであるColorBoxのようなツールです。スタイルと機能は、CSSとJavascriptを介して高度にカスタマイズできます。 Drupal ColorBoxモジュールは、Drupal 6、7、8、そして今ではDrupal9とも互換性があります。この記事では、Drupal 9のColorBoxモジュールを構成、実装、さらに拡張する方法を学習します。

DrupalのColorBox

ColorBoxモジュールは、ColorBoxjQueryプラグインとDrupalに統合されています。プラグインは、jQuery用の軽量でカスタマイズ可能なライトボックスです。同様の目的で使用される他の競合他社の「ボックス」モジュール（Thickbox、Lightbox2、Shadowbox、Greyboxなど）の中で、ColorBoxモジュールが最も人気があり、インストール数が最も多くなっています。 Drupal ColorBoxの使用法は、アップロードされた画像を美しく表示するだけではありません。また、ビデオ、PDF、ノード、分類法、Webフォーム、iframedコンテンツなどのスタイリングもサポートしています。スタイリングはCSSを介して制御できるため、外観は高度にカスタマイズ可能です。機能は、HTMLに触れることなく、JSファイルを介して簡単にカスタマイズすることもできます。写真のグループ化もサポートし、今後の画像をプリロードします

ColorBoxモジュールをインストールする手順

1.Composerを使用してColorBoxモジュールをインストールします。

 composer require 'drupal/colorbox:^1.6'
composer require 'drupal/colorbox:^1.6'

2.ColorBoxプラグイン1.xをダウンロードします。
1. [ダッシュ]コマンドを使用する
（注：drushコマンドを使用してColorBoxプラグインをインストールする場合は、モジュールを有効にしてから、以下のコマンドを実行する必要があります）

 drush colorbox-plugin
drush colorbox-plugin

2.ColorBoxプラグインを手動でダウンロードします
Colorboxプラグインをダウンロードし、/ librariesで解凍します。プラグインファイルへのパスが次のようになっていることを確認してください。

 “/libraries/colorbox/jquery.colorbox-min.js”
“/libraries/colorbox/jquery.colorbox-min.js”

3. DrupalColorBoxモジュールを有効にします。

 drush en -y colorbox
drush en -y colorbox

おめでとう！これで、ColorBoxモジュールの機能を使用する準備が整いました。

ColorBoxモジュールの構成

[構成]-> [メディア]-> [カラーボックス設定]に移動して、DrupalColorBoxモジュールを構成します。

ColorBoxを使用して画像ギャラリーを作成する方法

1.画像ギャラリーを作成するには、まず、コンテンツタイプの1つに画像フィールドを追加する必要があります。ラベル名を選択し、[保存して続行]ボタンをクリックします。

2.次のステップは、フィールド設定を構成することです。画像がアップロードされていない場合は、デフォルトの画像を追加できます。アクセシビリティを目的とした代替テキストとタイトル。許可される値の数の設定は、フィールドの最大アップロード制限を示しています。目的のオプションを選択し、[フィールド設定の保存]ボタンをクリックします。

3.次に、許可されたファイル拡張子、ファイルディレクトリ、最大および最小画像解像度、最大アップロードサイズ、画像の代替およびタイトルなど、この画像フィールドの他の構成を設定し、設定の保存をクリックします。

4.これで、画像フィールドの構成が完了しました。 ColorBox用に作成された画像フィールドのフォーマットオプションを設定しましょう。コンテンツタイプの表示の管理に移動し、ドロップダウンからフォーマットオプションをColorBoxとして設定します。フォーマットオプションの横にある歯車をクリックすると、表示される画像をカスタマイズできます。すべてのオプションが更新されたら、[更新]ボタンをクリックしてから、[保存]オプションをクリックします。

5.次に、[コンテンツの追加]をクリックして、ColorBox画像ギャラリーにコンテンツを追加しましょう。画像の重みに基づいて、アップロードされる画像の順序を変更できます。次に、保存ボタンをクリックします。コンテンツの表示は以下のようになります。

6.最後に、画像のいずれかをクリックすると、以下に示すように、ColorBoxモーダル内に画像が表示されます。

ビデオ埋め込みフィールドでも同じことができます。

ColorBoxインラインモジュールと統合する方法

Colorbox Inlineモジュールを使用すると、ユーザーはColorBox内のページに既にあるコンテンツを開くことができます。

1.カラーボックスインラインモジュールをインストールします

composer require 'drupal/colorbox_inline:^1.2'
composer require 'drupal/colorbox_inline:^1.2'

2.drushコマンドを使用してモジュールを有効にする/ drupalUIを使用して手動で有効にする

drush en -y colorbox_inline
drush en -y colorbox_inline

3.リンクを使用してページ上にあるColorBoxモーダルで画像を開きます

4.コンテンツの追加に移動します->本文フィールドを持つ任意のコンテンツタイプ

テキストフォーマッタを基本的なhtmlから完全なhtmlに変更します

6.次に、保存ボタンをクリックします。

上記の例では、アンカータグのdata-colorbox-inline属性に、idの代わりにクラス名を含めることもできます。画像の表示は、ページ内の既存の画像を開くためのリンクです（プロジェクトの要件に応じて変更を変更します）。このモジュールを使用して、ビデオ、Webフォームなどの任意のコンテンツを同様の方法でレンダリングできます。

このページを見ると、画像へのリンクが表示されます。また、画像の表示リンクをクリックすると、下の画像に示すようにColorBoxポップアップが表示されます。

ColorBoxをColorBoxロードモジュールと統合する方法

ColorBox Loadモジュールを使用すると、ユーザーはAjaxを使用してコンテンツをColorBoxにロードできます。このモジュールを使用すると、ユーザーはレンダリング時にコンテンツを含むColorBoxを開く一連のパスを指定できます。パス管理インターフェイスのNGライトボックスモジュールに依存します。このメソッドは、ノード、ページ、Webフォームなどをレンダリングするために使用できます。
カラーボックスロードモジュールをインストールします

composer require 'drupal/colorbox_load:^1.2'
composer require 'drupal/colorbox_load:^1.2'

drushコマンドを使用してモジュールを有効にする/ drupalUIを使用して手動で有効にする

drush en -y colorbox_load
drush en -y colorbox_load

ColorBoxLoadモジュールを使用したログインポップアップの実装。

1. [構成]-> [Ngライトボックス（メディアの下）]に移動して、ColorBoxロードモジュールを構成します。 ColorBoxモーダル表示、ColorBoxモーダルの幅、ライトボックスモーダルのクラス、およびレンダラーオプションを提供するパスを構成できます。（必要に応じてオプションを選択してください）。

2.これで、ホームページのログインボタンをクリックして、ログインページに実装されたDrupalColorBoxモーダルを確認できます。

ColorBoxをDrupalビューと統合する方法

一部のWebサイトでは、画像のリストにColorBoxモーダルを表示できる機能が必要になる場合があります。これは、Viewsモジュールを使用して実行できます。
1.構造->ビュー->ビューの追加に移動します。
2.画像フィールドを追加して、フォーマッタを表示し、それに応じてColorBoxおよびその他の設定に構成してから、ビューを保存します。

3.作成したばかりのビューを見てみましょう（私の場合、ビューをページとして作成しました）。画像のリストが表示され、そのうちの1つをクリックすると、個々の画像がColorBoxポップアップウィンドウに表示されます。