Tips for displaying photos in pop-ups

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 recently completed for the Montgomery Botanical Center is an example of how you can do some minor tweaks to optimize your photos in pop-ups, and put your best pop-up forward.

For this project we received the locations of trees within the Center in a spreadsheet, along with photographs of each tree. The photographs were quite large – over 5 MB each.

In our first iteration we placed the photos at a web location and added a column to our spreadsheet that included the URL to each photo so we could configure them into our pop-up. Here’s the raw pop-up after we first dragged and dropped the spreadsheet onto our map:

The field called PHOTO contains the link to the image. We used it twice to both display in the pop-up window and also to provide a link to the full-size photo. Here’s our configured image pop-up media dialog:

We also hid unwanted fields, and used aliases to change CAPS to lower case to be a little more friendly.

This gave us pretty good results, but we noticed two things straight off. The first was that there was white space (see arrows below) around the photo in the pop-up, since the photo is best-fitted within the allotted space.

The second thing we noticed is that even though we were displaying a very small image in the pop-up compared to the original, it took a few seconds to display the first time. The reason of course is that we were still accessing the full 5MB image to display in the pop-up.

The solution was easy. We made a smaller sized version of all images to fit the pop-up exactly (200 pixels by 150 pixels) and added that to our spreadsheet in a thumbnail field (PHOTO_TH shown by arrow below) to use in our new image configuration:

The new thumbnails were only a few kilobytes each, so they were much faster to display. And now the photo filled the entire frame – much nicer!

So with a few simple tweaks both the pop-up performance and aesthetics were improved.

This entry was posted in ArcGIS Online, Web. Bookmark the permalink.

Leave a Reply

14 Comments

  1. bswindell says:

    Is it possible to link to more than one photo, or perhaps to a Flickr gallery that contains many photos?

  2. Bern Szukalski says:

    Thanks for the comment. Yes, it is possible though you have to do this via links in custom pop-up text. The pop-up enabled a single photo, so to show more (or a group of photos, say on Flickr or some other website) you would do this via a hyperlink. I’ll do a follow-up post on how this can be accomplished, and some alternative approaches.

    • gdurkee says:

      Hi. Thanks for the post. I was having trouble getting photo popups to work. Did you do a follow-up on how to do multiple photos you can click through?
      Thanks,
      George

  3. kevmck says:

    Is it possible to insert an image into the title of a pop-up?
    This article implies it’s possible http://storymaps.esri.com/downloads/DesigningWebMapPopups.pdf using html/javascript but I don’t seem to be able to achieve it.

  4. sealjack says:

    How about display thumbnails for photos in the attachment table? Is it possible?

  5. sealjack says:

    How about display thumbnails for photos in the attachment table? Is it possible at all?

  6. kevinhofmannbsu says:

    Is it possible to display photos/images stored in a raster field?

  7. spistargis says:

    Very very useful!

  8. bfwood1 says:

    I need some assistance in configuring my pop-ups correctly. I can follow your instructions and add photos that are linked to my Flickr account, however, I can’t add more than one photo to load in the pop-up. I have a point shapefile of business locations in my town, I want to be able to click on each one and see a photo of that business. The problem I have is when I configure the pop-up of the shapefile and add my first image in the pop-up media, that image is displayed for every single point in the shapefile. No matter what point I click I get the pop-up of that first image and can’t add the photo of the business the point represents. The only way I got around this previously was to make each point it’s own shapefile but that seems unnecessary and very redundant when there are a lot of points. How can I remedy this situation?

    • Bern Szukalski says:

      When you add a single image to the pop-up for your layer, all pop-ups will display that single image. What you want to do is drive the pop-up from unique images, and to do that you need to have a unique image as an attribute for each location in your layer. Make sense?

      • bfwood1 says:

        Thanks for the reply Bern. I went back to Desktop and added a column for the URL link to each image, added the URL and then saved and uploaded it to AGOL as a feature service. Once I loaded it into the map viewer I configured the Pop-up Media URL as the new URL attribute I created in desktop and viola, I now have the correct image of each displayed in the pop-up.

        Very time saving and useful, thanks for the help.

  9. gracegray says:

    Very informative post–thank you. Can something similar be done in ArcGIS Desktop?

  10. herrm says:

    Is it possible to display a photo using a url from a related table?

    We would like to be able to display more than 1 photo in the popup and a related table would allow use a one-to-many relationship.