# Insert an image into your HTML Pop-up in ArcMap

This one had me stumped for awhile. I wanted to insert an image into an HTML pop-up in ArcMap, which is another way to identify data. The pop up can be formatted to embed links, video, images, and colored to look nicer than the plain identify box that ArcMap typically uses. The pop-up box is formatted by modifying stylesheets and the style sheets are in XSL format. -sigh- yet another ‘programming’ language to hack at. Esri provides stylesheet examples, but I couldn’t find a sample of how to embed an image file into the pop-up box. It seems like that would be the most commonly desired thing, but no samples that I could find. So I searched around the internet and finally cobbled together something that works. Here it is. I hope this saves you a bit of hunting.

The important part excerpted here is this:

<xsl:when test="FieldValue[starts-with(., '\\')]">
<img width="350" height="210">
<xsl:attribute name = "src"><xsl:value-of select="FieldValue"/></xsl:attribute>
Click on through to see the whole template XSL file:
Here is the template in it’s entirety.  I started witht the Esri “Green.xsl” template and modified the one scenario where the attribute starts with “\\” because my pictures were stored on a local server and the path was formatted as such “\\myserver\path\to\theimage.jpg”.  You can modify the search criteria or add another by copying and pasting the test case and making it fit your scenario.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<body>
<xsl:variable name="nameCol" select="FieldsDoc/Fields/Field/FieldName"/>
<tr bgcolor="#8AA37B">
<xsl:if test="string-length(nameCol) != 0"> <th width="30%" align="left">Field Name</th> </xsl:if> <th width="70%" align="left">Field Value</th> </tr> <xsl:variable name="index" select="1"/> <xsl:for-each select="FieldsDoc/Fields/Field"> <tr> <xsl:if test="(position() +1) mod 2"> <xsl:attribute name="bgcolor">#C0D9AF</xsl:attribute> </xsl:if> <xsl:if test="string-length(nameCol) != 0">
<td>
<xsl:value-of select="FieldName"/>
</td>
</xsl:if>
<td>
<xsl:choose>
<xsl:when test="FieldValue[starts-with(., 'www.')]">
<a target="_blank"><xsl:attribute name="href">http://<xsl:value-of select="FieldValue"/>
</xsl:attribute><xsl:value-of select="FieldValue"/>
</a>
</xsl:when>
<xsl:when test="FieldValue[starts-with(., 'http:')]">
<a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
</xsl:attribute><xsl:value-of select="FieldValue"/>
</a>
</xsl:when>
<xsl:when test="FieldValue[starts-with(., 'https:')]">
<a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
</xsl:attribute><xsl:value-of select="FieldValue"/>
</a>
</xsl:when>

<xsl:when test="FieldValue[starts-with(., '\\')]">
<img width="350" height="210">
<xsl:attribute name = "src"><xsl:value-of select="FieldValue"/></xsl:attribute>
</img>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="FieldValue"/>
</xsl:otherwise>
</xsl:choose>
</td>
</tr>
</xsl:for-each>
</table>
<br/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

## 12 thoughts on “Insert an image into your HTML Pop-up in ArcMap”

1. Yeon Kim

Hey, I saw your presentation at the UC Lightening talk. I am glad I noted your blog address. I thought I would see postings on the user interface, but am pleasantly surprised to see python code.

• Thanks Yeon! Glad you stopped by to visit and take time to comment. I’m a dabbler… many things vie for my interest. I like chickens also and I haven’t figured out how to merge that in yet. 🙂

2. Jane

Hi,

I want to add images to my Google sites KML map. I’m guessing i could do this by using your code. where in your code do i insert the image links? I hope that question makes sense. Thanks ahead of time for any help.

• Hi Jane
Thanks for stopping by. I haven’t done exactly what you are talking about , but here is what I would try first.
Around line 35 there is the line
In the next line (36) is where you would tweak your settings I think, since it’s going to point to a http address. Do you have a field in your GIS data that stores the web address to your map? This script looks at the content and searches for a http address (on line 36) and displays whatever it is linked to. That’s where I would start. Copy the img settings from line 47 and put them in that http section.

Good luck. I hope it points you on the right path!

• Jane

I changed what you suggested. Yes, there is a field where my web addresses are stored (attributes table on my layer). When I view my pop-up in ArcMap the image shows up as a live click-able link that works but I’d prefer the image to show and not the link.

My end result is to export my layer as a KML file and posted it on Google Maps using Google Sites. The pop-up feature from ArcMap carries over, which is way neat. 🙂 I’d like that image to carry over too.

3. Jane

Nevermind! I just figured it out! I feel so smart. I had to delete some of your code to get to the image to show up! This is so exciting! It showed up on Google Maps too!

If you can’t tell, i’m new at this. THANKS AGAIN!!! 🙂

• Jane
Congrats! Don’t you love that feeling?
Could you post your solution here so that others the end up here searching for the same thing get the final answer?

I’m interested in the solution too!

4. Jane

Outcome: Display an ArcMap layer in Google Maps with pop-ups including photos.

To view an example of my work go here & click on “Pleasant Grove Creek HP Tributary – 1” to view a photo in the pop-up.

I can post the code that I used but I thought this post would be too cluttered.

• Janice Sterling

Could you post your script, because I am having problem trying to show a chart in html popup using arcgis desktop. Can’t seem to get the path right after modifying esri cal template. Thanks!

• Jeff

Jane,

I’m looking to replicate your results, but don’t know xml very well. What exactly did you cut out? Or perhaps you could just post your code somewhere accessible?

Thanks,
Jeff

5. Julio

Hola

one question … can it be changed to use relative paths in hard disk?… the project and pictures are going to be delivered in folders and subfolders (DVD or USB disk) so i will not know machine name or drive letter… thank you

6. Julio

Hi.. just to clarify… i need to use the HTML popup with more than one field in the same layer, with pictures saved in a folder… thanks