Field Group Background Image

Field Groupモジュールに「Background Image」フォーマッターを追加し、フィールドグループの背景に画像を表示できるようにするモジュールです。

field_group_background_image
1,248 sites
14
drupal.org
gui theme
field group background image image media theming display formatter visual design
Drupal 8 Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10, 9 v4.0.2
composer require 'drupal/field_group_background_image:^4.0'
Drupal 8 v8.x-1.4
composer require 'drupal/field_group_background_image:8.x-1.4'

概要

Field Group Background Imageは、DrupalのField Groupモジュールを拡張し、フィールドグループに背景画像を設定する機能を提供します。

このモジュールを使用すると、コンテンツ表示時にフィールドグループをDIVコンテナとしてレンダリングし、指定した画像フィールドの画像をCSS背景画像として適用できます。これにより、ヒーロー画像セクション、バナー領域、視覚的に魅力的なコンテンツカードなどを簡単に作成できます。

画像フィールドだけでなく、メディアエンティティ参照フィールドもサポートしており、Drupalのメディアライブラリと連携した柔軟な画像管理が可能です。また、画像スタイルを適用することで、パフォーマンスの最適化やレスポンシブ対応も実現できます。

Features

  • Field Groupに「Background Image」フォーマッタータイプを追加
  • 画像フィールド（image）またはメディア参照フィールド（entity_reference to media）を背景画像のソースとして選択可能
  • Drupalの画像スタイルを適用して背景画像のサイズや品質を制御
  • 画像が設定されていない場合にフィールドグループ全体を非表示にするオプション
  • カスタムHTML IDとCSSクラスの設定が可能
  • インライン style 属性で background-image を適用（CSSスタイリングと組み合わせて使用）

Use Cases

ヒーローバナーセクションの作成

記事コンテンツタイプに大きなヘッダー画像フィールドを追加し、タイトルやリード文をその画像の上に重ねて表示するヒーローセクションを作成できます。Background Imageフォーマッターでフィールドグループを設定し、CSSでbackground-size: cover; background-position: center;などのスタイルを適用することで、レスポンシブなヒーロー画像を実現できます。

カード型コンテンツレイアウト

製品やポートフォリオアイテムのTeaserビューで、サムネイル画像を背景にした視覚的なカードレイアウトを作成できます。画像スタイルを使用して適切なサイズにリサイズし、テキストオーバーレイと組み合わせることで魅力的なグリッドレイアウトが実現できます。

セクション分けされたランディングページ

Paragraphsモジュールと組み合わせて、各セクションに異なる背景画像を設定したランディングページを構築できます。各パラグラフタイプにメディア参照フィールドを追加し、Background Imageフォーマッターで背景として表示することで、視覚的にリッチなページが作成できます。

条件付き背景画像表示

hide_if_missingオプションを使用することで、画像が設定されているコンテンツのみ背景画像セクションを表示できます。これにより、オプショナルな画像フィールドでも破綻しないレイアウトを維持できます。

メディアライブラリとの連携

Drupal 8.5以降のMedia機能やMedia Libraryモジュールと連携し、集中管理された画像アセットを背景画像として使用できます。entity_reference型のメディア参照フィールドがサポートされているため、画像の再利用や管理が容易になります。

Tips

  • 背景画像のスタイリングはインラインCSSでは設定されません。テーマのCSSで .field-group-background-image クラスに対して background-size, background-position, background-repeat などのプロパティを設定してください。
  • レスポンシブ対応には、適切な画像スタイルを選択し、CSSでbackground-size: cover;を使用することを推奨します。
  • パフォーマンス最適化のため、大きな画像を使用する場合は必ず画像スタイルを適用してください。
  • 画像上にテキストを表示する場合は、可読性確保のためにCSSで半透明のオーバーレイを追加することを検討してください。
  • Field Groupの標準設定であるID属性とクラス属性も利用できるため、特定のフィールドグループに対する個別スタイリングが可能です。

Technical Details

Hooks 1
hook_help

モジュールのヘルプページ（/admin/help/field_group_background_image）にAbout情報を表示

Troubleshooting 5
背景画像が表示されない

1) フィールドグループの設定で画像フィールドが正しく選択されているか確認。2) 対象コンテンツに画像が実際にアップロードされているか確認。3) 画像スタイルを選択している場合、そのスタイルが存在するか確認。4) 要素に高さが設定されているかCSSを確認（コンテンツがないと高さが0になる可能性があります）。

メディアフィールドを選択できない

メディア参照フィールドのターゲットタイプが 'media' に設定されているか確認してください。また、参照先のメディアタイプに画像フィールドが含まれている必要があります。

PHPエラー「Call to a member function getFileUri() on null」が発生する

モジュールを最新版に更新してください。このエラーはメディアエンティティの画像フィールドがnullの場合に発生していた既知の問題で、現在は修正されています。

フォーム表示でBackground Imageフォーマッターが選択できない

Background Imageフォーマッターは表示（view）コンテキストでのみ使用可能です。フォーム表示モードには対応していません。これは仕様上の制限です。

画像が繰り返し表示される/サイズがおかしい

このモジュールはbackground-imageプロパティのみを設定します。background-size, background-repeat, background-positionなどはテーマのCSSで設定する必要があります。例: .field-group-background-image { background-size: cover; background-position: center; background-repeat: no-repeat; }

Security Notes 2
  • 画像URLはfile_url_transform_relative()を使用して相対パスに変換されるため、サイトのベースURLが露出するリスクが軽減されています。
  • HTML ID属性はHtml::getId()でサニタイズされ、CSSクラスはHtml::getClass()でクリーンアップされるため、XSS攻撃のリスクが軽減されています。