nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Adding images from file to pop-ups

GraemeMcKenzie

Hello Everyone,

I am attempting to add images to the Pop-up windows on a home-made map that is stored in My Content. However, I only seem to be able to use images that are already online somewhere.

Am I wrong in assuming that I can use a file stored on my computer? Do I have to upload them to a website before I can attach them to my shapefile?

Also, is there any way to use difference images for different features? So far I've got the same image attached to every features in the shapefile.

Thanks very much,
Graeme

Najděte více příspěvků označených jako

Accepted answers

All comments

MikeMinamiP1

Yes, you can display images you upload to My Content in popups. However, I would not suggest the TIFF format, as not all web browsers can display TIFF images (notable exceptions include Chrome and Firefox). You're probably better off with JPG.

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

To get the URL to an image in My Content, you need to share the image with everyone first. Once you do so, you'll notice on the item details page a property called Image URL. It will look like this:

http://www.arcgis.com/sharing/rest/content/items/393fc90d7a0246c39e678504589daceb/data

This is the URL to the image. You can add this link when defining an image in a popup.

Now, if you want a unique image for every feature, you will need to have a field (column) in your attributes that lists the ID (the number part above) and you can use the variable substitution to generate the URL.

Thanks,

Mike

RaghuMannepalli

Hello,
I'm wanting to link images to the popups also. Is there anyway to load tiffs onto ArcGIS online my content and then link them to the popups or does it have to come from an outside webpage. I know I'm able to upload the tiff to my content but I want to be able to link that photo directly to a specific feature
Thank You

CarolineVallieres

�?t works perfectly now. Thank you for all your help 😉

MikeMinamiP1

Sounds like you have the wrong URL to the image. You need a URL like this:

http://www.esri.com/~/media/Images/Content/homepage/features/green.jpg

where the image displays alone on the page. You can't use a URL that points to a Flickr web page, like this:

http://www.flickr.com/photos/belowred/11799423055/in/explore-2014-01-06

The last time I tried to use Flickr, they didn't provide any links on their web pages to get the actual image URL. They also had different sized images for displaying in galleries, etc. In general, I think Flickr wants you to view images on their web page, not embedded elsewhere.

If your URL doesn't go directly to the .jpg image, then it won't work. I think there may be a way to find out the actual URL, but I can't tell you how to do it.

Thanks,

Mike

CarolineVallieres

Its a public album and link to Flickr images and the image doesnt appear- only when you click the link 'more info' beside the URL field.

MikeMinamiP1

you will just need to put https in the field value for the URL to your images. It should just work. However, your images must be publicly accessible. If you have to sign in in order to see your images, it may work for you in your own browser, but it won't work for others who view your map.

Thanks,

Mike

CarolineVallieres

Thanks Mike - I changed the URL (to flickr) and no longer get an X in the pop-up. Each point inside the layer is linked to the appropriate image. However, now I simply get a placeholder for where the image should be. What am I doing wrong?

C.png

MikeMinamiP1

The concatenation of the field variables must form a valid URL. In your screenshots, it looks like:

Photo1 = PictureA
URL = http://xyz.com/xyz (I assume, though I can't see your URL)

So, when you concatenate these, you put {photo1} in front of the {URL}, thus the concatenation result is:

PictureAhttp://xyz.com/xyz

This is not a valid URL.

If you instead did {URL}{Photo1} it may work. Make sure you have the appropriate forward slash at the end in {URL} to make a valid URL.

URL = http://xyz.com/xyz/ (the ending foward slash would be needed to make a valid URL)
Photo1 = PictureA

Resulting URL:

http://xyz.com/xyz/PictureA

thanks,

Mike

CarolineVallieres

I actually managed to get one image per point (by making a new field in gis desktop) and then I concatenate the fields in the online pop up window. However, now I get an 'X' instead of my image.
(See attachments).

A.png

B.png

MikeMinamiP1

Caroline,

Would you be able to write the steps you are doing so that I could try to reproduce the problem?

Thanks,

Mike

CarolineVallieres

I can't seem to make one image per pop-up. All the images come up. I have the URL and Im trying to concatenate it to the object ID in the URL field but it doesn't work. Any advice?
Thanks!

AnnaSan

Hello,

I would like to add multiple images into a single popup window.

I have followed the instructions above, (adding IMG_Link1, IMGLink2, etc... attribute fields). Then adding multiple images to the layer,and specifying the images to their URL links. However, only one image is showing. There is no capability to scroll to a second image.

I have attached a screen shot of my settings.

Please help.

Thank you,
Anna

Capture.JPG

GraemeMcKenzie

Thanks very much Mike.

I'll have to look at getting these images posted somewhere.

Cheers,
Graeme

MikeMinamiP1

Yes you can show multiple images in your popup. The way you do this is your data needs to contain the image you want to display. Here's an example of a CSV file that can be added to a map. It has two attribute fields, called photo1 and photo2 that contain the URL to images.

Name,Latitude,Longitude,photo1,photo2
Hospital,34.038344,-117.206536,http://www.esri.com/data/graphics/basemaps1.jpg,http://www.esri.com/data/graphics/imagery4.jpg
Supermarket,34.049054,-117.197436,http://www.esri.com/software/arcgis/arcgisonline/graphics/basemaps/world_imagery.png,http://www.esri.com/software/arcgis/arcgisonline/graphics/basemaps/world_street.jpg

In the Configure Popup option accessed from the layer, you can add images at the bottom. You would add two images and use the photo1 and photo2 fields as the URL (Click the + sign next to the type in field).

In this example, the attributes, photo1 and photo2, contain the full URL to the image. Alternatively, if all images were stored at the same location, the field might simply contain the image name, and the rest of the URL could be hard-coded in the URL field when defining the image, like this:

http://www.esri.com/graphics/{photo1}

Where the value of the attribute for the record would be substituted for the field reference, {photo1}

Hope this helps,

Mike

photo.png

StevanGyetvai

Hi Mike,

To be more specific, can I add multiple photos to an individual point and not have them show up in the pop-up for every point in the same layer? Also, by the "Popup Media section," do you mean the Configure Pop-up option under Details>Contents?

Stevan

MikeMinamiP1

Yes, you can add more than one image. Under the Popup Media section, click the Add button for each image you want to add...

Thanks,

Mike

StevanGyetvai

Hello,
Is it possible to add more than one image to a single popup? If so, how is this done?
Thanks, Stevan

MikeMinamiP1

Images have to be on the web already. It is possible to generate a link to the image based on attribute field values in your data. For example, you might form an expression that looks like this:

http://some.com/images/{field with image name}

When you add the image to the popup, you'll see a plus sign button that lets you choose from your attribute fields and substitute in an attribute value like the above example.

Thanks,

Mike

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.