Display images from Google Drive

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 sheet 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 sheet with:

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

You can also decide to restrict access to the sheet 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 sheet. And when you remove people, you must do so at least for the sheet. 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 sheet and images with anyone or only within a Google Workspace domain.

3. Share the images

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

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

Procedure

In Google Drive, right-click the folder containing all images.
Click Share.
In the Share with people and groups window, click Change under Get link to configure the sharing.
Configure how the images are shared by selecting an option from the drop-down which appears after you click the arrow next to Anyone with the link.
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 sheet with the same sharing configuration you applied to the images.

4. Share the Google sheet

To share the sheet, 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. Retrieve image IDs with Photo Gallery

Photo Gallery is an add-on for Google Sheets which automatically browses a Google Drive directory and retrieves and lists the image information (including their IDs) in a Google sheet.

Prerequisites

Install the Photo Gallery by Awesome Table add-on.

Procedure

Open a blank sheet in Google Sheets.
Select Add-ons > Photo Gallery by Awesome Table > Create / Edit a photo gallery.

The Photo Gallery sidebar opens.
Click Use existing album.

The Please select a folder window appears.
Select the folder containing your images and click Select.
Click OK to confirm.

Result

Photo Gallery lists the image IDs in the second column named Id in the sheet.

What's next

Create the image URLs in the same Google sheet using the image IDs retrieved by Photo Gallery.

6. Create the image URLs

With the image IDs retrieved, you can build the correct Google Drive URLs which you can then successfully use in your Awesome Table app to display the images. The correct URL format is listed in the steps below.

Procedure

Delete the image URLs created by Photo Gallery in the URL column.
Instead, fill the URL column using a formula including the image URL template https://drive.google.com/uc?id=ID, where ID is the retrieved image ID.

info The template URL listed here works as expected in all sharing configurations - Anyone with the link, Google Workspace domain, Restricted, as long as you have the same sharing configuration on the sheet of your Awesome Table app.
1. In the first empty cell of the URL column, paste the formula below.
```
=CONCATENATE("https://drive.google.com/uc?id=", ID_CELL)
```
2. Replace ID_CELL with the cell from the Id column which is in the same row.
3. Press Enter to confirm the formula and see the resulting URL.
4. Accept the suggested autofill to fill out all image URLs to the bottom of the column.

Result

The URL column now contains the correct URLs for all images listed in the Google sheet.

What's next

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

7. 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.

7.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 sheet of your Awesome Table app. You define it for the column which contains the Google Drive URLs for the images.

Procedure

In your Google sheet, 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.

7.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 sheet 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 sheet, 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}}.