105 Comments
In this video you’re going to learn how to add images to your posts and pages using Gutenberg.
This is a preview of the new WordPress editor which is expected to be released shortly. As the update hasn’t happened yet, I’m using the Gutenberg plugin to simulate the new editor experience. The real thing may be slightly different when it comes out.
As they are still fixing bugs prior to the release of WordPress version 5 it's not a good idea to install the Gutenberg plugin on a live site.
Create or use a practice website to play with the plugin.
Open the post you want to edit (or the post you’re working on).
Click into a paragraph near where you want the image to appear.
Click the + button top left to add a new block.
Select Image block from the Frequent tab or the Blocks tab.
Click Upload or Add from Media Library
When you’re in the Media Library you can set the Title, Caption, Alt Text and Description as usual but it’s a bit different when you choose Upload.
The Upload button inserts the image and shows you some formatting options.
If you don’t see these options then click on the image and they will pop up.
You can convert the image into a gallery, set the alignment; left center or right, change the image and add a link.
We’ll look at links in another video.
And there’s an option to add a caption underneath the image using a few formatting options. There’s Bold, Italics, Strike Through and you can add a link to the caption as well as the image itself.
For additional formatting options click on the three dots (also known as elipses) and select Show Advanced Settings.
You can also access the advanced settings from the gear icon top right.
Textual Alternative is the new name for Alt tag. So you can add a description of your image here or leave the box empty.
This is where you can choose the size of the image from the dropdown list.
I’m making this image thumbnail size so it’s easier for you to see what I’m working on.
You can rearrange the order of the blocks using the tiny Move Up and Move Down arrows on the left hand side.
When you’ve finished the post Preview and Publish or Schedule for publication.
Now you know how to add images to your posts and pages using the new Gutenberg WordPress editor.
There’s a lot more to learn about the new WordPress editor so watch out for more of my videos.
Related Training
WordPress Gutenberg: Create a New Post
WordPress Gutenberg: Add Headings
WordPress Gutenberg: Available Blocks
WordPress Gutenberg: Add Links to Text and Images
More of my Tutorials and Videos
As always I'm here to help you,
Please share the love, click 'Like This' (if you do). Ask a question, share something or leave a comment.
ReplyFor instance, in WordPress, I can do a "custom size" change from...say 448 px width to 300 px width...or from...say 500 px height to 400 px height.
Will I still be able to do a "custom size" like that?
It's important for me since I sometimes have several images side-by-side or top-to-bottom and I want them to match up either in width or height, depending upon my image configuration.
Jim
Gutenberg has me a bit anxious. I'm just getting used to the current WordPress platform and I'm quite comfortable with it "as is"...
I don't mind changes. As long as they are beneficial. But, if they hamper my productivity, I'm not a happy camper.
Jim
That means if I don't like the way the image looks, I will have to delete it, then edit it in the media library, and THEN I have to add the image again to the content. I could be doing this over and over again - trying to get an image the way I want it to look in the content.
I hope the WordPress "Gutenberg" roll out takes this into consideration but, I'm not holding my breath.
Jim
There is an option to revert to the standard WordPress instead of using Gutenberg. Perhaps that will help you.
Jim
I add the image to my post in edit, then I click on it and drag the 'corners' to the size I need for that area.
I have a visual niche and use several images in one post, so I need them to fit properly.
How are we suppose to make the changes in the medial library? I have them set through the WordPress settings to one size and not the original 3 from Robert's (Boomer) tutorial. So there aren't 3 different sizes taking up size space. If I'm explaining that properly.
So you are saying we can't click on the image to drag it with Gutenberg?
The Gutenberg test plugin is in beta and they want any feedback. Perhaps Marion can mention this for feedback.
Marion help us!
Can you tell Gutenberg to allow the click and drag to size to custom fit the images?
You will see it anyway thanks!
I read how with our older posts there is an option to click on a button to change our format into blocks. Maybe I can still copy and paste my content in the editor as I do now then click on that 'convert to blocks' option. I hope so!
Like...DUH...I didn't even try to grab the corners because, I got so used to changing the "custom size" when I edited the image to include alt tags. But, lo and behold it works - in both the regular "Gutenberg editor" and the "classic editor"...
Of course, it still would be easier just to plug in the number (e.g. 400 px) while editing the alt tags. But, I will quit complaining about it, now.
I feel better. I can sleep well tonight!
Jim
P.S. As far as making changes in the media library, I usually start with resizing all images to "web - small" on my desktop - Microsoft Office Picture Manager - before uploading them to the Media Library. But, you can also resize them in the Media Library.
My jaw didn't just drop my whole face did! haha.
I have no idea on how you do it your way, it sounds complicated. I also haven't heard of Microsoft Office Picture Manager I never use anything like that. I keep things simple and it works anyway.
I resize the image if it's too big in edit once I upload it in the Media library, and also compress it on the EWWW plugin to make sure they are optimized.
It's when I add it in edit on the post that I have to adjust it there by clicking and dragging the corners.
Whewww I feel much better also! I thought there is NO way this is happening.
I left Marion a comment here as well asking her to send feedback since they want this while using the test plugin in beta. Now she doesn't have to.
Isn't Marion the best? sharing this with all of us.
It's almost midnight here and I too will be sleeping well tonight.
Funny 'meeting' this way. This was a crisis at first but now it's not!
Thanks Jim!
I'm so happy I can still click and drag the corners :D
And Jim forgot about doing it that way.
It's after 1am heading to bed.
Thanks for providing these tutorials for us!
Jim
I’ve gotten used to using MS Picture Manager. It allows me to shave quite a few kilobytes off the images and trims them to a manageable size. I also have the EWWW plugin which shaves a few more kB off them. I use a plethora of images on my gardening website so, the more I can minimize the memory impact - the better.
You’re right about Marion. What would we all do without her??? She puts training like this together and then we all start brainstorming options to solve various nagging obstacles to our mutual success.
I love this community!
Jim
I slept well thanks and I'm sure Jim did also haha!
I have a question, when you upload the image from your computer does it automatically end up in the Media library? because currently when you upload from the computer it ends up in the Media library and not on the post.
Thanks!
One thing I just thought of.
Do you know if I will be able to just drag the size to change it? like click on the image and drag the arrow. That's how I adjust my size. I think it may still be possible.
Thanks.
