Paging Through API Results in Adalo (using Pixabay)

Many, many thanks for this tutorial :clap:t2::clap:t2::clap:t2:

A very good way to understand how custom collections works and how to interact with them. I add a few tweaks on my side : a next AND a back button, and also, if the contents of the input text field is changed, I set the page number back to 0.

Additionally, when leaving the screen, I also created an action linked to the back button, to delete the current image search.

Again : MANY THANKS!

Hello @pfordmedia , @Ben, @David, and all,

I’m facing an issue with external collections…

I followed your tutorial about “paging through API results in Adalo, using Pixabay”. It worked like a charm until I remove the custom list (pixabay returned images) and recreate a new one. Problem : the “current images search”, which is the internal collection created when one wants to serch for Pixabay images, is not more available in the linked data, even if in the link action the “current images search” item correctly appears.

Does any of you all already noticed this bug and / or found a way to get things back to the normal ?

Adalo is a great product, but it seems there’s unpredictable behavior leading to bugs and lost data…

Many thanks in advance for your help or feedback, they’ll be more than appreciated.

:pray:t2:

Did you set the list type to be a list of Images from the external collection?

No, custom list. It does not work with any other list + external collevtions, as images (URL) are not detected as images for external collections.

It worked during the first day, then I remove the list to get it cleaner and rebuilt it again and… Bam… Bug, the “current search” does not appear in any field, even if it appears linked to the search screen.

Hey Patrick!

Loved the series! I just commented on your video as well, but thought the community here will benefit from this answer as well. You mention at the end of part 2 that you will do another video about how to use the data when a user selects an image. Would love to get the conclusion. I am struggling to figure out how to use the returned results.

*facepalm. I just figured it out. My image property was created as an “image” type, rather than text and url.

Hope this helps anyone else!

Take care, Pixabay does not allow to use their URL in your app, you have to download the selected image and upload it in Adalo or via an external API (airtable, Cloudinary,…).

FYI : I reproduce the Pixabay tutorial using Unsplash. Their image are great, and they allow to use their url in apps :wink:

1 Like

Hey @ChristopheHK ,

Thanks for the heads up! I did run into this issue and I am working to recreate using the Unsplash API. I am running into an issue when creating the collection and using it in the app. I have to put in an initial query when setting it up, but then I cannot pass a dynamic search term via filter in the list. How did you overcome this hurdle?

Yeah this is initially why I used Pixabay but later saw that it does not allow hotlinking. Apparently some APIs can replace the query param with the one you input later on, but I haven’t tested this with Unsplash yet.

For the initial setup, as my use case is using Unsplash for profile avatar, I’ve hard-coded “avatar” for the “query” query parameter.

So when my users are looking for an Unsplash pics for their profile, they get “avatar” relative pictures in the list. I put an input where the user can then enter keywords, and the list is built with a dynamic “query” filter, populated using the keywords input value.

When the user find the photo for his profile, he needs to click on the picture, which is zoomed in using a modal with a select button. This button is linked to an UPDATE Current user action where the profiles avatar url is populated with the Unsplash web format image.

It works very well, even if indeed the initial setup depends on the use case. For me it’s not an issue to provide a fake keyword, as the Unsplash API is used as a search API. But in some case it could be an issue.

I hope we could soon use variable when setting up the external collection, but it’s also true that per default, Unsplash should provide their most popular photos when the query parameter is empty.

Hope this helps…

BTW, @pfordmedia paging solution works like a charm with Unsplash too!

Take care, before your app is validated by Unsplash, you’ve got only 50 requests per hour. When building / testing, it’s quickly reached! So don’t hesitate to retrieve an high amount of photo per request.

@ChristopheHK

Thanks for the followup! I have something similar set-up with a default “query” param in the collection, but I am unable to get the second dynamic query filter to alter the results at all. Any tips or tricks on how you have this set-up?

@pfordmedia

The tutorial was super helpful! I do believe the Pixabay API is better suited to this task, but I am curious if we could figure out a way to use a custom action in Adalo to download the actual photo to the Adalo DB. Either using javascript or Zapier.

Right now I have the click action on the list update the record with the URL of the clicked photo, and visibility rules on a checkbox item that shows what photo is currently active.

@ben1

In fact I’m now using the random endpoint, sorry ! This endpoint returns by default random photo, but there’s a query parameter availble :slight_smile:

External collection :

List setup :

Result :

Ohhhhh. That may be perfect! I was just looking at the API docs for a tool called image4.io. It allows you to fetch an image from a URL and then host them there. My thought was to create custom action to fetch the image from pixabay, then host in image4.io, then add the url from image4 to the db in Adalo.

But I will look into the random endpoint in Unsplash!

1 Like

Man this is a great thread sure to help many people into the future. The random Endpoint is great actually! I just wish they had greater rate limits cause I actually like Unsplash better tbh.

1 Like

Yes, 50 requests is low, very low !..

I did see though that once you are approved for full API access and your production app has been approved, the limit is actually 5000 per hour.

Yes, it’s better, but this Api should not be use massively, so I plan to integrate it for profile picture updates, and mailing list creation to add images in the emails.

I am going through the process of applying for production right now. Agreed that 50 hits per hour go quick. I am just talking to the API team about the “download” endpoint requirements. I am very new to all of this, but when you hit the download endpoint, you just get a full-size image URL. I am hoping I can use the initial small or medium sizes returned, and just send request to the endpoint and call it good. because that should be 100% doable with the way custom actions work now.