I recently answered a question about retrieving and displaying images (or, more generally, attachments) stored in Spreadsheets and thought it might be useful to a larger audience.
As far as Airtable images (and other attachments) are concerned, the returned value for an ‘Attachment’ type column in Airtable returns an array (i.e. a Thunkable List) of objects. You can obtain the download url for the object using the url property. Here is a very simple example Thunkable program that retrieves and displays an image stored in an Airtable spreadsheet with a column called Attachments:
There’s also a Label in there so you can see a JSON representation of the returned object. Hint: you’ll want to make the height of the Label pretty large if you want to see the whole JSON. I made mine 200.
FYI, here’s a description from the Airtable API documentation of all the fields available in the Attachment object:
Array of attachment objects
Each attachment object may contain the following properties:
id: unique attachment id
url: url, e.g. "https://dl.airtable.com/foo.jpg"
filename: filename, e.g. "foo.jpg"
size: file size, in bytes
type: content type, e.g. "image/jpeg"
width:
height:
width/height, in pixels (these may be available if the attachment is an image)
thumbnails.small.url:
thumbnails.large.url:
url of small/large thumbnails (these may be available if the attachment is an image or document)
thumbnails.small.width:
thumbnails.small.height:
thumbnails.large.width:
thumbnails.large.height:
width/height of small/large thumbnails, in pixels (these will be available if the corresponding thumbnail url is available)
I am trying to use this code to display an image (stored in airtable) as the description part of a map. I cannot see how to get the blocks that come after “then do…” I am very new to using this system!
The image below shows my code and the source spreadsheet. Note, everything else works fine,
the map brings across the text data from the spreadsheet, but not the image.
Any help most welcome.
Please note that the ‘from Label1 set Text’ block in my example is only there to enable you to see the JSON (i.e. textual) representation of the value returned from the spreadsheet. It’s not necessary to the functionality of the app.
As far as I can tell you’ve pretty much got all you need for your app. Our Map component doesn’t yet support icons on markers, so somewhere else in your app you’ll need to have an Image component (let’s call it ‘Image1’, as in my example above) that you’ll use to display the image from Airtable. So assuming that, in your ‘when GetCell is done’ slot place place a ‘from Image1 set Picture to’ block and to that block attach your ‘get property url of object’ block.
Thanks for this Mark.
I am almost there! (Note, I am very new to this software!)
I can now retrieve the image, however, it is not updating the image when I press on the relevant marker. The image just stays the same. I’ve trying many variations of mixing the code (below) together, but to no avail! https://x.thunkable.com/copy/86f66fb90cc0a1e7c70c7af7e74d8e40
@rael74, The short answer is that since you’re always getting row 1 of your spreadsheet (i.e. in the ‘in Spreadsheet1 call GetCell’ block your always going to get the same image. The longer answer, however, is that we don’t currently have a good way for you to know which Marker has been pressed, so there’s no good way to figure out which row of the Spreadsheet to retrieve.
I’ve created a entry to fix that for that in our issues list, but there’s no estimate at this point on when that might get addressed. I’ve also created an entry to add icons/images to markers which, I have a feeling, might be an even better solution for your specific use-case.
I’m sorry that I don’t have better news for you right now.
I’ve successfully implemented the codes to retrieve the first image from airtable. What’s I’m trying to do now is display the rest of the images (5 total). I can’t seem to make it work. Do I use the same blocks and attach it below the spreadsheet block or below the screen block? I’d very much appreciate your help Thank you.
It’s not clear from your message whether you want to retrieve the rest of the images from the same cell as the first image or whether the rest of the images are in different rows of the table.
Assuming that it is the first case then you’ll want go through the list that is returned when you retrieve the contents of your attachment cell. In my example above, that would be by going through the 'value' list and getting the values at indexes 1 through the length of the list. The, as in my example, you would get the ‘url’ property of each of those values. In my example I only have one picture attached, so I am only getting the 1st value in the 'values' list. Here is an updated version of my example, where I am getting 2 images from my ‘Attachments`’ cell. Hopefully you can see how you would expand it to get 5 images:
I have got to the point where I have stored the image in my airtable via media DB but when I try to retrive it says undefined and does not display the image can anyone please help
I assume that when you say that you ‘stored the image in my airtable via media DB’ that you used the Media DB component to upload image to Cloudinary and that you saved the MediaURL returned from the Cloudinary Upload block into a cell of your Airtable. If that is true then you should simply simply set the Picture property of your Image to the contents of the Airtable cell. The more complicated set of blocks that you are using above to get the url is only necessary if you used the Airtable web UI to directly store an image (i.e. used Airtable to store the image rather than Cloudinary).
I am still new to this platform so really looking for the easiest way I tried storing the image direct to sortable but had no joy and found a sample that used media dB. Could you give me a sample of code that would retrieve image? Also a sample of how to save direct and retrieve from airtable? I am desperately trying to learn as my students love the fact they can create for IOS rather than just Android but few resources available for the more complex tasks.
I stored the image using the media bd and then uploading the URL to airtable as seen in code the images show as thumbnail in the airtable. but what ever i try I cant get them back into the screen the text is fine. I tried your suggestion but still no joy.
For your example above, that means setting the 'Background Picture' directly to the 'value' obtained from the “Image” column. That value should already be the URL that you need, so you don’t need (or want) to use the additional 'in list ...' or 'get property url' blocks.
Hi Mark
I have tried this see below and nothing I have tried setting the image picture and a button background the I can see the image in the airtable.
It looks like your Airtable’s Image column has a type of “Attachment”. It could be that Airtable does something different than expected when you store a URL in a column of that type. Could you try and either change the Image column to be a Text or URL type or add a new column (say “ImageURL”) with a Text or URL type and use that column rather than the Image column.
In the mean time I’ll try and see what’s going on with Airtable when you directly store a URL in an Attachment column using its API.
Also, could you share your project with me. That would help in diagnosing the issue.
Brilliant. I have just solved and came to record the solution to find your reply. I needed to have the airtable column set as url and not attachment its now working perfectly
Thank you.
