Display images hosted on Google Drive in your attribute popups in Mango

1. Create a folder in your Drive

Log into Google Drive and create a new folder.

2. Allow public access to the folder

Right click on the folder and choose “Share”

Click on “Advanced” in the lower right corner

Click “Change” and choose “On – public on the web”, then press “Save” and “Done”.

3. Create the content

Enter the folder and upload your images there.

4. Get the URL id of the image

Right click on the image and choose Get shareable link.

Copy the URL that is generated.

Copy the image ID. The ID is all the characters following ?id=

https://drive.google.com/open?id=1Vj1-0RldHa3_LhYLpzK9GdEl7F60pfES

Repeat for all images you require

5. Generate the direct image URL

Insert the image ID at the end of the URL

https://drive.google.com/uc?export=view&id={ ID }
https://drive.google.com/uc?export=view&id=1Vj1-0RldHa3_LhYLpzK9GdEl7F60pfES

Using the images in Mango

There are two simple ways to use the direct image URL in Mango.

1. Whole URL in the dataset

name, image
search, https://drive.google.com/uc?export=view&id=1Vj1-0RldHa3_LhYLpzK9GdEl7F60pfES

Using this method will allow the image to automatically render in the default basic popup. To insert the image in a custom popup, use the image attribute in the image placeholder to render the image for each feature in the dataset.

2. Image ID in the dataset

name, image
search, 1Vj1-0RldHa3_LhYLpzK9GdEl7F60pfES

Using method two, use the custom popup editor to create the entire URL to render the image for each feature in the dataset.

Need more help with this?
✉ Email the Mango support team

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.