Display images from Google Drive

Using images in Awesome Table is pretty common and it can be inserted either via a template <img src> or by using the ImageType keyword. Images stored on publicly hosted websites is the popular & default choice. But if your images are stored in Google Drive or Team Drive, it would be more convenient to use those instead of having to upload all of the images one by one to a website or image hosting service.

1 - Retrieve the image IDs

The image links (URL) generated by Google Drive (or Team Drive) comes in two variants:

https://drive.google.com/file/d/0Bx23AGQ4qgjiWXYZRFhYZDlXUXc/view?usp=drivesdk

or

https://drive.google.com/open?id=0Bx23AGQ4qgjiWXYZRFhYZDlXUXc

However, these links won't display the images at all when used on Awesome Table (or any web apps). We need to get the image IDs (the text string in red) and follow a prescribed URL format to generate the correct image link.

To do that you can opt to retrieve your images IDs in two different ways. You can do it manually or extract the IDs automatically with our Photo Gallery add-on. This last option is preferable if you have lots of images as it will be tedious and cumbersome to do this procedure 1 image at a time.

• Manually

Right click on your image and select Get shareable link.

You'll see a link but we will extract the image's ID from the URL.

https://drive.google.com/file/d/YourFileId/view?usp=sharing

or :

https://drive.google.com/open?id=YourFileId

• Using Photo Gallery

If you'll be using more than a handful of images, we recommend using our Photo Gallery add-on to extract the image IDs automatically. To do this:  

1) Click here to install the Photo Gallery add-on for Google Sheets.

2) Once installed, go to Add-ons > Photo Gallery by Awesome Table > Create / Edit a photo gallery

3) Then click the Use existing album button.

4) Choose the pertinent folder containing your images > Click Select.

You'll be presented with the datasource containing the extracted image IDs. Wasn't that quick and easy?

2 - Check if the images are shared properly

You might be asking, "I just ran the Photo Gallery add-on to get my image IDs. Won't this automatically set the sharing settings as well?" Short answer, No. As discussed in our GDPR section on Important things to remember about your data's security:

It's recommended to set your image sharing settings to On-Anyone with the link. This way, your users won’t be required to log in just to see your images on Awesome Table. Otherwise, you can set it to either On - Public on the web or Off - Specific people depending on your needs. 

Click here to learn more about sharing options within a domain.

To share your images, simply right click on the target-folder (or pertinent images) and select Get shareable link. This will change the sharing settings of the specified folder and its content to On-Anyone with the link.

After which, you'll be prompted that link sharing (for the folder and/or its content) is automatically configured to Anyone with the link. 

3 - Display your images

Now that we have the image IDs and we've properly configured the sharing settings, we can specify how the images should be displayed using the prescribed formats below.

• Using a Template

Since we're using a template, we'll only be needing the image IDs (and not the full URL).

A) For images shared only within a GSuite domain (or intranet)

Use this URL format if you're going to:

• Display your views only within your domain (intranet) and
• The Google Drive (or Team Drive) images are shared only to anyone within your domain (but not shared publicly).

https://drive.google.com/a/domain.com/thumbnail?id=imageID

Where:

• /a/ is a required path
• domain.com is your organization's domain
• imageID is the identifier of your image
  
  

Since we're using templates, this means we can also specify the dimensions:  

https://drive.google.com/a/domain.com/thumbnail?id={{imageID}}&sz=w{{width}}-h{{height}}

You can use absolute values (pixels) or relative values (%) when specifying the width and height.

B) For images shared publicly using a Gmail account

Use this URL format if you're going to:

• Display your views publicly and
• The Google Drive images are shared publicly.

https://drive.google.com/thumbnail?id=imageID

Where imageID is the identifier of your image.

Since we're using templates, this means we can also specify the dimensions:  

https://drive.google.com/thumbnail?id={{imageID}}&sz=w{{width}}-h{{height}}

You can use absolute values (pixels) or relative values (%) when specifying the width and height.

• Using the imageType keyword

Using the imageType keyword is an easier alternative as this won't require writing any code. This displays images from a column containing the full URLs (links) of your images. To use this approach, follow the formats below.

A) For images shared only within a GSuite domain (or intranet)

Use this URL format if you're going to:

• Display your views only within your domain (intranet) and
• The Google Drive (or Team Drive) images are shared only to anyone within your domain (but not shared publicly).

https://drive.google.com/a/domain.com/thumbnail?id=imageID

Where imageID is the identifier of your image.

B) For images shared publicly using a Gmail account

Use this URL format if you're going to:

• Display your views publicly and
• The Google Drive images are shared publicly.

https://drive.google.com/thumbnail?id=imageID

Where imageID is the identifier of your image.