English

FAQ: Is it possible to concatenate multiple images in an ArcGIS Online pop-up window?

Question

Is it possible to concatenate multiple images in an ArcGIS Online pop-up window?

Answer

Yes, it is possible to concatenate multiple images in an ArcGIS Online pop-up window. To have multiple images displayed in a pop-up window is useful when showing category options or attributes associated with each feature. For example, a National Park map showing different activities at each tourist spot (hiking, camping, parking), or a city guide map showing different types of activities associated with each tourist attraction (shopping, museum, dining). Listing these activities as images in a pop-up window instead of as a string of words is more visually appealing.

Follow the steps below to concatenate multiple images in an ArcGIS Online pop-up window:

  1. In ArcGIS Online, ensure the attribute table has multiple fields containing values with image URLs.

    This is the attribute table.
     
    Note: 
    The image URL starts with an https:// and ends with the file format (.jpg, .png, .svg, etc). For example, https://upload.wikimedia.org/wikipedia/commons/4/40/Monument_icon_for_maps.svg
    
    Retrieve an image URL from the internet using one of the following methods:
    • Google Chrome: Right-click the image and select Copy image address.
    • Internet Explorer: Right-click the image and click Inspect element. In DOM Explorer, double-click and copy the image URL after src=.
    • Mozilla Firefox: Right-click the image and select Copy Image Location.
    • Safari: Right-click the image and select Copy Image Address.
    • Opera: Right-click the image and select Copy image address.
    • Microsoft Edge: Right-click the image and select Copy.
    
  2. Navigate to Content in the web map, and click the More Options icon under the layer to configure This is the More Options icon..
  3. Select Configure Pop-up to open the Configure Pop-up pane.
  4. In the Pop-up Title section, type the code block. For example, the following code concatenates three images associated with Battery Park (refer to the image below):
    Activities<br/><img src="{URL_1}"width="50" height="50"/><img src="{URL_2}"width="50" height="50"/><img src="{URL_3}"width="50" height="50"/>

    This is the Configure Pop-up pane.
     
    Note:
    • The word 'Activities' in the example can be changed to other descriptive words suitable to categorize the images.
    • The word 'URL_1', 'URL_2', and 'URL_3' in the example can be changed to other field names to represent the particular attribute.
       When typing the code block, use the Add icon to insert the field name within the code instead of manually typing {FieldNameOfURL}.
    • The width and height attributes in the img src HTML tag are optional when images retrieved from the websites are uniform in size. 
      If the images retrieved are non-uniform in size, discarding the width and height attributes produces irregular images, as shown below.
    
    These are irregular images in the pop-up window.
  5. Click OK. The pop-up window is concatenated with multiple images.

    The image below shows Battery Park in lower Manhattan as an area associated with outdoor activities, parks, and boat tours. Clicking other tourist attractions on the map shows different types of activities associated with the selected attraction.

    This is the multiple images in the pop-up window.

Related Information