Image URL Formatter
画像やファイルをHTML要素としてレンダリングする代わりに、そのURLを出力するフィールドフォーマッターを提供します。
image_url_formatter
インストール
composer require 'drupal/image_url_formatter:^2.0'
composer require 'drupal/image_url_formatter:8.x-1.1'
概要
Image URL Formatterは、ImageフィールドとFileフィールドに新しい表示フォーマッターを追加し、完全なHTML <img>やリンクマークアップをレンダリングする代わりに、ファイルへの直接URLを出力します。これは、カスタムテンプレートやJavaScriptアプリケーションで画像URLを使用する必要がある場合や、生のURLを必要とする外部サービスと統合する場合に特に便利です。
このモジュールは、ImageフィールドとFileフィールドの両方をサポートし、完全URL、絶対パス、相対パスなど柔軟なURL出力オプションを提供します。Imageフィールドの場合、Image Styleを適用して、元の画像ではなく処理された派生画像のURLを取得することもできます。
Features
- レンダリングされたHTMLマークアップの代わりに画像/ファイルのURLを出力
- 3つのURL種別オプション：完全URL、絶対ファイルパス、相対ファイルパス
- 処理済み派生画像URLのためのImage Styleサポート（Imageフィールドのみ）
- コンテンツEntityまたはファイルへのオプションリンク
- 画像URL表示のためのViewsとの互換性
- Twigテンプレートのオーバーライドによるカスタマイズ可能な出力
Use Cases
ヘッドレス/デカップルドDrupal
JavaScriptフロントエンド（React、Vue、Angular）を使用したデカップルドDrupalサイトを構築する際、レンダリングされたHTMLではなく生の画像URLが必要になることがよくあります。Views RESTエクスポートやJSON:APIでImage URL Formatterを使用して、フロントエンドアプリケーション用のクリーンな画像URLを提供できます。
カスタムTwigテンプレート
画像マークアップを正確に制御する必要があるカスタムテンプレートを構築する際、Image URL Formatterを使用して画像URLを取得し、カスタム属性、遅延読み込み、またはJavaScriptベースの画像ギャラリー用に独自の<img>タグを構築できます。
CSS背景画像
CSSで背景画像を使用するデザインパターンでは、画像URLを出力してインラインスタイルで使用するか、動的な背景設定のためにJavaScriptに渡すことができます。
ソーシャルメディアメタタグ
絶対画像URLを必要とするOpen GraphやTwitter Cardメタタグを構築する際、「完全URL」オプションを使用して、ソーシャルシェアプレビューに適した完全なURLを取得できます。
メールテンプレート
メールクライアントは画像に絶対URLを必要とします。「完全URL」オプションを使用して、HTMLメール用に適切にフォーマットされた画像URLを生成できます。
画像プリロード
JavaScriptベースのプリロード、遅延読み込みライブラリ、またはService Workerキャッシング戦略用の画像URLリストを生成できます。
Tips
- URLがサイト外で使用される場合（メール、API、ソーシャルシェア）は「完全URL」を使用してください
- 自身のテンプレート内で最も移植性の高いオプションとして「相対ファイルパス」を使用してください
- フォーマッターは複数値のImageフィールドで動作し、各画像のURLを出力します
- テーマでimage-url-formatter.html.twigテンプレートをオーバーライドして出力形式をカスタマイズできます
- Viewsでは、複雑なフォーマットニーズのためにURL出力をリライト結果のトークンとして使用できます
Technical Details
Hooks 1
hook_theme
item、url、image_style、url_type変数を持つimage_url_formatter Theme Hookを定義します
Troubleshooting 3
Image Style設定を変更した後、Cacheをクリアしてください。派生画像がまだ存在しない場合、Drupalは最初のアクセス時に生成します。
サイトがファイルにCDNまたは異なるドメインを使用している場合は「完全URL」を使用してください。相対パスには正しいドメインが含まれません。
「Image」フォーマッターではなく「Image URL Formatter」を使用していることを確認してください。また、他のモジュールがフィールド出力を変更していないか確認してください。