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 are 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.
2
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 will not work as an image host making it incompatible with Awesome Table. We need to get the image IDs (text string in red) and generate the correct image link following a prescribed URL format.
To do this, you can either do it manually or extract the IDs automatically using our Photo Gallery add-on. This second option is ideal if you have numerous images as it will be tedious to do this procedure one image at a time.
Manually
Right-click an image in Google Drive then select Get shareable link.
A sharing link is displayed. Retrieve the red part (this is the unique ID of the image).
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) Click the Use existing album button.
4) Choose the relevant folder containing your images > Click Select.
The IDs of the images will be extracted and presented in your data source
2. Check if the images are shared properly
Make sure that your images have their sharing settings properly set. You can use Anyone with the link if your app is public, or restrict it to a domain or specific accounts. Learn more about sharing options within a domain.
To share your images, simply right click on the target-folder (or relevant images), select Share. Select the relevant sharing settings.
3. Create image URLs
Now that we have the image IDs and we've properly configured the sharing settings, we can create a link in a URL format that is compatible with Awesome Table.
For restricted viewership within a G Suite domain
This is for specific persons or domain.
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
Any other usage
It can be:
- public/private sharing for Gmail
- public sharing for GSuite)
https://drive.google.com/thumbnail?id=imageID
4. Display your images
Now that we have a proper link for our images, we can now decide how we want to display our images.
ImageType
ImageType is a keyword that allows you to display links with no code. You can simply paste the image URLs in a column and add "imageType" in the second row as a keyword.
Templates
You can also display your images with a template as this allows for more customization.
A simple example where {{ImageLink}} is a column with our image URLs
Using templates also allows you to specify the size of your images dynamically:
yourImageURL&sz=w{{width}}-h{{height}}
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.