English

How To: Add an image at the top of pop-up windows in ArcGIS Online

Summary

In the ArcGIS Online map viewer, images included in pop-ups are automatically placed at the bottom of the pop-up window. When viewing information about a feature in the pop-up, the default position of images at the bottom follows design convention, whereby supporting media, such as images, is displayed last, after the title of the pop-up and attribute information.

However, ArcGIS Online does provide the functionality to display images at any position in the pop-up window to allow users more flexibility when customizing pop-ups using the Custom Attribute Display.

The instructions provided describe how to add an image at the top of the pop-up window in ArcGIS Online.

Note:
Before proceeding, ensure that the layer contains a field to store the URL for the images.

Procedure

  1. In the Contents pane, click More Options under the layer name, and select Configure Pop-up.
Content
The Configure Pop-up option
  1. When the Configure Pop-up pane opens, under the Pop-up Contents section, select A custom attribute display from the Display drop-down list. Optionally, to remove the title in the pop-up window, make the Pop-up Title field blank.
Select 'A custom attribute display'
  1. Click CONFIGURE to open the Custom Attribute Display window. The Custom Attribute Display window allows the use of a combination of rich text, attributes, links, and supported HTML, providing control and flexibility over the display of pop-ups.
Click the CONFIGURE button
  1. Add the image in the pop-up window using HTML coding. To do so, click the View HTML Source button in the Custom Attribute Display window to switch to the HTML editor, and type in the following HTML code to insert the image:
<img alt="picture" src="{Image_Att}" style="width:128px;height:128px;" />
The src attribute defines the source field used to store the URLs of the images. In this example, the Image_Att field stores the URLs of the images. Set an appropriate size for the image to be displayed in the pop-up window using the style attribute.
The HTML editor in the Custom Attribute Display window
  1. After inserting the image, click the View HTML Source button again to switch back to the rich-text editor (WYSIWYG).
  2. Below the image, add more attribute information, and make further customization as desired. The field information can be added by clicking the Add Field Name button on the Custom Attribute Display toolbar.
Custom Attribute Display
  1. Click OK to close the Custom Attribute Display window, and click OK in the Configure Pop-up pane to save the changes. When a feature on the web map is clicked, the image displays at the top of the pop-up window, followed by the attribute information.
Result

Related Information