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

17 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.

      • nmichelg says:

        I need to accomplish the same thing : associate a unique image for each point along a patrol route. I’m assuming I have to generate a URL for each image? Then populate a new field in the attribute table associated with the points’ image URL? I’m not sure how to generate each image URL. The only way I see how to do it now is to bring it into our online account and share it. Is there another – easier way to store them?

        I’m reading a lot about how to manage images in the ESRI online platform as we are going to be using our account at AWF to produce story-maps and tours so I need all the advice I can get regarding the best way to do this.

        Also: the pop-up size at 200 x 150 px is not for the story-tour images correct?

        • Bern Szukalski says:

          You don’t need a URL for each image, but you do need to capture one and have it stored somewhere to be placed on the map. There are all sorts of ways to do that, so the answer will really depend on what you’ve got available, whether your interest is a web map or you are using a story map or app template, and what workflow is for photo capture you need to support. For example, you could take photos and add them to your Flickr account, and add them to a map from there. Or you could add them as feature attachments using something like collector and similar applications that use your ArcGIS Online hosted feature creation capabilities.

          There’s lots of ways, best to start with your photo capture workflow first, and figure out the rest from there. Send me email off-post with more information if you want a specific suggestion.

          The ideal size for photos in a pop-up is 250 x 150 px, but other sizes will work fine too. The photo is automatically sized for best fit in the pop-up (with 250 x 150 being the max best fit dimensions), but the real key is to use small size photos – i.e., you don’t want to be using 3MB photos in your pop-ups for performance reasons.

  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.