[JSAPI 4.7][PopupTemplate] mediaInfo image click to open link in new window

[QiZhao]

I'm making a map with images shown in popup. Because the popup is relatively small in size, I only show thumbnail of the image in popup. When user click the image, I'd like to show a full-resolution image. The popup looks like below:

Here is the popup template:

{
  "popupInfo": {
    "title": "{Name}",
    "fieldInfos": [...],
    "mediaInfos": [{
      "title": "Image",
      "type": "image",
      "value": {
        "sourceURL": "{Thumbnail}",
        "linkURL": "{Image}"
      }
    }]
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

By using "linkURL", I can put a link on the image inside popup. Is there a way to open the link in new window/new tab by default? Currently the link will be opened in place, which means that the map page will be redirected and user will not be able to access map page unless he/she click "Back" button in browser.

Here is an running example:

https://codepen.io/anon/pen/YLzoZP 

Maybe in the future we can add a new flag in "mediaInfos" json to tell popup opening the link in new window or not? Maybe we can make all links open in new window by default? Thanks.

[QiZhao · Accepted solution]

I figured out a work around by using JavaScript in the linkURL of mediaInfo. The code is not pretty, but it works in the latest v4.7 API. If anyone has a better alternative, please let me know. Thanks.

{
  "popupInfo": {
    "title": "{Name}",
    "fieldInfos": [...],
    "mediaInfos": [{
      "title": "Image",
      "type": "image",
      "value": {
        "sourceURL": "{Thumbnail}",
        "linkURL": "javascript:window.open('{Image}','_blank')"
      }
    }]
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[irtizahussain]

In your service define  any  field name let's suppose Image_URL and set it's property as (<img alt="File" src="YOUR_SERVICE_HERE"/>) and call that field in popup as below.

Hope it work for you

{
fieldName: "Image_URL",
label: "Image URL",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}