How to retrieve images with a Spreadsheet component

@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!

I have the image stored in cloudinary and pasted the URL into the field (which is set to URL) in airtable. If I call a single cell it shows up so I know it works but the code above is not bringing up the image.

if you stored a url and not the image in airtable, you should be able to reference the cell the same way you’d get data from any cell…

try using only the block

get property “Machine Pic” of object → in list [rows] get # [j]

you shouldnt need to ask for the URL of the first item in the list

there is only the need to do ^^ when you store the actual image in airtable

1 Like

I will give that a try and let you know how it goes. Thx again @jared for all the help!

1 Like

@jared, you’re a genius man!! That works perfectly!!

Again I really appreciate all the help!!

1 Like

@jared I know this is a little old now but I have run into a little bit of a snag with the showing of the images. If I have one marker on the map and I press it I see the correct picture as expected. However, if I have 2 or more markers at the exact same location (which will happen regularly) when I press on the marker I see the correct first image but when I click the marker again I see the information change (machine name and location) but the picture stays the same and the same thing if I click on the marker again for the 3rd machine. If I click on a different location I see a new pic as expected. I assumed when clicking on the marker it would just pickup the URL and show the corresponding image but not sure if multiple markers in the same location is an issue. Any help as always is greatly appreciated!