Media Responsive Thumbnail
Media参照フィールド用のフィールドフォーマッターを追加し、Drupal CoreのResponsive Imageモジュールを使用してレスポンシブ画像を表示します。
media_responsive_thumbnail
インストール
composer require 'drupal/media_responsive_thumbnail:^2.0'
概要
Media Responsive Thumbnailは、DrupalのMediaモジュールとResponsive Imageモジュールの間のギャップを埋める専用のフィールドフォーマッターを提供します。このフォーマッターにより、Mediaエンティティ参照フィールドを、Responsive Imageフォーマッターを使用した標準の画像フィールドとまったく同じように表示できます。
このモジュールは、Drupalにおいてメディア参照フィールドがネイティブでレスポンシブ画像スタイルを使用できないという一般的な課題を解決します。CoreのResponsiveImageFormatterを拡張することで、適切なsrcset生成、アートディレクションサポート、解像度切り替えなど、すべてのレスポンシブ画像機能をメディアフィールドに提供します。
フォーマッターは自動的にメディアエンティティのソースフィールドを検出し、レンダリングに使用します。ソースフィールドが空の場合は、メディアエンティティのサムネイルを使用するようにフォールバックします。これにより、フォーマッターはさまざまなメディアタイプで確実に動作します。
Features
- メディアエンティティを対象とするエンティティ参照フィールド用の「Responsive thumbnail」フィールドフォーマッターを提供
- Drupal CoreのResponsiveImageFormatterを拡張し、すべてのレスポンシブ画像機能を継承
- 親コンテンツエンティティまたはメディアアイテム自体への画像リンクをサポート
- 画像表示にメディアソースフィールドを自動的に使用し、サムネイルへのフォールバックも対応
- レスポンシブ画像スタイルと個別の画像スタイルからのキャッシュタグを適切に処理
- レスポンシブ画像フォーマッターから継承された遅延読み込み設定をサポート
- 適切な言語対応URL生成による完全な多言語サポート
- Drupal 8、9、10、11に対応
Use Cases
複数のブレイクポイントを持つヒーロー画像
さまざまなブレイクポイントで異なる画像のトリミングやサイズを表示する必要があるヒーローセクションを構築する場合、モバイル、タブレット、デスクトップに適切な画像スタイルを定義したレスポンシブ画像スタイルと共にこのフォーマッターを使用します。Mediaライブラリの再利用性を活かすため、直接画像フィールドではなくメディア参照フィールドを通じてヒーロー画像を参照してください。
記事のアイキャッチ画像
Mediaライブラリをアイキャッチ画像に使用する記事コンテンツタイプの場合、アイキャッチ画像の表示をResponsive thumbnailフォーマッターを使用するように設定します。これにより、一元化されたメディア管理の利点を維持しながら、すべてのデバイスでアイキャッチ画像が最適に読み込まれます。
レスポンシブサムネイル付きのギャラリーや一覧ページ
Viewや一覧コンテキストでメディアアイテムを表示する場合、このフォーマッターを使用してサムネイルが利用可能なスペースに適応するようにします。複数の解像度を含むレスポンシブ画像スタイルと組み合わせることで、高DPIディスプレイで最適な読み込みパフォーマンスを提供します。
画像フィールドからメディア参照フィールドへの置き換え
Mediaライブラリを活用するために直接画像フィールドからメディア参照フィールドに移行する場合、このフォーマッターを使用すると、以前標準画像フィールドのレスポンシブフォーマッターで利用可能だったレスポンシブ画像の動作を維持できます。
Tips
- このフォーマッターを設定する前にレスポンシブ画像スタイルを作成してください - このフォーマッターを使用するには少なくとも1つのレスポンシブ画像スタイルが必要です
- 記事のティーザーでメディアを表示する場合は「コンテンツにリンク」オプションを使用して、記事全体へのクリック可能なサムネイルを作成してください
- ファーストビュー以下の画像には遅延読み込みを有効にして、ページ読み込みパフォーマンスを向上させてください
- このフォーマッターは「Image」メディアタイプだけでなく、画像ソースフィールドを持つすべてのメディアタイプで動作します
- 最適なパフォーマンスのため、レスポンシブ画像スタイルに一般的なビューポート幅に適した画像スタイルマッピングを含めてください
Technical Details
Troubleshooting 4
「Responsive thumbnail」フォーマッターは、特にメディアエンティティを対象とするエンティティ参照フィールドにのみ表示されます。フィールドストレージ設定で、フィールドの「参照タイプ」が「Media」に設定されていることを確認してください。
フォーマッター設定で有効なResponsive Image Styleが選択されていることを確認してください。また、メディアエンティティに有効なソース画像がアップロードされていること、およびレスポンシブ画像スタイルで参照されている画像スタイルが存在することを確認してください。
リンクは、フォーマッターで「image_link」設定が構成されている場合にのみ表示されます。フィールドの表示設定を編集し、フォーマッター設定で「コンテンツにリンク」または「メディアアイテムにリンク」を選択してください。
これはメディアエンティティのソースフィールドが空の場合に発生します。この場合、フォーマッターはサムネイルにフォールバックします。メディアエンティティのプライマリソースフィールドに画像が設定されていることを確認してください。
Security Notes 2
- このモジュールはDrupalのセキュリティアドバイザリーポリシーの対象です
- フォーマッターはレンダリング前にエンティティアクセスを適切にチェックし、ユーザーが閲覧権限を持つメディアのみが表示されることを保証します