2
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.
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.
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.
- To share with anyone, leave Anyone with the link selected.
- 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.- In the first empty cell of the Id column, paste the formula below.
=CONCATENATE("https://drive.google.com/uc?id=", ID_CELL)
- Replace ID_CELL with the cell from the Id column which is in the same row.
- Press Enter to confirm the formula and see the resulting URL.
- Accept the suggested autofill to fill out all image URLs to the bottom of the column.
- In the first empty cell of the Id column, paste the formula below.
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}}.
Result
Your Cards 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 cards.
Related articles
Comments
26 comments
I do not get an image when following these instructions - I just get this:
Hello Zebulun Haggerty,
Could you submit a ticket with all the details about your issue, please? Would it be also possible for you to share us your view and your spreadsheet at "support@awesome-table.com"?
Thanks in advance.
Thomas
is there anyway to display a thumbnail of a PDF document inside files cabinet?
Hello Jaybird Farrow,
It is not possible for the moment to display a thumbnail of a PDF document inside a Files Cabinet.
However, you can propose this feature in our feature request.
Thank you for your understanding.
Thomas
I can't figure out how to use the ImageType keyword AND a template for the cards view. Is it even possible? When I put "ImageType" in my identifier line, it overrides my template. Thanks!
Hello Jane,
Indeed, it is definitely possible to use imageType keyword and a template at the same time.
You just need to use imageType keyword in the relevant column, then, display the content of this column in your template sheet. In this case, there is no need to have HTML code, you can directly use markers like this: {{yourColumn}}.
If you still experience this issue, please create a ticket and share with us your view and your Google Spreadsheet data source at "support@awesome-table.com".
Just make sure you give us access to your data.
Kind regards.
Thomas
How can I display images in full size instead of thumbnail? I used https://drive.google.com/thumbnail?id=imageID but I want it display in full size
Hello Lucy!
Are you using a template to display the images?
If so, you can change their size either within the HTML:
or also by changing the CSS.
Can you have a look if this would work for you?
I am working on an IoT project . I want to access images stored in google drive on the cloud server.Is it possible? If yes, then how?
Which cloud server should I prefer?
Hello,
I'm not sure to understand your request because if your images are stored in Google Drive, this article explains how to display them.
What do you mean by cloud servers?
Kind regards.
Thomas
How can I get the JPG format in my links?
I have already tried using "get link to share"
Hello AudiCo Eaton,
If your images are in JPG format, it will be automatically displayed if you use the correct link we advise above.
However, if you use another format, it won't work.
Kind regards.
Thomas
Hi! My question is similar to one above that seems to be unanswered. ( Lucy, April 9th, 2019 )
We are working within a GSuite Domain. We are using the following format, and it works in terms of seeing an image in the table. ( replacing domain.com with our proper domain, of course)
https://drive.google.com/a/domain.com/thumbnail?id=imageID
But - as another poster indicated, by using the "/thumbnail" attribute, this really retrieves the thumbnail version of the image, correct? We have some images and they appear very fuzzy at full size, so I am guessing it is retrieving the thumbnail. If I switch it from Thumbnail to Open ( as other examples seem to indicate )
https://drive.google.com/a/domain.com/open?id=imageID
...it does NOT work. We get the broken image icon. Is there a way to get the full-sized image?
Hello @Kent A Vaughn,
Indeed, if you use this way to display your images "https://drive.google.com/a/domain.com/open?id=imageID", it won't work.
That's why, you can change the size of your images in this way: "https://drive.google.com/a/domain.com/thumbnail?id=imageID&sz=w{{width}}-h{{height}}". It should work.
You can also change the size with your own CSS code.
Kind regards.
Thomas
Thomas - OK, that appears to work,but it is confusing as mostly we view Width and Height as sizing parameters, not resolution scaling parameters.
I would suggest modifying this pages instruction to clearly include those directions that you need to use W/H sizing if you want to work at full resolution of the image. ( at least for people behind gsuite domain restrictions ) Most people want to work in that mode, so the instructions on this page should simply indicate that as the default.
-- Kent
I have followed all of these instructions. I have read it over at least 10 times. The images are not loading on my website with the Awesome Table.
I have created a folder in GDrive with my images. The folder is in Read-Only with anyone with the link.
I then created a GSheet with the Photo Gallery Add-On. I have the links for all the images.
I paste theses links in another Awesome Table Template. The images don't show when I display the Sheet in Awesome Table.
Any clue as to what I am forgetting?
I have followed all steps above exactly. Although most users can view the site properly, a couple users are reporting all images to be broken. I have made sure that the sharing settings are correct. Any idea what could be wrong?
The users who see broken images also don't see the correct font which is added in a similar way (uploaded to Google Drive and linked to in the code).
Hello,
One example for this part..
Using templates also allows you to specify the size of your images dynamically:
Hola: intento utilizar el complemento de photo gallery. Cuando uso la demo funciona pero cuando intento hacer lo mismo con mis albumes aparece un circulo de carga pero no hace nada. He seguido los pasos que indicsis uno por uno pero no funciona. Me podriais ayudar? Me gustaria obtener las url y id de todas mis fotos. Un saludo
Hi Nahia.
If you're referring to Google's Photo album, this is not supported.
More about this here.
- Randy
Hi..
Thanks for the tips
can you help to share the google API documentation for this please ?
Thanks!
Will
Hi y3llow link17,
Here is all the developers documentation that Google Sheets has when it comes to charts:
https://developers.google.com/chart/interactive/docs/gallery
Hope it helps.
Thanks
Sorry for a newbie question, but isn't Photo Gallery supposed to generate a link for each image in my drive folder, so that an ImageType column can display the images? Because I don't see such links after having created a gallery, only the extracted image ID.
Also, I thought the Photo Gallery add-in would automatically include new photos when they are added to the Drive folder. Is this so, with delay, or is it manual? I can't find how to update.
Hi,
I'm creating an image library with thousands of images within hundreds of folders.
Do I need to follow this process for each folder, or is there a way to mass extract while retaining the folder structure?
Once displayed, is there a way to move between folders, to see the different images?
Thanks
I know to create direct links to google drive files is not a big deal. But when it comes to creating direct links for Images, it's a bit different. You have different sizes and most of them are not shown in good resolution quality. But here you can learn how to direct links to google drive images, folder & files. Visit the given link... Hope it helps :)
Please sign in to leave a comment.