Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:39 minutes
Gutenberg plugins for wordpress 400x277
  • Overview
  • Transcript

2.5 Block Gallery

The “Block Gallery” plugin gives three eye-catching layout options for building image galleries, and in this lesson we will take a look at how to use it.

Useful Links

2.5 Block Gallery

Hello, and welcome back. In this lesson I wanna take a look at the Block Gallery plugin. So if you're going to the Plugins page and clicking on Add New, you'll do a search for Block Gallery and it's the one that was created by Rich Tabor. Now, I've already activated that. So I'm gonna go into my Posts, and this time I'm gonna add a new post. And the Block Gallery plugin allows us to very easily create some photo galleries. So let's just create a new page here, and let's call it Photo Gallery. And then here I'm gonna create a new block. And I'm gonna scroll down, and you'll notice that the Block Gallery blocks are easy to find because they are in their own category. So if we click on that category, it expands out, and we can create either a Carousel, a Masonry layout, or a Stacked layout. So let's take a look at those. Let's go to the Carousel layout first. Now let's go to our Media Library, and let's add a few images and create a new gallery. Once we've created it, we can caption each image if we want to, or we can just click on Insert Gallery to insert the images, and there we go. And then over here on the right, you'll see we have some options for those images. We can change the size, first of all, if we change it to extra large it makes the images take up the full width there. And we can adjust the height and pixels, we can adjust the slider settings so we can auto play the slides. So if we turn that on, it will automatically cycle through those slides whenever the page loads. And you can change that transition speed to any delayed amount of time that you want up to ten seconds. You can make it draggable, meaning that you can flick back and forth using a mobile device. You can also turn on and off Arrow Navigation, which are these arrows up here. If we turn that off, those arrows disappear or gets smaller. I'm not sure why there are still arrows there when we turned that off, but that option is there. We also have Dot Navigation. If we turn that on, you'll see a few dots appear over the bottom of the screen. There's also some color settings as well. But let's take a look at that. Let's go ahead and publish this page. And then let's view it in a new tab, and here we go. So we can click on the arrows to navigate between those images. We can also navigate using the dots down here at the bottom. Pretty straight forward. So let's go back, let's close that, and let's create another section down below this image. And we're gonna go to our Block Gallery section and I'm gonna click on Masonry. So the Masonry Gallery gives you a layout very similar to what you might see on Pinterest or sites like that. So we can go to our Media Library here. And let's go and grab all of these images, and create a new gallery, and insert it. And we're not gonna see anything real fancy here because all of these images are the same size. But if these images were different sizes, we would see it filling in just like we do on Pinterest. So in fact, if we go in to some of these images, let's go to our Media Library. And I'm gonna edit these images. Let's edit this one. And I'm going to crop it. Let's just grab this section of the image so that it's more of a vertical image here. And we'll click on the Crop button and Save that. And then we'll go to, if you click on that, yeah okay, it's still cropped. Let's go to another image. Let's do the same thing for this one. Let's edit the image. And I'm just gonna do this for a couple just so we can get the idea of what's going on here. Let's crop that one and save it. So now, we have a couple of vertical images as well and we can see how those images stack up, once we see that. So let's go back to our Posts and it's gonna be this photo gallery post. And we didn't save it before we left. So that's fine, we're just gonna create it again from scratch. We're gonna go to the Block Gallery. We're gonna go to Masonry. And we're gonna go to our Media Library. And I'm gonna grab a couple of these images as well as the two newly edited images we added. Create a new galley, Insert galley, and there we go. Now, we get a better idea of how this is going to behave if you have different sized images. So now that we've seen that, let's go ahead and update the page. And then we can view the post. And go to our photo gallery and scroll down, and there we go. And we can also take a look at what this looks like at different browser sizes if we just drag this down, and kind of resize it. And we see the images shifting around like you'd to expect them to and it still looks really nice at any size. And once you to get down small enough, it just stacks them all on top of each other. So it looks pretty good. And again, you'll notice there are different options over here. You can change the gutter, so if you don't want as much space in between the images we can bring that down a little bit, tighten it up. We can round the corners of the images if we want by playing with this slider here. We can turn captions on and off, we can even update the captions style. There are also Link Settings so you can link to an attachment page for each of these images or media file. We have some Color Settings down below as well. So it has a lot of options with it and, yeah. So let's go to our third option here for our Block Gallery, and that's our Stacked option. And again we're just gonna choose all of our items here, create a new gallery and insert it. And here we just see images stacked on top of each other, nothing fancy there. Again, we can always go to the page itself and view it. And when the page loads, we scroll down. Here's our masonry bit and once we get past that, we see our stacked gallery which takes up the full width of the screen. So image galleries are really easy to create with this plugin. If you do use a lot of images, this definitely gives you some flexibility in working with those images. So thank you for watching. And I'll see you in the next lesson.

Back to the top