hyva-render-media-image

Hyvä Render Image

\Hyva\Theme\ViewModel\Media ビューモデルを使用して、Hyvä Theme のテンプレート用にレスポンシブな <picture> 要素を生成します。

使用する場面

• Hyvä の PHTML テンプレートに画像を追加する場合
• モバイルとデスクトップで異なる画像ソースを使ったレスポンシブ画像を作成する場合
• ヒーローバナー、商品画像、CMS コンテンツ画像を実装する場合
• Core Web Vitals（LCP、CLS）向けに画像を最適化する場合

ワークフロー

1. 画像の要件を確認する

ユーザーは次のいずれかの方法で画像データを指定できます。

オプション A：直接値 - ユーザーに次の情報を確認します。

1. 画像のパス - pub/media/ 内の場所（例：wysiwyg/hero.jpg、catalog/product/...）
2. 画像の寸法 - 幅と高さ（ピクセル単位）
3. レスポンシブ要件 - モバイルとデスクトップで異なる画像を使うか
4. 画像の用途 - ヒーロー／LCP 画像（優先読み込み）か、ページ下部の画像（遅延読み込み）か
5. 代替テキスト - アクセシビリティに配慮した説明

オプション B：PHP 変数 - ユーザーが変数名（例：$imageData、$heroImage）を指定します。references/rendering-images.md の ## Image Configuration Format に記載されている、必要な配列構造を伝えてください。

2. コードを生成する

完全な API リファレンス、コード例、すべての設定オプションについては、references/rendering-images.md を参照してください。

適切なパターンを選択します。

シナリオ	使用するパターン
単一の画像、リテラル値	単一画像の例
変数を使った単一の画像	配列でラップ：[$imageData]
変数を使った複数の画像	そのまま渡す：$images
モバイル／デスクトップで異なる画像	メディアクエリを使ったレスポンシブ画像
<picture> ラッパーにスタイルを適用する	Picture 要素の属性

基本テンプレート：

<?php
/** @var \Hyva\Theme\ViewModel\Media $mediaViewModel */
$mediaViewModel = $viewModels->require(\Hyva\Theme\ViewModel\Media::class);

echo $mediaViewModel->getResponsivePictureHtml(
    $images,        // Array of image configs (see reference for format)
    $imgAttributes, // Optional: alt, class, loading, fetchpriority
    $pictureAttributes // Optional: class, data-* attributes for <picture>
);

3. 読み込み方法を設定する

画像の種類	属性
ヒーロー／LCP（ファーストビュー）	'loading' => 'eager', 'fetchpriority' => 'high'
ページ下部	'loading' => 'lazy'

リソース

• references/rendering-images.md - メソッドシグネチャ、すべての設定オプション、コード例、ベストプラクティスを含む完全な API リファレンス