Image Slider With Airtable

[vita.charis]

Hi all,

I am trying to create an image slider as a detail item from an Airtable table. The list shows up fine with the thumbnail images. But I cannot figure out, however much I tried, to show multiple images from the same row in an image slider component. If I put multiple urls in the image slider URL field (connected to the airtable collection), it doesn’t show any images, and if I put only one image url, it show all the images column wise.

This is how my airtable data is structured. The details page needs to show the slider images row-wise, as highlighted in red.

[Flawless]

Hey there @vita.charis

Adalo’s API doesn’t like nested arrays so it won’t grab both images (img1 and img2) from 1 record. It can only grab 1 image from the record.

So you can pick either img1 variable or img2 variable and just use one. Then add more records to display more images.

[vita.charis]

Hi @Flawless,

Thanks for the info. I am currently trying a workaround by using nested lists through Airtable Linked Records to create a custom slider (by using a custom list functionality, as I need text overlay on the slider which is not available in the image slider component). I am also trying to follow the following tutorial to create a custom slider:

Adalo: Creating a Rotating Image Carousel or Gallery with Unlimited Images

But I am not able to pin the formula to change the image based on a form input field. I am currently using the following data structure in Airtable:

I tried the method with an input field (as mentioned in the youtube video), but I don’t get the image table fields to set as the default input at all. All I get is the linked table (topic) table fields. I get the image table fields, if I change the form field to a list, but then when I try to update it with the button, the button’s actions doesn’s show the option to update the field (I have set the form input list max records to 1).

Is there any workaround to this whole thing? I will then also have to connect the form input number (order number) to the image component so that the image changes when the user clicks on the next-previous button which will change the form input number.

I hope I am not being too confusing.

Thanks a lot in advance for the help.

P.S. I know that I can use one of the horizontal scrolling lists to create a kind of slider, but that doesn’t allow to change the text position or format it much (limited layout options). I am looking to recreate the instagram reels or stories kind of functionality, but with images and text. Hope it clarifies a bit more. THanks once again.

[vita.charis]

Anybody has any suggestions or ideas about this?? Or is this not possible in Adalo?

[Flawless]

Can you show more information as to what you’re seeing on the actual screens? Like, show us the parameters you’re using in the fields and show us the database collection that you have set up if you can.

[vita.charis]

Hi @Flawless,

Thanks for replying. Following is some info that may help.

I have tried again with the image slider component, and it seems I may be able to do what I am trying to do, if I can just get the right formula (since the image slider component has action option for when the viewer goes to the next image.

Following is the database that I am using:

I am trying to create an info gallery kind of thing. For example 10 things to do when you are in Udaipur. And there will be 10 images, and 10 headings as overlays to the respective images.

Following your first suggestion, about Adalo not liking nested arrays, I have restructured my data a bit.

I have three tables in the base–series, topics and images. Series is the first level, topics is the nested level, and images is where the image links are actually there. I have been able to make nested lists up to two levels using airtable so that seems ok.

Example: Cities in India (Series) → 10 Things to Do in Udaipur (Topic) → Images in the image table, each image having a title and connected to the Topic using Relationship fields. These are the pages and the formulas used to set that (In this I am using a field with Hindi language content, which is different from this example):

The first screen shows the series list. The second screen shows the topics list.

The third screen given below contains the slider, with each image filtered to show the current topic within the current series, and sorted according to the Order field in the table. I think that will take care of the ordering part for other image records which will be connected to other topics but will always be sorted from the lowest to the highest.

Now I am trying to make sure that the viewer will see the titles associated with the respective image slides in the field that is overlaid on the slider. I have put a text field over the slider, converted it into a list, set the maxRecords to 1 and sorted that too in an ascending manner, based on the Order field, so that it always syncs up with the images when the slide changes (if I can get the formula for that), as can be seen in the image below:

What I am trying to do is to get the text list to move to the next record when the user swipes on the image (or clicks on the next arrow to the move to the next image), and move back one record when the user swipes on the previous arrow, essentially syncing the image with the title as it is in the airtable.

I apologize for the long post. Hope it helps to understand what I am trying to achieve. Please let me know what formula should I use, or what’s the best method to get this done.

Thanks a lot in advance,

Warm regards

[dilon_perera]

Hope I’m correct!

Image Slider with Airtable.mp4

[vita.charis]

Hi @dilon_perera,

Thanks for the very helpful video. This is possibly the exact thing that I am looking forward (and I am wondering if this will work for lists within lists too, which would be awesome). I am replicating the steps now (fingers crossed, hope I do everything correctly). I just had one doubt from the video. I couldn’t figure out the type of Item ID field in the images table. Is it a linked field (connected to the items table) or is it an independent integer table manually numbered?

I apologize if I sound dumb–I am primarily a UI design guy getting into app dev. And if it is linked to the Items table, it should show up differently in that table, right? I tried creating that field as a linked one to the topics one and it shows up as a lookup field instead of as a number field (scr attached below). I wonder if I am doing it right:

Thanks once again for all the help, and going the extra mile to do so. The Adalo community has been really amazing.

Warm regards

[dilon_perera]

@vita.charis

I just had one doubt from the video. I couldn’t figure out the type of Item ID field in the images table. Is it a linked field (connected to the items table) or is it an independent integer table manually numbered?

Item ID in the Images table is a Number Column that I added manually the Item ID for that Image. I think you don’t need that because you have the single relationship that you can add that column name to the filter in the Slider.

@vita.charis

And if it is linked to the Items table, it should show up differently in that table, right?

When you creating a new column in the Image table select Link to another record and select the Items table. Then off the allow selecting multiple items. So then this is a single relationship. Then add the correct item in that column for the correct image. Then the Multiple relationship will create on the Items table.Then you can add a lookup on the Items table and select the ID from the Images table. And add a formula in the Items table that I have added in the video. We need this because after clicking on a item the name doesn’t show because the input is empty. And when we add this we can change the input’s value when entering to that screen to the first image ID on that item.

[vita.charis]

Hi @dilon_perera,

Thanks for the added clarifications. But I was not able to replicate the steps for some reason. The form input is changing according to selected List Item, but for some reason, the images are not showing up at all… I am missing something. Apologies for my ignorance. It will be a great help if you could look at the app and let me know what the issue is. I have created a clonable link with the app screens and data at the following link:

APP FOR CONTENT

It will be a big help if you can let me know what I am missing.

This is how my airtable looks:

Thanks once again, for all your help.

[dilon_perera]

@vita.charis

but for some reason, the images are not showing up at all…

It’s because you are pointing the Image URL to the Array in the Items Collection. It should be Current Image>Image column. And there are some mistakes on your filers too.

A Video :

Image Slider 2.mp4

The fixed app :

APP FOR CONTENT Clone

P.S : This would make so much easier if the component developer that made the Image slider adds a field to add the Image Name.

[vita.charis]

Hi @dilon_perera,

Thanks for going through the app and correcting my mistakes. It is indeed a big help. The Adalo community is very helpful, and happy to make the right choice for this to be the no-code platform that I start with.

Thanks once again for all the help.

P.S. - And yes, it is true that if the component developer (in this case, Adalo) were to just add the image name field, it would make life so much easier, especially because formulas and connections with external collections like airtable seem a bit iffy to figure out, at times. Most web applications do include a heading or similar text field with slider components. Should’ve been here by default.