Display Suite
Display Suiteを使用すると、ドラッグ＆ドロップインターフェースでコンテンツの表示を完全に制御できます。
ds
インストール
composer require 'drupal/ds:8.x-3.32'
概要
Display Suiteは、Drupalでコンテンツ、ユーザー、その他のEntityの表示を制御するための強力で柔軟な方法を提供します。コアのField UIを拡張し、サイト構築者がレイアウトの選択、カスタムFieldの作成、FieldテンプレートのField適用を通じてEntity表示をより細かく制御できるようにします。
Display Suiteを使用すると、コンテンツに異なるレイアウト（1〜4カラム、スタック、フルイドバリアント）を選択し、Fieldを異なるリージョンにドラッグ＆ドロップし、動的Field（Token、Twig、Block、CopyのField）を作成し、Fieldテンプレートで HTML マークアップ出力を制御できます。Viewsと統合し、交互ビューモード、グループ化、言語レンダリングを備えた高度なEntityの行スタイリングオプションを提供します。
Display Suiteは、DrupalコアのEntity表示システムの上に位置するレイヤーとして機能し、その設定をEntity view displayのサードパーティ設定として保存します。計算値、Block、またはカスタムコンテンツを表示できるカスタムDS Fieldを作成するための独自のPluginシステムを提供します。
Features
- Manage display画面でFieldをレイアウトリージョンに配置するためのドラッグ＆ドロップインターフェース
- 1、2、3、4カラムレイアウトを含む複数のビルトインレイアウト（スタック、フルイド、等幅バリアント付き）
- カスタムField作成：Token Field、Twig Field、Block Field、および既存のField定義を再利用するCopy Field
- 個々のFieldのマークアップ出力をラッパー、クラス、属性で制御するFieldテンプレート（Default、Minimal、Expert、Reset）
- 交互ビューモード、グループ化、delta Field、高度なレンダリング制御をサポートするDS Entity RowプラグインによるViews統合
- ビューモード間で表示設定をコピーするレイアウトクローン機能
- Display Suiteレンダリングを一時的に無効にする緊急モード
- リージョンとFieldのCSSクラス管理
- カスタムFieldでの動的コンテンツ用TokenおよびTwigサポート
- 登録済みレイアウトを使用するためのLayout Discovery統合
Use Cases
マルチカラム記事レイアウトの作成
Display Suiteを使用して記事コンテンツタイプ用の2または3カラムレイアウトを作成します。管理 > サイト構築 > コンテンツタイプ > 記事 > 表示管理に移動し、DSレイアウト（例：Two column stacked）を選択し、Fieldを適切なリージョンにドラッグします（ヘッダーにタイトル、左カラムにメインコンテンツ、右カラムに作成者や日付などのメタデータ、フッターにタグ）。保存して記事を表示し、新しいレイアウトを確認します。
カスタム計算Fieldの追加
管理 > サイト構築 > Display Suite > Field > Twig Fieldを追加でTwig Fieldを作成します。「読了時間」と名付け、「Node」Entityタイプを選択し、「{{ (entity.body.value|striptags|split(' ')|length / 200)|round }} min read」のようなTwigコードを入力します。このFieldを任意のNode表示に配置して推定読了時間を表示できます。
Entity表示へのBlockの埋め込み
Block Fieldを使用してEntity表示にBlockを直接埋め込みます。管理 > サイト構築 > Display Suite > Field > Block Fieldを追加に移動し、Block（例：関連コンテンツのViews Blockやカスタム Block）を選択し、このFieldを他のFieldと同様にEntityの表示に配置します。
Viewsでの交互ティーザーの作成
Viewsリストで、DS Entity Row形式を使用し、「Alternating view mode」を有効にします。奇数行と偶数行に異なるビューモード（例：TeaserとTeaser Alternate）を設定して、コンテンツリストに視覚的なバリエーションを作成します。
Expertテンプレートでのマークアップ制御
DS設定でFieldテンプレートを有効にし、Manage displayでFieldの設定ギアをクリックして「Expert」テンプレートを選択します。外側ラッパー（div、spanなど）を設定し、「field-featured」などのカスタムクラスを追加し、属性を設定し、プレフィックス/サフィックスHTMLを追加してField出力を完全に制御します。
Node単位のビューモード選択
DS Switch View Modeサブモジュールを有効にし、Node用に複数のビューモード（例：Full、Full with sidebar、Landing page）を作成し、Nodeを編集するときに「表示設定」セクションを使用して、その特定のNodeを表示するときに使用するビューモードを選択します。
表示設定のクローン
1つのビューモード用の複雑なレイアウトを設定した後、「Clone layout」機能を使用して別のビューモードにコピーします。Manage displayで、レイアウトが選択されていない場合、Clone layoutドロップダウンからソースビューモードを選択して設定を複製します。
Tips
- テーマが独自のレスポンシブグリッドシステムを提供している場合、CSS競合を避けるために「Disable layout CSS styles」オプションを使用してください。
- ResetレイアウトとReset Fieldテンプレートは最小限のマークアップでコンテンツを出力します。CSS/JSで完全に制御したい場合やAPIに出力する場合に便利です。
- Token Fieldはレンダリング時に処理されるため、「X時間前に投稿」やField値に基づく条件付きコンテンツなどの動的コンテンツに適しています。
- Twig Fieldは完全なEntityオブジェクトにアクセスできるため、カスタムコードを書かずに複雑な計算表示を行うのに強力です。
- Copy Fieldを使用すると、再作成せずに複数のEntityタイプでDS Field定義を再利用できます。
- Expert FieldテンプレートはラッパークラスとField属性でToken置換をサポートし、Entityデータに基づく動的スタイリングが可能です。
- カスタムFieldでui_limitを使用して特定のBundleまたはビューモードに制限し、Field UIをクリーンに保ちます。
- デバッグ時、DS DevelのMarkupタブは実際のHTML出力を表示し、テーマ化とトラブルシューティングに非常に役立ちます。
- ds_classes_alter hookを使用すると、モジュールまたはテーマがコンテキストを認識したCSSクラスを動的に追加できます。
- DSはEntity view displayのサードパーティ設定として設定を保存するため、コアの設定管理で完全にエクスポート可能です。
Technical Details
Admin Pages 9
/admin/structure/ds
すべてのEntityタイプとBundleをリストするDisplay Suiteメイン管理ページ。各Entity Bundleの表示設定を管理するためのクイックアクセスを提供します。
/admin/structure/ds/settings
Fieldテンプレートのデフォルト、緊急モード、クラス管理オプションを含むDisplay Suiteのグローバル設定を構成します。
/admin/structure/ds/classes
Manage displayページでレイアウトリージョンとFieldに適用できるカスタムCSSクラスを定義します。
/admin/structure/ds/fields
Token Field、Twig Field、Block Field、Copy Fieldを含むカスタムDisplay Suite Fieldを管理します。
/admin/structure/ds/fields/manage_token
Token置換を使用して動的コンテンツを表示するカスタムFieldを作成します。
/admin/structure/ds/fields/manage_twig
高度な動的コンテンツ用にTwigテンプレート構文を使用してカスタムFieldを作成します。
/admin/structure/ds/fields/manage_block
Entity表示内でBlock PluginをレンダリングするカスタムFieldを作成します。
/admin/structure/ds/fields/manage_copy
既存のDisplay Suite Fieldの出力をコピーするFieldを作成します。
/admin/structure/ds/emergency
Display Suiteレンダリングをサイト全体で一時的に無効にする緊急制御。無限ループや表示の問題をデバッグする際に便利です。
権限 3
Hooks 7
hook_ds_fields_info_alter
DS Field定義がキャッシュされる前に変更します。Fieldプロパティの修正やプログラムによる新しいFieldの追加に使用します。
hook_ds_pre_render_alter
DSが処理する前にEntity render arrayを変更します。レイアウトが適用される前に呼び出されます。
hook_ds_layout_settings_alter
Field UIフォームから保存する際にレイアウト設定を変更します。
hook_ds_layout_region_alter
Field UI表示ページで利用可能なリージョンとリージョンオプションを変更します。
hook_ds_label_options_alter
Fieldで利用可能なラベル表示オプションを変更します。
hook_ds_classes_alter
リージョンまたはFieldで利用可能なCSSクラスのリストを変更します。
hook_ds_views_row_render_entity
Views DS Entity行のレンダリングを制御する高度なhook。Viewsの行設定で「Advanced view mode」を有効にする必要があります。
Troubleshooting 7
レイアウトを選択した後、Manage displayフォームを保存する必要があります。Fieldが消えた場合、それらは最初のリージョンに移動されています。適切なリージョンにドラッグして再度保存してください。
/admin/structure/ds/emergencyの緊急モードを使用してDisplay Suiteを一時的に無効にします。これは多くの場合、同じEntityを参照するEntity表示に埋め込まれたViewを示しています。
DS FieldはDSレイアウトが選択されている場合にのみ表示されます。Manage displayページのレイアウト設定でドロップダウンからレイアウトを選択していることを確認してください。
Fieldの「Limit field」設定を確認してください。Bundle/ビューモードの組み合わせが設定された制限に一致していることを確認します（例：article|*ですべての記事ビューモード）。
FieldテンプレートはDisplay Suite設定（/admin/structure/ds/settings）で有効にする必要があります。「Fieldテンプレートを有効にする」をチェックして保存してください。
Display Suiteは、表示でLayout Builderが有効になっている場合、自動的に無効になります。DSを使用するには、Entity表示設定でLayout Builderを無効にしてください。
「Use view mode of display settings」などの一部のViews行オプションは、DS Switch View Modeサブモジュールを有効にする必要があります。Advanced view modeにはhook_ds_views_row_render_entity()の実装が必要です。
Security Notes 4
- TokenおよびTwig Fieldは生のHTMLを出力できます。これらのFieldを作成および編集する権限は信頼できる管理者のみに付与してください。
- DS Extrasの「Field permissions」機能はきめ細かいアクセス制御を追加しますが、すべてのDS Field用の権限を作成するため、十分にテストする必要があります。
- Block FieldはEntityコンテキストで任意のBlockをレンダリングします。予期しないコンテキストでレンダリングされたときに、Blockが機密データを公開しないことを確認してください。
- Expert FieldテンプレートでTokenを使用する場合、適切にサニタイズされていないと、ユーザー制御のデータが注入される可能性があることに注意してください。