View Modes Inventory - Bootstrap Ready
コンテンツタイプ用のBootstrap対応ビューモードを包括的に提供し、Display SuiteとUI Patternsを使用してレイアウトを自動マッピングします。
vmi
インストール
composer require 'drupal/vmi:^3.0'
概要
View Modes Inventory（VMI）は、コンテンツをカード形式で表示するために設計された17種類のBootstrap対応ビューモードを標準化されたコレクションとして提供するDrupalモジュールです。このモジュールはNodeエンティティ用のビューモードを自動的にインストールし、任意のコンテンツタイプに適用できる設定テンプレートを提供します。
サイト管理者がエンティティ表示設定を通じてコンテンツタイプのVMIビューモードを有効にすると、モジュールはVarbase ComponentsライブラリのUI Patternsを使用して事前設定されたDisplay Suiteレイアウトを自動的に適用します。この自動化により、ウェブサイト全体で一貫したカードベースのコンテンツ表示を設定するのに必要な時間が大幅に短縮されます。
このモジュールは4つの異なるカードレイアウトスタイルをサポートしています：Impressedカード（コンテンツの上にメディアを配置）、Featuredカード（レスポンシブなカラムレイアウトでメディアとコンテンツを横並びに配置）、Overlayカード（メディアの上にテキストを重ねて表示）、Textカード（メディアなしのコンテンツのみ）、Heroカード（フルワイドのオーバーレイスタイル）。各スタイルはさまざまなデザイン要件に対応するために複数のサイズ（xsmall、small、medium、large、xlarge）で利用可能です。
Features
- 5つのカードスタイルに整理された17種類の事前設定済みエンティティビューモードをNodeコンテンツ用に提供：Impressed（5サイズ）、Featured（5サイズ）、Text（3サイズ）、Overlay（3サイズ）、Hero（1サイズ）
- ビューモード有効時の自動レイアウトマッピング - Display Suiteの手動設定は不要
- Bootstrap 5互換のカードレイアウト用にVarbase ComponentsのUI Patternsを使用（card_impressed、card_featured、card_text、card_overlay、card_hero）
- 既存フィールド（field_image、field_video、field_media、body）に基づいて設定を自動的にフィルタリングするスマートフィールド検出
- 新しいコンテンツタイプへのカスタマイズと拡張用の設定テンプレートを同梱
- カード本文の自動テキスト切り詰め用にSmart Trimモジュールと統合
- リンク付きのNode titleを適切にレンダリングするためのDisplay Suiteフィールドテンプレート
- BootstrapのグリッドシステムをサポートするFeaturedカード用のレスポンシブカラム設定
Use Cases
カードベースのティーザーを使ったブログ一覧の作成
ブログセクションを構築する際、Articleコンテンツタイプの「Impressed card - medium」ビューモードを有効にします。これにより、上部にアイキャッチ画像、その下にタイトルと切り詰められた本文抜粋を配置したカードレイアウトが自動的に設定されます。このビューモードをViewsリストで使用して、一貫した記事カードのグリッドを作成できます。
注目コンテンツ用のヒーローセクション構築
目立つコンテンツを特集するホームページのヒーローセクションには、「Hero card」ビューモードを有効にします。これにより、メディアを背景としコンテンツをオーバーレイ表示するフルワイドのカードが作成されます。設定にはインパクトのあるヒーロー表示のための適切なアスペクト比（21:9）と配置が含まれています。
サイドバーのコンテンツティーザー作成
関連コンテンツを表示するサイドバーウィジェットには、「Text card - small」または「Featured card - xsmall」ビューモードを使用します。これらのコンパクトなフォーマットは、メディアなしで狭いカラムレイアウトに適した最小限の情報（タイトルと短い抜粋）を表示します。
マガジンスタイルのレイアウト実装
単一のページレイアウトで複数のVMIビューモードを組み合わせます：リードストーリーには「Hero card」、横並びメディア付きの二次的な注目アイテムには「Featured card - large」、標準記事のグリッドには「Impressed card - medium」、視覚的に目立つカテゴリ特集には「Overlay card - medium」を使用します。
VMIをカスタムコンテンツタイプに拡張
新しいカスタムコンテンツタイプにVMI設定を適用するには、src/assets/config_templates/CONTENT_TYPE_NAME/から設定テンプレートをカスタムモジュールのconfig/install/ディレクトリにコピーし、ファイル名とファイル内容の両方で'CONTENT_TYPE_NAME'のすべてのインスタンスを実際のコンテンツタイプのマシン名に置き換えます。
Tips
- レスポンシブなカラムブレークポイントを持つ横並びのメディアとコンテンツレイアウトが必要な場合は、Featuredカードビューモードを使用
- Overlayカードは、オーバーレイテキストの可読性のために十分なコントラストを持つ画像で最も効果的
- Textカードは、検索結果やシンプルなコンテンツリストなど、メディアが利用できないか不要なリストに最適
- モジュールはコンテンツタイプに存在しないフィールドの設定を自動的にフィルタリングするため、未使用のフィールド参照を削除する心配は不要
- 設定をカスタマイズする際は、アップグレード可能性を維持するためにVMIソースファイルを変更するのではなく、テンプレートを独自のモジュールにコピー
- カードサイズを選択する際はコンテンツ階層を考慮 - 注目コンテンツには大きなカード（xlarge、large）を、補助コンテンツには小さなサイズを使用
Technical Details
Hooks 2
hook_help
View Modes Inventoryの機能を説明するモジュールのヘルプページ用テキストを提供します。
hook_form_entity_view_display_edit_form_alter
エンティティビュー表示編集フォームを変更し、ビューモード有効時にVMIレイアウト設定を自動適用するサブミットハンドラーを追加します。
Troubleshooting 4
コンテンツタイプに必要なフィールド（title、およびオプションでbody、field_image、field_video、またはfield_media）があることを確認してください。ビューモード有効化後にDrupalキャッシュをクリアしてください。デフォルトテーマがVarbase Components UI Patternsをサポートしていることを確認してください。
テーマがBootstrapベースであり、Varbase Componentsカードパターンに必要なCSSが含まれていることを確認してください。レイアウト設定のテーマ名が期待どおりであることを確認してください（DEFAULT_ACTIVE_THEMEプレースホルダーはアクティブなテーマに解決される必要があります）。
コンテンツタイプに正確に'field_image'、'field_video'、または'field_media'という名前のメディア参照フィールドがあることを確認してください。これらはモジュールが自動的にサポートする唯一のフィールド名です。また、適切なメディアビューモード（media_16_09、media_21_09、media_video_16_09、media_video_21_09）がメディアタイプで設定されていることを確認してください。
Smart Trimモジュールがテキストの切り詰めを処理します。Smart Trimが適切にインストールおよび設定されていることを確認してください。デフォルトの切り詰め長はカードサイズによって異なります（通常、ビューモードに応じて30〜300語）。