7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 51 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Masonry Images

Bootstrap 4’s new card columns feature is extremely powerful. In this lesson we’ll use it to build a masonry photo gallery with a pop-up display.

Useful Links

2.3 Masonry Images

Hello, and welcome back. In this lesson, we're going to use Bootstrap 4's card column feature to create a masonry layout for a photo gallery. And if you go the Bootstrap website at getbootstrap.com and click on the documentation link over on the left, under Components, you should find a section for cards. And we've already looked at cards a little bit in this course. And on the cards page, if we scroll down quite a bit, or if we just do a Ctrl+F and do a search for masonry, we should find this card columns section. So this card columns class allows us to build a layout that's kinda like Pinterest. So we have these columns with different sized cards in them. And as you can see, they're all laid out very nicely. And what we're gonna do is we're gonna build this layout using card columns, but we're only gonna have images. So we're not gonna have the card body that we see on all of these cards. Instead, we're just going to have the card image fixed on the top. And if you think about it, this is really a very simple way to create a photo gallery. And we're also going to create a click-event, so that when we click on these images, they'll pop up in a bootstrap modal. And you can find more about bootstrap modals, well first of all, before we go over there, if we scroll down a little bit further to past this example, you can see some sample code for this card columns layout if you want more information about that. But again, when we click on one of these images, we're gonna get a modal. So we can scroll down to the Modal section to see what these modals look like. And when we click on one of, well, let's go a little further down. Here we go. We click on this launch demo modal button, we get this modal that pops up. Now most of these modals in these examples have a modal header. A body which is the center section and then footer which is where this two buttons are. We’re not going to worry about a header and a footer for this particular project because again I just want an image. So we’re just gonna have an image show up and it’s gonna fade out the rest of the background. So again, you can find some sample code for modals here or you could just use the starting code that we're gonna be working with. So I'm gonna jump over to a new tab where I've got our starting CodePen opened up. And you can find the URL for this CodePen, as always, in the course notes for this lesson. And you'll notice that it already has our basic layout set up for us. Now we're gonna clean it up a little bit and add some extra functionality. But the basic layout is already there. So we have a navbar at the top just to complete the card. And then under that, we have a div with a class of card columns. You'll notice that I'm also using this p-3 helper or utility class, which adds a little bit of padding to this card columns. Without that, if we got rid of that, you'll notice that the padding collapses around the edges and everything just go right up to the edge of the screen. So I'm gonna undo that and add the padding back. So once we've opened that up, go ahead and click on Fork to create a new copy of it. And we can see here inside our card columns div, we have a number of different cards, and each of these cards simply has a different image in it. So you'll see again, as I mentioned, there are no card bodies, or card footers, or anything like that. There's just the card itself, and then inside that I've created an image with a bootstrap class card-img-top. And then the source of the image, the location of that image. And as we can see, Bootstraps lays those out very nicely for us. It puts them in this nice masonry layout. So now what I wanna do is I want to start off by cleaning up the look of it a little bit in CSS. And then we'll jump into JavaScript to create our functionality. Before I point that out, I should also point out if we go down to the very bottom, I've also created a very basic modal here. So this modal obviously isn't showing up yet, it's not going to until we click on one of these items. But all I have inside the modal-content section, you'll notice there's no modal header. There's no modal footer, there's just the modal body with an image inside of it. And you'll notice this image doesn't have a source attribute. We're gonan add that in JavaScript whenever we click on one of these images. And you'll notice I've also given the modal body this p0 class, which means there's not gonna be any padding in the body, so the image should go right up against the edges. And this img-fluid class will help us to do that. So let's go into our CSS and let's clean this up a little bit. The first thing I wanna do is I wanna clean up the cards themselves. Cuz you'll notice if you look really closely here that these cards have a gray border around it, and also the corners are rounded, and I don't want that. So I'm gonna point to the card class, and also, I wanna make sure I get rid of the rounded corners on the card image top class, the images themselves. So I'm gonna add a rule here for both of those classes. So we have .card, .card-img-top. And for both of those classes, I'm gonna set the border radius to a value of 0, and that should sharpen up the edges and it looks good. And then I'm gonna just turn off the border altogether, so I'm gonna set border to none. So that by itself really helps to clean up the page quite a bit. So now I wanna jump into JavaScript and make this modal work. So the way we trigger a modal in JavaScript is we point to the modal, and we're gonna be using jQuery here. And our modal here, you'll notice is called it has an ID here of img-modal. So we could trigger that manually here, just by pointing to that in jQuery. So I'm gonna point to #img-modal. And we're gonna use the Bootstrap function modal, and then inside parentheses and quotation marks, I'm gonna say show, and my cursor went away. There we go, show, and then at the end, I'll put a semicolon. And you'll notice it's just a broken image right now, but we can see our modal showing up, up here at the top. So what I wanna do is I want this modal to show up whenever we click on one of our images. So let's make that happen. We're gonna create a click event. We're gonna point to any one of these images. So we're gonna point to the card image, top class, because that's the class that's applied to our images. So, .card-ing-top. And that modal keeps showing up, which is why my cursor keeps going away. So I'm just gonna comment out this line here that's triggering the modal until we actually need it. So we're pointing to the card image top class, which is the class applied to each of these images. And we're gonna say .on and then inside parentheses and quotation marks, we're gonna be doing a click event here. So after the closing quotation mark, we'll say comma space and then we'll create our function. And then we'll move this modal show inside that function. But before we show it, we want to give it a source attribute. So remember, we're clicking on the images for this. So what I wanna do in jQuery is I wanna figure out what the source attribute is of the image we're clicking on. And then give that same image attribute to the image that we're going to put inside our modal. So let's just create a variable first called imgurl for image URL. And we're gonna set it equal to the source attribute of the button we just clicked on, or the image we just clicked on. So the way we point to the item we just clicked on, inside this click event, is we type $ and then, inside parentheses, this. And then we're gonna say, .attr, which means attribute. And inside parentheses and quotation marks, we're gonna point to the source attribute. So we're gonna store the source attribute of the source image we clicked on in this variable called imgurl. Then, we're gonna look inside the image modal, so we could create another variable here called modal and set it equal to the jQuery selector for that modal. And I'm actually gonna call this $modal, and then we will point to that variable here, $ modal.modal show. But before we show that modal, and we can go ahead and take away this comment here because we're inside this click event. But now I wanna point to this modal. I wanna find the image inside the modal, and add our new URL to that image. So again, if we look at our modal here, inside the modal body we have this image, and that's the image that we want to add a source attribute to. So, oops, we need to go after our modal here. So we're gonna point to $modal, which is the variable name we gave to our modal. And then we're gonna do a .find, and this is a jQuery method. And we're gonna find the modal body inside that modal, so .modal-body. And then inside that, we're looking for an image, so space img, there we go. So we're gonna find the image inside that modal. And we're gonna assign it an attribute of source. So .attr, and we're gonna give it a source attribute so ('src'). And then after that quotation mark, comma, space, and we're gonna give it a value that we stored in that imgurl variable. And we'll put a semicolon there to end that statement. So we've given it the image url that we want, and then we're showing the modal, so let's see if that works. We click on an image and, sure enough, the image shows up. Now you'll notice it's not taking up the full width of our modal, so we can jump into our CSS and make a couple more things happen here. So let's point to our image modal, img-modal. And we're gonna point to the images inside it. And on this particular page, or in that particular modal, there's only gonna be one image inside it, so this should be just fine. And we're gonna give that image a width of 100%, so that it will take up the full width. And let's stretch this out a little bit so we can see more of it, and that looks pretty good. The only thing I might wanna do is darken up the backdrop here. And the backdrop of our modal, you'll see it darkens up the rest of the website a little bit. But I wanna darken it up a little bit more. So the way we can find that is we can just right-click anywhere in that area and do an Inspect in order to find out what exactly we need to point to. And here, we have this div with a class of modal fade, so that's the modal itself. And that's not what we want. We want the modal backdrop. So if we look down a little bit further, we see this div called modal backdrop. That's the one we want. I'm gonna click on that. And then over here on the right, you'll see that it has an opacity of 0.5. And we can actually highlight this if we want to and play with that number, maybe bring it up to 0.8. And that looks good, so let's do that. I'm gonna highlight this rule here and just copy it. And then we'll just jump back into our CSS. Skip a couple lines and paste it. And now let's go ahead and close this here. Whenever we click on one of our images, you'll notice the backdrop is a lot darker. And so we really get to focus on whichever image just popped up. And no matter what image we click on, it's pulling the URL for that image so we're able to see it inside the modal when it pops up. And then we can just click outside the modal to close it. So thank you for watching, and I'll see you in the next lesson.

Back to the top