How to retrieve images with a Spreadsheet component

Hi @jared!

Thanks for the table (I linked it and now it’s much easier to study your app) and for the tutorial on the VLOOKUP.

For sure all of this together has what I need to develop my app, I just need to figure out how :rofl: :rofl:

In the meantime, thank you so much for your help :pray:

Ale

1 Like

Good luck! Come back with more questions when you get some blocks put together! We’ll be here for you1

1 Like

I’m trying to retrieve an image and display it as a button BG, I see that my ‘get property of object’ block looks different - am I missing something? This is what I have so far, which doesn’t work unfortunately.

This is using the url column option on Airtable, have also tried attachment with no luck so far…

Does anybody have any idea?

Currently got it contained in a function - which shouldn’t cause an issue i’d imagine?

try setting the background picture to just value.

if the URL is is row 1 under with a column header of ‘image’, the value should be the URL,

if that doesnt work, print the value to a label and see what it returns

This is the layout of the table:
image

The button now says ‘undefined’…

image

@jared - found the issue, I’m an idiot. Turns out there was a space in front of the API key :rofl:

Thank you for your help as always!

Hmm. It seems to be able to retrieve text now but can’t show the BG image unfortunately.

make sure that your url works. it should be able to do this. I am going to add this into my airtable example. retrieving an image. displaying an image and button background based on url. this hsould be done during the upcoming week

I’ve managed to sort it, I think it didn’t save properly or something when I adjusted the space in the API as it worked momentarily as mentioned above, but not afterwards. All sorted now!

2 Likes

@Mark,

I am having issue getting this image to show in my app. What I have is an airtable sheet with some data including a url field with the url to an image that is stored in cloudinary that I uploaded and set myself as opposed to uploading from my app. What I am trying to accomplish is when a marker is clicked on the map I would like to show the corresponding image from the airtable url. I have some blocks but cannot get it to show the image. Any help would be greatly appreciated. I would ultimately love to be able to show the pic above the marker on the map itself but not sure that is available yet.
Screenshot from 2020-10-02 14-54-52

You’re telling Thunkable to take the property of a row and set it to a list variable. That’s problematic because your list will contain a text string instead of a list or list items. Also, you’re looping through your entire spreadsheet but only the last value of “Machine Pic” will be used for app machineImage.

If you just need one image url, you don’t need to use a list variable. And how are you determining which row you get the url from?

@tatiang,

Thanks for the response. I understand the first part of what you said and that makes sense. I have run through so many iterations of this that I probably need to start over.

As for your second part, I am not really sure what I need to do to get the row in the sheet that I need and I guess that is part of my problem:).

I don’t mind trial and error to figure things out as I have done that in the past but it does start to get frustrating when I have tried all kinds of methods and haven’t gotten it and especially don’t exactly understand what to do. So any help in understanding would be much appreciated.

I actually need the corresponding image to the marker clicked. There is a machine name column that is unique to each row so maybe that can be used to get the image? I do display the machine name in the bubble that shows when you click the marker on the map.

I’m working on something like this for a current project.

Essentially I loop through all objects and compare coordinates. If coordinates for late and long from market clicked = late and long in the object from the api, then I extract the required data from that object.

https://x.thunkable.com/copy/ce7315bcf2d5a5755f0e4d4e010df202

I made this a while back ^^^

@jared,
I am trying to modify what you have to fit my situation. However, there could be more than one machine with the same coordinates for lat and long. Is there a way to run that loop looking for a different column (machine name?) then pick the url image from that?

image

1 Like

Lol! Let me give it a shot and I will report back.

@jared,

Here is what I have so far but still no images. I feel like I am closer but still not there yet obviously. Any direction would be a great help!! The first bit works to add the markers to the map but it is the second part I am struggling with. I used your example as a guide but still no joy for me:(

The event block should be used like this

So when the lat/long of event = lat/long from airtable you’ve found your object.

Thanks @jared. I tested that and was able to get the lat and long in 2 different labels! Great! I then followed a tutorial written by @jane but the picture still does not show. I see the labels change when I press on a marker but no pic.

My apologies for asking so many questions to figure this out but this is fairly complicated for me and I am working on learning how the logic all works together to do what I want it to do.

Did you store the image in airtable?

I find cloudinary much easier to use I use the cloudinary console. Add my photos. And copy and paste the url into airtable or wherever I need it.

Would you mind sharing the project link with me? I’d be happy to help!