Including Photo Attachments in Popups via HTML

[GarrettRSmith]

Hello Everyone.

I have a hosted feature layer that is being created via a Survey123 survey that has photo attachments (first photo). I am wondering if it is possible to include the attachments in the popup via html so that my popup does not have the weird spacing between the elements (second photo).

Thanks

[BernSzukalski]

If I am correct in understanding what you have shown and what you would like to remedy, the white spacing around the image is built-in padding. You've chosen to display your text with a background color, however because those are separate text element above and below the attachment element you will see the white pace around the attachment.

If you could share your map with me (bszukalski@esri.com) I can take a closer look and try some different formatting options. Some things I, and you, might consider are to eliminate the background color in the text elements (then everything will look cohesively white). An other alternative to explore is using a custom HTML table in a text element or use Arcade to create a solid color background for everything (matching the text element backgrounds you show).

[GarrettRSmith]

Hello @BernSzukalski 

I Photoshopped a photo of the popup, and what I would like it to look like. If it is possible to accomplish this via one text element, that works for me. I just cannot find out how to reference the Photos and Files field in the html. For example, if I put {Phots and Files} in the source code, nothing happens. 

Thanks,

Garrett

[MarkBockenhauer]

If you would like to go the HTML route using an Arcade popup element.  This maps popup configuration shows a way of using Arcade to generate the HTML.  

Some things to note:

1. The URL access to feature attachments only works if the service is publicly accessible (shared with everyone).  Privately accessible attachments require a token in the URL and currently there is not a good way to provide a token (its a security thing).

2.  The Title and various text are using specific field names this is in the 'arcade html' as $feature.fieldname

3. when creating the html it should all be inside a <div>  <-- this just works best.

4. If you have multiple image attachments they are stacked in the popup.

[BernSzukalski]

I think Mark has a good solution and great example. I took a look at the Arcade in the pop-up in Mark's map, and though it's not trivial it should be easy to figure out and adapt. 

BTW - a really cool and powerful feature coming with the ArcGIS Online update on June 25 is AI-driven Arcade. This enables a natural language description of what you want to accomplish and the Arcade is automatically generated. Of course you still have to have an understanding of what is possible in Arcade and need to craft an appropriate prompt, but this will make things much easier.