This SOP details the process for adding and configuring an image gallery on a Tent Apps website. It covers step-by-step instructions on selecting images, resizing them for uniformity, and adjusting gallery settings to enhance user experience.
Hey guys, um, I am going to show you how to add an image gallery to your website. So right now in this section we have one image, but we want it to be multiple and we want it to be a constant rotating slideshow. So, the first thing we need to do is we need to delete this and we're going to hit this grey plus button again and we're going to search for gallery. And there are multiple options for a gallery, this just bangs out. Basic gallery, this is all we need. And now we get to select the images, which I'm going to shrink this just to help me. So, automatically it's just going to have every single one of your images and we don't want that. So, what we're going to do is we're going to hit a plus button right here. And then we're going to select the images that we want. Now, I'm going to show you how I do it with just selecting any image. And then I'm going to show you how we can kind of make it more unanimous, make them all the same size, et cetera. So, I'm going know I want this image, and I'm not sure what others I want, but I'm going to select random ones, and I'm going to show you how it can be changed in the future. So, let's just do this one. Let's just do this one for right now. Now, we're just going to hit select, and for the sake of this purpose, I'm going to select three. So, we hit select right here, and once it loads, there we are. So, you can see that that's not exactly what we want. First thing we want to do is go to elements, and I don't want those words, so we're turning that off, and we don't need that either. And then we're going to go over to design, and I don't want it to show like this. I want it to show like a slider. And once that loads, you'll be able to see the difference. Here we are. So if I click these arrows, it kind of goes through all the images, but you can see right now that it kind of changes the image. It changes sizes just because all of the images aren't the same size. Now, the best way around that that I've found is simply to crop images in Canva. So, let's go back to our content and we're going to act like we're adding an image to our gallery. But, you saw that two of the images were kind of squares, uhm, so that's the sizing for this image and you can see the large variation. Now I'm going to go into Canva. I'm just going to do a square. So we're going to hit custom size and I'm going to make it a thousand by a thousand. And we're going to create a new design. Now, what I recommend is we're going to copy this link and open it in a new tab. Oops. I'm going to do the same with this image. And we're going to open it in a new tab as well. So, I have this design for Canva open, and I'm just going to right-click. I'm going to copy this image, and I'm going to paste it. Then, we're just going to stretch it so it fits the size of this page. And, that looks like a good spot for it. Now, we want to add a new page. So, I would probably have all of this in one Canva file, just so that I have every single image for that particular slider. I know it's cropped, I know where to go. We're going to copy this image as well. And we're going to paste it right here. And then, once we stretch it, we can kind of move it around, make sure we have the right focal point. There we go. Now, nothing important is getting cropped off, it's just going to be the more unanimous with the rest. So, as you can see, they're uploading over here. It's not quite done yet. So, I'm just going to pause. Okay, now that those images are taken care of, we can just name it whatever we want. And we can download it and upload it to our media library. Okay, now I'm back to my media library. I'm going to upload files. I'm going to put both of the images that I just cropped. And I'm going to click open. And now I want to unselect the ones that I already have added because we know that those are not the correct sizing. So I'm just going to go through. And so unselect those three and we want to have the new ones that we just added in there. Uhm, so for this particular slider, we want to remember that the sizing is 1000 by pixels. You can make it whatever sizing you want. You don't necessarily have to crop them. It just makes it look a little bit better for the end users on your site. And now that those are uploaded, I have them both unselected and I just hit select right here. Which, it doesn't seem to want to delete these ones, so let me try it Okay, let's start over from scratch. Sometimes it can misbehave like that. Okay, here we are. So now we have the two images that just slide through, and that's exactly what we need. They're the same size, so it doesn't look quite so funky. And we We can make them random. We can make it a default, which is it'll show the newest video, or, sorry, the newest image in your gallery first. It doesn't really matter either way. I'm going to leave it as default for right now. And then, uh, all I really want to do now is play around with the styling, which you can see here. See, like, this particular image has the rounded corners, it has a shadow, so I want to make this fit with the rest of the site now. I'm going to go to design, and we already have the layout taken care of. I'm going to go to border. And I believe across the site we have 8 pixels for the border, and then I also want to add a box shadow. So, now that that is added, you can also see when I hover over, these arrows are grey, and you can see that those dots are a certain color. So, if I go down here, I can also make the animation automatic so they will automatically slide through. So this one is changes every 7 seconds. I'm going to make it change every 5 seconds. Then, don't think we need to do any of this, but we can try and see if it makes any difference. So, once we have everything looking the way we want, we'll just hit our green check button. And you can still see that the sizing is not quite what I want. So, I think I'm going to change the row size for this instance. That kind of shrinks it a little bit and once I have everything else taken care of, I'll be good to go. And then I just hit save. And that's how you add a gallery to your site. Now, if you want to do this go in and delete one of these images. Again, you can see when you hover over them, you just hit the trash button. And then when you want to add a, an additional image, you'll just hit this plus button right here. But, as always, make sure you hit the green check button and the green save button. Once you're done, so that all of your changes have been saved. But if you need any help at all, please just let us know.