Create a slideshow using Repeating Groups and Custom States

Adding a Custom Slideshow with Repeating Groups and Custom States

Here's how you can add a custom slideshow to your Bubble app using repeating groups and custom states. So I have a product page here for the marketplace app that I'm building and I'd like you know it's fairly common on ecommerce sites to have a grid of images down here which when I click on they'll take over this featured image slot.

Setting Up the Repeating Group

Let's go onto my product page and I need to put in a repeating group because this is going to display all of the images that are available. Let's just have a look in the inventory. Yes I have two columns here left and right and I want this to go in on the left. This is going to be type content image. I'm just going to tidy up the layout a little bit make it the full width of my column. Change the inside to row or that doesn't really matter. One row and then I'm going to go for four columns.

Adding the Image Element

Brilliant and then I need to add an image element because this is going to be showing my thumbnail. I'm just going to make this nice and tidy. I'm going to do it quickly so it's not going to be perfect. So this is a image element in a repeating group and so the dynamic image is the current cell's image. Okay brilliant.

Setting Up the Database

Now I need to set up my database so at the moment under product you will see that I have a thumbnail but this field is only going to contain one image at a time. So I need to create another field called images. In fact I'll name it something different so it's really clear. Let's call it photos otherwise it'll get a little bit confusing with the field type. So this is type image but I want to store multiple photos images in there so I check that box to make a list.

Uploading Images

You can't change a custom data types field between singular or list. So sometimes I mean I've just found myself having to delete a field and recreate it if I've then learned that a list is going to be better. So now let's upload. So I'll go back into app data and then edit here and I start adding my photos. I've just skipped there so you don't see how slow my upload speed is but you can see that I've now added in four images in total and I click save.

Displaying Images in the Repeating Group

Okay there are my four images. They're all of different sneakers but yeah we'll just run with it. Right so how do I display those images in this repeating group? So I access the current page product. Remember this page is set up to show a content type product. So current page product and photos and it knows the photos contains a list and so it accepts it as a appropriate image field for a repeating group.

Using Custom States for Image Selection

Let's have a look at our preview now. Ah okay I was waiting for it to load but actually what has happened here is it's previewed again the sample. It doesn't know to show this sneaker. So if I go back this was something I set up in a previous video but I'll just demonstrate it here. On my index page I have a repeating group that shows all my products and this links through to the product page but displaying, there we have it, the unique ID of the product. I'm trying to work with these sneakers so there we go.

Implementing Custom States

Okay so there's a few things I need to set up here. One is that when you click on one of the sneakers here I want it to change that image. So how'd I go about that? Well I think I'm going to use custom states. Custom states are a great way of storing data without it having to touch the database. This can be a little bit quicker and it also means that when the page is reloaded or a user kind of leaves your app and they comes back it's not saved. The data that it's like temporary data it's lost.

Setting Up the Custom State

So I need somewhere to store my custom state. Now I can store my custom state on basically any element on the page but again just so that it's really straightforward in the wrong section. There we go. Left. I'm going to store it in my left hand column here. So out of custom state let's say call this featured image and then this is of type image and it's not going to hold the list. I only want one at a time.

Updating the Dynamic Image

And so then for here I need to change the dynamic image. This is no longer being used thumbnail that's part of my kind of old setup without there being this slideshow. So I now refer to left that's my column and here's my custom state featured image. Brilliant that works.

Adding Click Functionality

Now I need something to happen if I click on one of these elements and because it's a repeating group I only need to do it once. I can't edit these other cells I just edit the first one and it carries across all of the other cells. So to add data to a custom group we go custom state we say set state we then find where we're storing that. Left and then the one we're changing or adding data to featured image and then say current cells image.

Testing the Functionality

Brilliant let's have a look at how it's going. I have a feeling we're still going to work on this. It has once okay I need to stop hitting preview and start refreshing the page instead. So fresh the page there we go. Yeah because I lost my name preview it takes through that sample page with loads of dummy content rather than an actual page taking the piece of data from my database that has this unique ID my sneakers product and displaying it.

Fixing the Initial Image Display

So let's have a look at it. If I click on it it works but did you notice what hasn't worked so well if I hit refresh yeah it's blank that's because there's nothing in the custom state when the page loads. Now can I set a default value if I go on to left custom state. Yes I can if I upload it but my default value needs to be the first the first image in my series of thumbnails my repeating group out here.

Setting a Default Image on Page Load

I can upload an image but then it's not dynamic. So to fix that I can go for on page load and say on page load set state of left featured image and then there's two ways I could do this in fact I'll show you both. I can go current page product photos and then first item let's check that. So it's saying we know that there's a list in the photos field and let's display the first item and and that means that it saves it on page load so that when I click on an element here another image it overwrites it.

Alternative Method for Setting Default Image

There's another way you could do it. I'm sure one of these offers a slight performance boost but it's worth demonstrating. I can go to the repeating group image list of image first item. Okay and it's worked just the same way so instead of fetching it straight from the database maybe this takes a smidge longer to load it loads the repeating group and then takes the first image instead.

Conclusion

Anyway that is how to create a product slider or you know you can have all sorts of uses for a slideshow and a slider element in your Bubble app but anyway that is just one way of going about it.