外部画像リンクを含むSXAコンポーネントが正しくレンダリングされない


解説

Target windowフィールドのNew Browserで画像に外部リンクを追加する場合、SXA webサイト上のブラウザーでリンクされた(再利用可能な)画像が新しいページで表示されない場合があります。

解決策

SXA webサイトのImageコンポーネントは、リンクをラップする設計になっていません。このリンクは、画像に追加されるものであり、General Linkのように表示されるようには設計されていませんが、以下の手順に従うことで、画像のリンクを新しいブラウザーに表示することができます:

シナリオ1

  1. サイトをクリックし、Presentation/Rendering Variants/Imageレンダリングを開きます。
  2. 使用しているImageバリアントを複製します。
  3. Presentation/Rendering Variants/Image/[貴社のバリアントの定義]配下のImageアイテムを選択します。
  4. Variant Detailsセクションで、Link attributesフィールドの左側のフィールドに「target」、右側のフィールドに「_blank」を入力します。


    :このアプローチを使用する場合、リンクの設定に応じて異なるバリアントを選択する必要があります。また、複数のレンダリング バリアントを維持する必要があります。

シナリオ2

  1. [貴社のwebサイト]\Views\Image\Image.cshtmlファイルを開きます。
  2. 以下の記述を:
    @Html.RenderingVariants().RenderVariant(variantField, Model.DataSourceItem, Model.RenderingWebEditingParams, Model.Href)
    以下の記述に置き換えます:
    @Html.RenderingVariants().RenderVariant(variantField, Model.DataSourceItem, Model.RenderingWebEditingParams, null)
  3. /sitecore/content/[貴社のテナント]/[貴社のサイト]/Presentation/Rendering Variants/Image/Defaultを選択します。
  4. Variant Detailsセクションで、「Field used as link target」フィールドを「TargetURL」に変更します。