top of page
Writer's pictureMichael Strauch (MPS)

How To Create A Dynamic Gallery In Wix - Wix Code Tutorial - Wix For Beginners 2018



Join me as we take a dive into creating dynamic galleries here in Wix. I'm your host, Michael Strauch you know me as ComputerMDofGilbert. So right now I'm just in a sample website here. I just created a database because what I'm going to show you guys how to do is add a dynamic gallery. So what that will do is pull the images from your database based off of how you set the permissions in the gallery, and it will pull those images straight into that gallery, that dynamic gallery. It's pretty cool.


So, as I said, we're in the database right now. I just went ahead and threw together three different items that we could use. It's very simple. I'm just pretending that this is like a recipe website and we're going to upload the picture of the recipe and then have the title and the description for the image as well. So you can see we've got some magical mac and cheese, some light, barbecue, chicken pizza and some 911 hot wings. Who's ready to get going?



Creating A Dynamic Gallery

Guys, let's create a dynamic gallery. Let's get to it. So we're just going to go we'll just land here on this new page. And no, we won't because this is what I use in some other video, I guess. So what would just go straight here to portfolio? This is a new page here. So if you've never added a gallery in Wix, it's really easy. Now this isn't just a dynamic gallery. This just goes for any gallery. So to add a dynamic one, though, you come in here to add and you scroll down to gallery. You could pick any gallery you want out of here. It's very simple. I'm just going to go with something something basic. We'll just go with this animated grid gallery. We'll bring it in here. We've got our gallery. And let me show you how easy this is with the new Wix code.


So we're then going to go in here because we have a database right. Full of our information. So we have to add a dataset, think of the dataset as the glue. So we go in here to database, add database data set, and then this little guy right here is invisible on the live website. You can’t actually see this. Like I said, it's kind of just like the glue that connects items from the database to your element. And no one can ever see this.


So we click manage dataset and then we need to choose our collection. So we uploaded our recipes into recipes. We'll keep the dataset name as is. And we want the mode to be read only because people are only going to be reading this. They're not adjusting any information, uploading any information, nothing like that. So you click read only, bam, you got that there. So now that your data sets on the page, you have your glue.


Now let's connect our database to our element, in this case our gallery using our glue. So we'll click on the gallery and just like we have with user input forms and everything else, we'll click these a little connect to data button. You'll click that. And then you'll see right here, connect gallery. Thankfully we already have the data set on the page. So it auto select recipes, dataset. Since it's already on the page, like I said, that's our glue. Then it says, image source connects to, so this is your image. This would be the recipe image. In this case, we would click recipe image.


And then we have titles connect to our recipe title, and then our descriptions connect to our recipe description. And then you actually can connect it to a link as well. But in this case, we don't have one. We're just going to display the content as is. Now. Let me show you how simple and easy this is, how nice it looks we're then going to see that the connection has been made. It turned green, which means the glue properly connected from the database. And if we click preview, we will see that the connection was made. Do we also notice it looks awful? Yes. We actually have to go in there and change how the gallery looks with three images.


Guys, the reason this looks so bad is just because of the images we have in there and the type of gallery we chose. I didn't edit design. I just wanted it to show you the functionality, but you see, we hover over it and right below it, it has the title and the description 911 hot wings. So hot you'll cry or a light barbecue, chicken pizza, mouthwatering bites, or maybe you're in the mood for some magical mac and cheese, a delectable cheesy delight.


Conclusion


Either way guys, we see that this is how you add a dynamic gallery. Although it looks like arbage because the pictures are so stretched because I didn't edit the gallery a design, but we see that it does work. And this is how we go about doing it. I hope this video helped you out. If it did, please drop a like down below comment. If you have any questions at all, I'm your man here and subscribe to me here on YouTube at ComputerMDofGilbert.


Also, don't forget to go check out wixmywebsite.com. If you guys are interested in getting more help in getting more tips regarding your Wix website, Wix code, all of that information, go sign up for these weekly Wix tips. As they have really been helping people out. In addition, come over to wixmywebsite.com. If you guys need help building your own Wix code style website, our team is standing by ready to help you out. You can come down here. You can either ask an expert or hire an expert and we're ready for you. So feel free to reach out to us or come over here and let's chat either way. Let's communicate. I love talking to you guys. So let's do this.


Thank you guys for watching and I hope you have an excellent rest of your day.

710 views1 comment

1件のコメント


不明なメンバー
2023年6月20日

Hello. Thanks for the helpful guide. I believe that the importance of unique visual content in creating and promoting a website cannot be overestimated. Unique visual content helps create and reinforce a website's brand identity. Therefore, I try to use only the highest quality old car images for my web project. By using custom images, graphics, and illustrations, a website can create a distinct and memorable visual style that reflects its brand's personality and values.

いいね!
bottom of page