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 is 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 won't display the images at all when used on Awesome Table (or any web apps). We need to get the image IDs (the text string in red) and follow a prescribed URL format to generate the correct image link.
To do that you can opt to retrieve your images IDs in two different ways. You can do it manually or extract the IDs automatically with our Photo Gallery add-on. This last option is preferable if you have lots of images as it will be tedious and cumbersome to do this procedure 1 image at a time.
• Manually
Right click on your image and select Get shareable link.
You'll see a link but we will extract the image's ID from the URL.
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 pertinent folder containing your images > Click Select.
You'll be presented with the datasource containing the extracted image IDs. Wasn't that quick and easy?
2 - Check if the images are shared properly
You might be asking, "I just ran the Photo Gallery add-on to get my image IDs. Won't this automatically set the sharing settings as well?" Short answer, No. As discussed in our GDPR section on Important things to remember about your data's security:
It's recommended to set your image sharing settings to On-Anyone with the link. This way, your users won’t be required to log in just to see your images on Awesome Table. Otherwise, you can set it to either On - Public on the web or Off - Specific people depending on your needs.
Click here to learn more about sharing options within a domain.
To share your images, simply right click on the target-folder (or pertinent images) and select Get shareable link. This will change the sharing settings of the specified folder and its content to On-Anyone with the link.
After which, you'll be prompted that link sharing (for the folder and/or its content) is automatically configured to Anyone with the link.
3 - Display your images
Now that we have the image IDs and we've properly configured the sharing settings, we can specify how the images should be displayed using the prescribed formats below.
• Using a Template
Since we're using a template, we'll only be needing the image IDs (and not the full URL).
A) For images shared only within a GSuite domain (or intranet)
Use this URL format if you're going to:
- Display your views only within your domain (intranet) and
- The Google Drive (or Team Drive) images are shared only to anyone within your domain (but not shared publicly).
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
More often than not, people are using multiple Google accounts at any given time (at least one for their personal Gmail and another for work - G Suite). If the URL format above isn't followed, (by default) Google will try to open the images using your Gmail account and it will fail each time.
This simple (yet brilliant) URL format tells Google that the images are stored within a domain and, as such, it will open the images using the correct (G Suite) account.
Since we're using templates, this means we can also specify the dimensions:
https://drive.google.com/a/domain.com/thumbnail?id={{imageID}}&sz=w{{width}}-h{{height}}
You can use absolute values (pixels) or relative values (%) when specifying the width and height.
B) For images shared publicly using a Gmail account
Use this URL format if you're going to:
- Display your views publicly and
- The Google Drive images are shared publicly.
https://drive.google.com/thumbnail?id=imageID
Where imageID is the identifier of your image.
Since we're using templates, this means we can also specify the dimensions:
https://drive.google.com/thumbnail?id={{imageID}}&sz=w{{width}}-h{{height}}
You can use absolute values (pixels) or relative values (%) when specifying the width and height.
• Using the imageType keyword
Using the imageType keyword is an easier alternative as this won't require writing any code. This displays images from a column containing the full URLs (links) of your images. To use this approach, follow the formats below.
A) For images shared only within a GSuite domain (or intranet)
Use this URL format if you're going to:
- Display your views only within your domain (intranet) and
- The Google Drive (or Team Drive) images are shared only to anyone within your domain (but not shared publicly).
https://drive.google.com/a/domain.com/thumbnail?id=imageID
Where imageID is the identifier of your image.
B) For images shared publicly using a Gmail account
Use this URL format if you're going to:
- Display your views publicly and
- The Google Drive images are shared publicly.
https://drive.google.com/thumbnail?id=imageID
Where imageID is the identifier of your image.
Comments
8 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?
Please sign in to leave a comment.