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.
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 while in Google Drive then select "Get shareable link".
A sharing link will be displayed. Please retrieve the red part (this is the image unique ID).
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 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 view is public, or restrict it to a domain or specific accounts. Click here to learn more about sharing options within a domain.
To share your images, simply right click on the target-folder (or relevant images), select Share. Please 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.
A) For restricted viewership (specific persons or domain) within a GSuite 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
B) Any other usage (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.
A) 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.
B) 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
12 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
Please sign in to leave a comment.