Creating a Flexible Image Gallery

Our page features several images toward the bottom. 0:00 And one of the most common design patterns used to display a collection of images 0:04 is a grid of rows and columns typically called an image gallery. 0:09 The first image is in the upper-left. 0:15 Then subsequent images are presented from left to right. 0:18 And then, when there is no more space, the next row begins below the first row. 0:22 Our mock-up only contains a few images, but 0:28 this is a prototype for a social network for designers. 0:32 And while one designer's page may only have a handful of images, 0:36 another's might have hundreds. 0:40 When prototyping in a web browser, it's important to consider how different 0:42 areas of a page might change with varying amounts of content. 0:47 When this prototype is made into a real web application using a back-end 0:52 programming language, the content will be dynamically generated from database, 0:57 and the information from page to page might vary quite a bit. 1:02 That means we need a gallery design that's flexible enough 1:06 to handle any number of images. 1:11 We could create a grid of images using Bootstrap's system of rows and 1:14 columns, but this would break quickly. 1:19 There will be an arbitrary number of images and an arbitrary number of rows. 1:22 It's not something we can predict ahead of time and we want these images to display 1:27 left to right and then wrap around to the next row. 1:32 Instead, we're going to do this using a flex box container, 1:36 that way we can control how the images are displayed using CSS, 1:41 and the HTML can change freely. 1:45 Similar to the navigation at the top, we're going to use d-flex and 1:49 flex-wrap classes on the gallery section. 1:56 So, just after the gallery class, 2:01 we'll add the d-flex class and the flex-wrap class. 2:05 This won't do anything on the page just yet 2:12 because the elements inside the flex container don't have any height or color. 2:15 Let's jump into the CSS and add some styling. 2:20 So I'll save the index.html file, and let's switch over to style.css. 2:24 And first, I'm going to style the anchor elements surrounding the images because 2:30 once any images are inside, they should just fill the width of the container. 2:36 I want these images to be in two columns, so their width should be at 50%. 2:41 However, I also want a 1% margin on all sides, so 2:47 that means we need to subtract 1% from both sides of each image, 2:52 giving us a total of 48% for each image. 2:59 So, that's a little bit complicated. 3:04 Don't worry if you got lost with that explanation. 3:06 We are going to type that out, and it might make a little more sense. 3:10 So we will select the gallery class, and 3:13 then we want to target the anchor elements inside of the gallery class. 3:17 And we're going to give them a width of 48%. 3:25 So each one will take up 48% of the width of their parent container, 3:32 meaning that there will be two side by side with a remainder 3:37 of 4% total because there's two of them. 3:42 And then we'll give each one a margin of 1% on the top, right, 3:50 bottom, and left, so all four sides of each gallery element. 3:55 So that means on the left side, we'll add 1%. 4:01 On the right side, we'll add 1% for a total of 2. 4:05 And if you add 2 to 48, that will bring you up to 50, so 4:08 that each one is taking up half the page side-by-side. 4:14 We still won't have any height, and 4:19 we also won't be able to see them because they're transparent in line elements. 4:21 So let's make them block elements and add some color. 4:25 So I'll make some space to work here. 4:29 Just add some space at the bottom, and 4:32 let's give these a height that's relative, we'll say 10rems. 4:36 And then we'll set the background to sort of a middle red, 4:42 a middle green, and a bright blue. 4:48 And then we'll say display, block. 4:54 So let's save this, and then preview it in the browser, see how it looks. 4:58 And if we scroll down, we can now see our gallery images. 5:03 And this is really for the mobile version of the site, 5:09 so I'll size this down a bit. 5:14 And that's what our gallery images will look like. 5:16 And this is nice because when we increase the size of the browser, 5:20 even at these smallest responsive break point, 5:25 the images will still increase in size and allow us to display 5:29 the largest possible image while maintaining the same margin. 5:34 So there is no wasted space. 5:40 There's still a problem, though. 5:44 We added a 1% margin to each side of each gallery element. 5:46 And now, a whole gallery isn't flush against the left and 5:52 right sides of the container. 5:57 You can see how the featured image and 5:58 the profile image are hanging over the left side. 6:02 And here, you can see same thing with the featured image and 6:05 this button are hanging over the right side. 6:08 So there's a little space here and it's not flush against the edge. 6:10 We can't simply change the margins on each gallery item because when we get to 6:16 these larger responsive sizes, we're going to add more columns to the gallery. 6:21 Instead, what we can do is subtract margin from the container, 6:28 or the parent element, on the left and rights sides. 6:33 So, let's do that now. 6:37 We'll switch back to style.css. 6:39 And I'll select just the gallery, or the parent element. 6:44 And we'll give it a margin of 2rems on the top 6:51 to sort of push it away from the profile section, 6:56 minus 1% on the left and right sides. 7:02 So that's going to make up for this extra 1% that's on the furthest 7:07 left column and the 1% that's on the furthest right column. 7:11 And then zero. 7:17 And the syntax where we have three numbers means that the first one will be on 7:19 the top, the second number will be for the left and right sides, and 7:24 the third one will be for the bottom. 7:28 So there will be no margin on the bottom. 7:30 So if we save this, we refresh the page, watch the left and right sides. 7:34 It looks like it wasn't fixed, and 7:39 that's because there's a space between the dot and the gallery. 7:42 So let's try that again, we'll save it. 7:47 Switch back. 7:48 And now you can see that that margin has been subtracted correctly. 7:51 These two column arrangement works nicely for 7:57 mobile, but it doesn't look very good at larger sizes. 8:00 We have these large images and 8:04 it would be nicer if they were just more columns of images. 8:06 So let's fix that by adding some media queries. 8:11 So just below our existing CSS, I will type 8:15 @media all and 8:21 set a min-width of 576 pixels. 8:25 That is a Bootstrap responsive break point. 8:31 And I'll say gallery, and the anchor element's inside the gallery, and 8:37 we'll change the width. 8:42 And that's the only thing we need to change because we can just maintain this 8:44 same 1% margin and the same height and all of the other styling we already have. 8:48 So this time, we'll say 31.3%, 8:53 which is a little bit of a weird number, but 8:57 that will break it up into three columns of 33.3% of each column. 9:01 Because remember, we're adding 2 to the total, so this will be 33 9:08 because we're adding margin on the left and right and top and bottom. 9:13 So next, let's just copy that media query. 9:20 And we just need to do the same math for four columns. 9:23 So we'll change this min-width to 992 pixels. 9:30 And we want this to add up to a total of 25. 9:34 And remember, we're adding 2, so that gives us 23%. 9:39 So let's save that. 9:47 And again, these are both responsive breakpoints used by Bootstrap. 9:50 And this will split the medium size into three columns and 9:56 the largest size into four columns. 10:00 So let's switch back to the browser. 10:03 And refresh. 10:05 We have a four column layout At the largest size. 10:06 And then it goes down to a three column layout, these medium sizes. 10:11 And then it goes down to a two column layout at the smallest size. 10:14 So there's two columns, three columns, and then four columns. 10:19 So this looks good. 10:26 We can get images in there later if we want to test the robustness 10:27 of the prototype with real data, but I think this is good enough for now. 10:31