Display images from Google Drive

warningThe method described in this article is no longer recommended as it isn’t officially supported by Google. We recommend using Google Cloud Storage, Firebase Cloud Storage or other third-party cloud storage solutions to host your images as a long-term solution.

One of the most popular features of Awesome Table is its capability to quickly set up an image gallery or a showcase of items the display of which is enhanced by the visual support of images. You might find that part of the configuration needed to display Google Drive images is somewhat tricky. Because of this, we made sure to test the entire process and provide all necessary steps for a successful configuration.

The process includes the following steps.

1. Organize the images in Google Drive

To organize the images in Google Drive, you can select an existing folder or you can create a new folder. You then upload all images in that designated folder. The images can be organized in as many subfolders as you need.

After that, you share all images by sharing the designated folder.

2. Decide how to share the images

Only people who have access to the spreadsheet behind your Awesome Table app can see the data in the app. The same applies for the images. If you want your users to see the images in your app, you must share the images with the same users.

info If users report that they cannot see any images in the app, you need to check if the images are shared with them.

The best approach is to share the images and the spreadsheet with the same people and with the same permissions. This makes it easier to configure the sharing and you avoid unexpected problems caused by different people having different permissions.

The easiest configurations include sharing the images and spreadsheet with:

anyone (having the link) or
users within your Google Workspace domain

You can also decide to restrict access to the spreadsheet and images only to people you manually add. If you decide to use this approach, it is important to remember that when you share with new people, you must add them for both the images and the spreadsheet. And when you remove people, you must do so at least for the spreadsheet. The problem with this approach is that the tracking of people with whom you share becomes too manual and, as a result, too difficult to track.

In the end, to avoid any complicated tracking of sharing permissions, it is the easiest to share the spreadsheet and images with anyone or only within a Google Workspace domain.

3. Share the images

Having decided how to share the images and the spreadsheet, you can start by configuring how the images are shared.

info You can share the images and spreadsheet in any sequence that makes sense to you.

Procedure

In Google Drive, right-click the folder containing all images.
Click Share > Share.
Configure how the images are shared:
1. To share with anyone, leave Anyone with the link selected.
2. To share only with other people in your domain, select the name of your domain.
For the permission level, leave Viewer as selected.
Click Done.

Result

The images are now shared based on the sharing options you specified.

What's next

Share the spreadsheet with the same sharing configuration you applied to the images.

4. Share the Google spreadsheet

To share the spreadsheet, you follow the same steps you used to share the images. You only need to apply the same sharing configuration which you applied to the images.

5. Get your image URLs

In Google Drive, right-click on the image and select Share > Copy link.

The link will have the following format: https://drive.google.com/file/d/IMAGE_ID/view?usp=share_link
Copy the IMAGE_ID and paste it into the following format: https://lh3.google.com/u/0/d/IMAGE_ID

You can now paste the image URLs in the Google spreadsheet used by your Awesome Table app.

6. Display your images

To display your images in an Awesome Table app, you can either use the ImageType keyword or a Template sheet.

The ImageType keyword is better suited if you have a Table app in which you want to add images.

The Template sheet is typically suited for the Cards app which allows you to display images in rows and columns of cards.

6.1. Display images using the ImageType keyword

If you have a Table app set up, you can use the ImageType keyword in the second row of the Google spreadsheet of your Awesome Table app. You define it for the column which contains the Google Drive URLs for the images.

Procedure

In your Google spreadsheet, add a column and add the ImageType keyword in the second row.
Paste the image URLs in the same column.

Result

Your Table app is now configured to display the images from Google Drive.

What's next

Refresh your Awesome Table app to verify that the images are now displaying correctly in the table.

6.2. Display images using a Template sheet

If you have a Cards app set up, you can add the image URLs to the Data sheet of the Google spreadsheet of your Awesome Table app. Then, in the Template sheet, you define the HTML template used to display the images in the Cards app.

Procedure

In your Google spreadsheet, add a new column in the Data sheet, name it in the first cell, and paste the image URLs beginning from the third cell.

info You can use any name for the column that you prefer. The column name is later used in the Template sheet and you need to make sure to use the same name there as well.

In our example, we named the column Links.
Add a Template sheet and type Links (or the column name you entered in step 1) in the first cell.
With this, you define that Awesome Table will apply the HTML customization from the next step to the column that is called Links in the Data sheet.
In the first cell on the second row, type the HTML template used to include the images in the Cards app.
```
<img src="{{Links}}"/>
```
info If you chose a different column name from Links, make sure you also replace it inside the marker {{Links}}.