FREELessons: 6Length: 37 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Adding Image Blocks

In this lesson, I'll show you how to add blocks for images and galleries. Gutenberg makes it even easier to manage images in your WordPress site.

1 lesson, 00:41


2.Working With Gutenberg Blocks
2 lessons, 16:23

Adding Text Blocks

Adding Image Blocks

3.Going Further With Blocks
2 lessons, 17:53

Advanced Block Editing

Creating and Using Shared Blocks

1 lesson, 02:29


2.2 Adding Image Blocks

Hello, and welcome back to this Tuts+ course on WordPress Gutenberg. In this part of the course I'm gonna show you how to add image blocks. And I'll show you how to add a gallery or a normal image, along with captions and links and so forth. So I've already added a number of text blocks. And I want to add another block above this final paragraph which will be an image block. Now the way I do that isn't by simply hitting return and adding a block. I need to hit the add button up here and then select Image. Now, I could either select Image or Gallery, whichever kind I wanted to add. But if I want to later on, I can convert one to the other. So let's start by adding an image block. So here's my image block, which has gone at the end of my content. Now, one of the great things about Gutenberg is that it's really easy to move things around. So I'm gonna click the up arrow to move it up above my quote, and I'm also gonna move that final paragraph back down. But you can also drag them around, which is great. I really like the idea of being able to move my content round whenever I want to. But anyway, let's come back to image blocks. So I can either upload one from my computer, or I can use the media library. Now, I've already added some images to the media library in this site, so I'm gonna use that. So the media library will look very familiar to you. It's exactly as it is without Gutenberg. So that's not affected by Gutenberg. So here's my image of a lion, I'll add some alt text. Click Select, and then that gets inserted as an image. Gutenberg has automatically resized my image so that it's the width of my content. So if I preview this now, you can see that it's the right width for my content. So let's go back to editing the post, but even better than that, if you want to resize the image, you can simply do it with the mouse, by resizing using these handles. So you don't have to set different image sizes in your media settings. You can just do this manually with the mouse, whenever you're in a post. Now, I would give you one warning about this. If you do it too much, you could end up with images that are all different sizes. And it could make the layout of your posts look a bit scrappy. So consider what you're doing before you start resizing all your images. But I like that, because it means that I can add text wrapped around my images and make sure that it all fits nicely. And I'll show you how to do that in a moment. So I can now edit this image, I can write a caption right here. That's my caption. And I can also format that caption. So I could add a link. So for example, here I could a link to the Wikipedia page on lions, right in my caption. Or I can add formatting, such as spectacular in italics there, or I can use bold or strike-through. So I can format, not only my paragraphs and my quotes and my other text blocks, but also the captions under my images. And you can also see that I can add a link up here to the image, so the image itself becomes a link. And going back into this, I can edit my image, just as you would normally without Gutenberg, and I can set how my image is aligned. So I'm gonna align it left for now. And I'm gonna make it a bit smaller. And what you can see is that the block underneath it automatically wraps around it. So let's make it bigger again. So here's a warning, you can see what happens if you make the size not quite right, cuz it means that your wrapped text isn't very good. So I'll put it underneath the quote and I'm gonna make this paragraph a bit longer. So my text book is now a bit bigger, and I'll go back to this and I'll resize it. And there you go, you can see that it's wrapping around my image. At the moment, it's all on the right, because the image is small enough for that all to fit, but if I resize it a bit bigger, you can see that it wraps and comes in underneath. Now that, to me, looks a little bit messy. So what I would advise is if you're using left or right aligned images, make sure you've either got plenty of text to wrap around and make it look neat underneath, or that you're sizing them so that the full text can appear next to them. So I could use this to create a paragraph here that describes what's in the image in more detail than I might be able to fit in a caption. Now let's preview that in our post. So that's how it looks in my post. Now, I think that there's a little bit of an issue here over the alignment of this paragraph with the image. It doesn't look perfect. And I think that's partly because I've got it below a quote with a citation, so that's not ideal. So that's how you add an image block, and you left align it so that your text can wrap around it. And don't forget, I could right align it as well, so that changes it just like that. And sometimes right aligning can work better because the text will look neater on the left-hand side, particularly if you're using bullet points, for example. Or alternatively, I can center it, so I've got a smaller image, but it's still centered within my text. So let me preview that again. And here it's a smaller image, but it's centered and the paragraph is underneath. I'm gonna make my image bigger again, cuz I like this nice big image of the lion. So that's how you create an image block. Now I'm gonna convert it to a gallery. So I select the block type transform up here, and I transform it into a gallery. Now I could either upload an image from my computer by clicking on this button here, or I could edit the image in order to add more images to the gallery and create that gallery, which I'll show you shortly. But first I'm gonna show you how to create a brand new gallery from scratch. I'm gonna transform it back into an image, as you see me doing there, and then I'm gonna add another block, which will be a gallery. And in this case, it lets me access the media library. So I'm gonna select some images here, And then click on Create a new gallery. Now, you'll notice that that is much quicker than when you do it without Gutenberg. Because without Gutenberg, you upload the files and then over here, you click Create a new gallery. And then you go to Create a new gallery button down here on the right. So I'll click Create a new gallery, I've got my gallery there. Insert it, it takes a moment to think, and now it's added all my images. And again, if I want to, it gives me the option to add more by uploading an image. But I do also have the option to add via the media library if I click the Edit Gallery button up there. So I can add to the gallery from the media library. So let's just close that down, and if I go back into my image, convert back to a gallery, click on edit, I can do the same thing. So that does mean that if you transform an image into a gallery, you can easily add images. But what you do need to do is edit the gallery rather than clicking on the add images link. So here's my gallery down here. And I'm gonna edit it. So I can re-order my media files. Let's put this cat first. And we'll put this magician there. And I can add captions for each of them if I want to, which I'm not gonna do right here. I could also change the alignment of my gallery. So I could make a smaller gallery that's aligned on the right or the left or the center, or I can just remove that alignment. You see, I clicked it again to remove the alignment, and that makes it full width. If I want to amend the columns, I don't do that via these options up here, but instead over here on the right in the block settings. I can change the number of columns in my gallery. So I can create a two-column gallery there, or if I wanted to make them really tiny, I could create a six-column gallery. And then I can link each of the images in my gallery to the attachment page or the media file. And I'll select None, and let's take it back to being three images wide. So the nice thing about that is you can see these images resizing and moving around as you change the number of columns, so you can get it to fit perfectly in your layout. So that's how you add image and gallery blocks in Gutenberg. In the next part of the course, I'll show you some more advanced tips for editing your blocks, including the settings for the blocks and also editing the code within text blocks. See you next time, and thanks for watching.

Back to the top