When displaying photos or other images in ArcGIS Online web map pop-ups, it’s sometimes the small things that can make a big difference in the user experience. A small project completed for the Montgomery Botanical Center is an example of how you can implement some minor changes to optimize displaying photos in pop-ups.
We received a spreadsheet with the GPS (lat/long) locations of champion trees within the Botanical Center. The spreadsheet contained other details such as the common name, scientific name, a URL to a photo of each specimen, the photographers name, and so on. A text element was used to display the common name and scientific name. An image element was used to display the photo in the pop-up and link to display the photo in a new tab at a larger size.
We noticed two things straight away. The first was that there were differences in how the photo was displayed in the pop-up, with some generating vertical scroll bars in both the undocked and docked pop-up mode. This was because the photo is fitted within the pop-up width and we had photos of different sizes and aspect ratios. In addition, the photographs were quite large: over 15 MB each, so it took a few seconds to display the photo in the pop-up.
The solution was easy; a smaller sized version of all photos was created to suit the pop-up as well as to open the image in a new tab. In the pop-up the image is fit to the pop-up width, when opened in the new tab the image is fit to the browser. View the map.
Use image elements
To configure layer pop-ups, select the layer in the Layer pane in the Contents (dark) toolbar. Next, click Configure pop-ups from the Settings (light) toolbar. Ensure that Enable pop-ups is toggled on.
Click Add content to display a list of pop-up elements and to choose the image element.
Add images (PNG, JPEG, or GIF format) by entering a URL or obtaining the URL from the contents of a field. Image elements can be configured with a title, caption, links to related websites or larger images, and alternative text. The settings shown below are from the Montgomery Botanical Gardens example, note that you can experiment with what is labeled as a caption or title to achieve the desired result.
Pop-ups can also be docked, which makes a significant difference when viewing images. Shown below is a pop-up from the Montgomery Botanical Gardens example, docked on the left and undocked on the right.
Additional tips
Here’s other tips and considerations for getting the best results using photos and images in pop-ups.
- Optimize the image for web display for best performance. You can link to a larger photo.
- If you want the image to fill the full horizontal pane dimensions of the pop-up, use a width of 400px or greater.
- Ensure that the photos you use will not be accidentally deleted.
- If you’re adding photos from a field and do not have a complete set of photos, use a placeholder image stating there is not photo available.
- You can use ArcGIS Online for photo storage, but they must be publicly shared to obtain the URL.
- Remember to configure other parts of the pop-up properly, all parts of the pop-up experience will contribute to the photo experience.
- When using the web map in configurable apps, note that the pop-up display may vary in size and aspect ratio depending on the app you use. You may want to consider which app is your intended goal, so you can configure the pop-up experience to maximize the experience in the app.
More information
For more information see:
- View pop-ups (Help)
- Configure pop-ups (Help)
- Pop-ups: the essentials (Blog)
This post was originally published on April 26, 2012, and has been updated.
Commenting is not enabled for this article.