Description

Linked (reusable) image might not get rendered on a new page of the browser on the SXA website. It happens if adding an external link to the image with the New Browser in the Target window field.

Solution

The Image component of the SXA website is not designed to have a link wrapped around it. The link is an addition to the image and it is not designed to be rendered like the General Link. However, you can get the image link to be rendered in a new browser by proceeding as follows:

Scenario 1

1. Click the site and open the Presentation/Rendering Variants/Image rendering.
2. Duplicate the Image variant that you are using.
3. Select the Image item under the Presentation/Rendering Variants/Image/[your_variant definition].
4. In the section Variant Details, fill out the Link attributes field with target in the left field, and _blank in the right field.
   
   
   Note: When using this approach you must select a different rendering variant depending on the preferences for the link. And you must maintain a multiple rendering variant.

Scenario 2

1. Open the [your_website]\Views\Image\Image.cshtml file.
2. Replace the following:
   

   @Html.RenderingVariants().RenderVariant(variantField, Model.DataSourceItem, Model.RenderingWebEditingParams, Model.Href)

   With

   @Html.RenderingVariants().RenderVariant(variantField, Model.DataSourceItem, Model.RenderingWebEditingParams, null)

3. Select /sitecore/content/[your_tenant]/[your_site]/Presentation/Rendering Variants/Image/Default
4. In the section Variant Details, change the Field used as link target field to TargetUrl.