Focal Point
画像のトリミング時に使用するフォーカルポイント（焦点）を指定でき、画像の重要な部分がトリミングで切り取られないようにします。
focal_point
インストール
composer require 'drupal/focal_point:^2.1'
概要
Focal Pointは、画像の最も重要な部分を指定できるモジュールです。この情報は、画像のトリミングやトリミング＆スケール時に使用され、例えば被写体の頭が切り取られてしまうといった問題を防ぎます。
このモジュールは、フォーカスを画像上の単一の点として定義し、パーセンテージでXおよびY座標として表現します（例：中央の場合は「50,50」）。このフォーカルポイントデータはCrop APIモジュールを使用して保存され、画像エフェクトによってフォーカルポイントがトリミング後の画像のできるだけ中央に近い位置に保持されます。
このモジュールは、ドラッグ可能な十字マーカーを備えたビジュアルインターフェースを提供し、コンテンツ編集者がアップロードした画像にフォーカルポイントを簡単に設定できます。異なる画像スタイルが適用された場合に画像がどのように表示されるかを確認できるプレビュー機能も利用可能です。
Features
- 画像プレビュー上でドラッグ可能な十字マーカーによるインタラクティブなフォーカルポイントセレクター
- 3つの画像エフェクト：Focal Point Crop、Focal Point Scale and Crop、Focal Point Crop by Width
- フォーカルポイントエフェクトを使用するすべての画像スタイルで画像がどのようにトリミングされるかを表示するリアルタイムプレビューページ
- Media LibraryモジュールとMedia Entityの画像にフォーカルポイントを設定するための完全な統合
- Drupal 7のフォーカルポイントデータからDrupal 9/10/11のCrop Entityへの移行サポート
- 未保存コンテンツに対するCSRFトークン保護されたプレビューアクセス
- キーボードアクセシブルなフォーカルポイントフィールド（十字マーカーをダブルクリックで座標を表示）
- プレビュー画像をクリックしてフォーカルポイントを設定
- Fieldウィジェットインスタンスごとに設定可能なデフォルトフォーカルポイント値
- IMCEファイルブラウザとの統合サポート
Use Cases
ポートレート写真
異なる画像スタイル（ヒーローバナー、サムネイル、カード）でポートレート写真を表示する際、被写体の顔にフォーカルポイントを設定します。これにより、トリミングの寸法に関係なく、フレームの上部で切り取られるのではなく、人物の顔が見えた状態で中央に保持されます。
重要な詳細を含む商品画像
特定の機能（ロゴ、ボタン、ユニークなデザイン要素など）を強調する必要があるeコマースの商品画像の場合、その機能にフォーカルポイントを配置します。画像がさまざまなコンテキスト（商品一覧、詳細ページ、カートプレビュー）で表示されるとき、重要な詳細が見える状態を維持します。
レスポンシブヒーロー画像
デスクトップ（横長）とモバイル（縦長/正方形）で異なる表示をするヒーローバナーの場合、フォーカルポイントを設定することで、写真のメイン被写体が両方のビューで保持されます。モジュールが異なるトリミング比率を自動的に処理します。
イベント写真
メインのアクションやスピーカーを強調する必要があるイベント写真の場合、フォーカルポイントにより、トリミングされたサムネイルやプレビューが中央からの任意のトリミングではなく、常に最も重要な瞬間を表示するようになります。
マガジンスタイルのレイアウト
さまざまな画像アスペクト比（フィーチャー画像、サイドバー、記事グリッド）を持つデザインを実装する際、フォーカルポイントにより、編集者が各画像の複数のトリミングバージョンをアップロードすることなく、すべての配置で一貫した品質が保証されます。
Tips
- フォーカルポイントの十字マーカーをダブルクリックすると、テキストフィールドに正確な座標値が表示され、精密な調整が可能です
- プレビュー画像の任意の場所をクリックすると、その場所にフォーカルポイントを即座に移動できます
- 保存前にプレビューリンクを使用して、すべてのフォーカルポイント対応画像スタイルで画像がどのように表示されるかを確認できます
- 複数値の画像フィールドでは、各画像が独自の独立したフォーカルポイントを持つことができます
- デフォルトのフォーカルポイント（50,50）は画像の正確な中央を表します - 被写体が中央からずれている場合にのみ変更してください
- ウィジェットのプレビュー画像スタイルを選択する際は、トリミングやアスペクト比の変更を行うスタイルを避けてください。これはフォーカルポイントの精度に影響します
- フォーカルポイントはパーセンテージとして保存されるため、元の画像の寸法が変更されても正確性が維持されます
Technical Details
Admin Pages 1
/admin/focal_point/preview/{fid}/{focal_point_value}
元の画像と、フォーカルポイントエフェクトを使用する画像スタイルで生成されたすべての派生画像のプレビューを表示します。これにより、コンテンツ編集者はコンテンツを保存する前に、画像がどのようにトリミングされるかを正確に確認できます。プレビューはモーダルダイアログで開き、クリックして拡大表示できる各画像スタイルのサムネイルを表示します。
Hooks 5
hook_entity_insert
Entityが作成されたときに画像フィールドのフォーカルポイント値を保存します
hook_entity_update
Entityが更新されたときに画像フィールドのフォーカルポイント値を保存します
hook_theme
プレビューページテンプレート用のfocal_point_preview_pageテーマフックを定義します
hook_imce_supported_widgets_alter
ファイルブラウザ統合のためにフォーカルポイントウィジェットをIMCEのサポートされるウィジェットリストに追加します
hook_form_FORM_ID_alter (media_library_add_form_upload)
フォーカルポイント機能を統合するためにMedia Libraryアップロードフォームを変更します
Troubleshooting 5
フォーカルポイントエフェクト（Focal Point Crop、Focal Point Scale and Crop、またはFocal Point Crop by Width）を使用する画像スタイルが少なくとも1つ定義されている必要があります。/admin/config/media/image-styles に移動し、画像スタイルにフォーカルポイントエフェクトを追加してください。
ウィジェットがフォーカルポイントエフェクトを使用せず、元の画像のアスペクト比を変更しないプレビュー画像スタイルで設定されていることを確認してください。thumbnailスタイルがデフォルトとしてよく機能します。
派生画像はキャッシュされます。フォーカルポイントを変更した後、古いキャッシュされた画像をフラッシュする必要があります。プレビューページは自動的にキャッシュをフラッシュしますが、本番画像の場合は画像スタイルキャッシュをクリアするか、image_path_flush()を使用する必要があります。
画像フィールドがフォーム表示の管理で「Image (Focal Point)」ウィジェットを使用するように設定されていることを確認してください。フォーカルポイントはこの特定のウィジェットを使用している場合にのみ保存されます。
Media Entityの場合、Mediaタイプのソースフィールド（通常はImageメディアタイプのImageフィールド）が「Image (Focal Point)」ウィジェットを使用するように設定する必要があります。サイト構築 > Mediaタイプ > Image > フォーム表示の管理 に移動し、Imageフィールドウィジェットを更新してください。
Security Notes 2
- プレビューページは、未保存コンテンツの画像プレビューへの不正アクセスを防ぐためにCSRFトークン検証を使用しています
- プレビューページでのファイルアクセスは、ファイルを参照するEntityを編集する権限を持つユーザー、または有効なプレビュートークンを提供するユーザーに制限されています