Author MarionBlack
2014
2
63
Premium
Ambassador
Rank 63
Unfollow

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.

Join the Discussion
Write something…
Recent messages
viyee Premium
Thanks Marion.
Great help.
Reply
MarionBlack Premium
You're welcome, as always.
Reply
laurenjean Premium
Thanks Marion. I'm struggling with moving resizing images in Gutenberg. Just watched your video, lets see if I'll get the hang of it now.
Reply
MarionBlack Premium
Let me know how it goes for you, LaurenJean
Reply
LennyBianc Premium
Hi Marion, I always have a hard time getting an image say from an Amazon ad that I'm previewing. I don't like dealing with the code. Say I want to sell something from Amazon in a post or do a preview. I have a hard time getting the image into the post or even into my media folder. Do yo have an easy way? I wish it was just drag and drop.
Reply
shermand2268 Premium
When I use pics from amazon for items I'm promoting, I right-click on the image in the amazon listing, then click "save image as", then when I do my post I go to Add Media, and browse to pick it up from where I saved it.
Reply
LennyBianc Premium
Thanks I thought I tried that already? maybe not but sure I will sounds like easiest way so far
Reply
silah77 Premium
Thank you, Marion, again for your help.
Reply
MarionBlack Premium
You're welcome, Darusila.
Reply
YourBizTips Premium
Thanks Marion, you are saving my sanity!

John
Reply
MarionBlack Premium
Can't have you going crazy, John.
Reply
DebbieRose Premium
Hi Marion,
Thanks so much for these Gutenberg videos. You're taking the mystery out of this upgrade. I think I like it better. More options and flexibility.
Debbie
Reply
MarionBlack Premium
I'm lovin' it!
Reply
CLandi Premium
Hi Marion

You always post useful information. Are you self taught, or do you get your information from other sources?

Chuck
Reply
MarionBlack Premium
Thanks, Chuck. To me, being self-taught means getting information from various sources plus trial and error on my part. So I classify myself as "self-taught". I learn through my mistakes.
Reply
sns1977 Premium
I cannot add my image. It keeps trying to add my image at the end of my post. How do I move the image where I want it?
Reply
MarionBlack Premium
Hover your mouse over the image and look for the up and down arrows near the top left corner. You can also use drag and drop if you find that easier. I prefer using the arrows to move the blocks.
Reply
derekmarshal Premium
Loving this. So easy to follow.
Reply
MarionBlack Premium
And easy to use too.
Reply
Correna Premium
Hi Marion where do you get your free images

Thanks Correna
Reply
bpais1 Premium
Hi Correna,

You can get a million + free images in SiteContent. Another source that I use is Pixabay.

Jim
Reply
Correna Premium
Thank you so much,

Correna
Reply
MarionBlack Premium
I get most of my generic images from Pixabay and the ones I use above and in the video I created with Powerpoint.
Reply
Rich908 Premium
Thanks for Marion

Richard
Reply
LeeMcQuay Premium
You are a life saver Marion.
Thank you : )

I was stuck trying to add an image so I came to you and you of course helped me through with your training.
WooHoo.

Lee Ann
Reply
MarionBlack Premium
I'm glad it helps you, Lee.
Reply
dsproulx Premium
Thanks for the great information, I was wondering what the new editor would include.
Reply
Chrissies Premium
That is so different Marion.
Can we still use WP Edit with it? I really hope so!
Many thanks
Chrissie :)
Reply
MarionBlack Premium
Good question Chrissie. You can revert to the Classic Editor from Quick Edit and that allows you to use WP Edit. But there are some extra formatting options built in to the Gutenberg Editor so you may not need the plugin.
Reply
Chrissies Premium
Thats good to know Marion, thank you :)
Reply
Loes Premium
That's quite different, thanks again:)
Reply
MarionBlack Premium
My pleasure.
Reply
celiacman Premium
Hey Ms Marion
I have been wondering since you have been working with this new editor do you think it is easier to learn than the old editor for new members with no experience?
Reply
MarionBlack Premium
Yes. I think people who have never used WordPress before will find it easier than peeps who have been using the Classic Editor for years. Some of Gutenberg is more intuitive than the old WordPress.

I'm seeing questions here at WA that wouldn't be asked if Gutenberg was available right now.

e.g.
Reply
celiacman Premium
Hello Marion,
It would be great if this new editor would get on Wordpress while you are conducting this training

Jeff
Reply
MarionBlack Premium
I'm actually hoping that I can get the training done before the release of Gutenberg. It takes ages to make each video.
Reply
celiacman Premium
Hey Marion

I just built a new website and the editor is not like my other websites, they have made some changes to the editor already on new Wordpress websites will they be changing the old Wordpress editor as well eventually?

Just thought I would share that with you
Jeff
Reply
MarionBlack Premium
What's different Jeff? I just installed a new website and it looks the same as the old editor to me. Is it the icon at the end of the top row that needs to be clicked to open up the second row? Which theme did you use?
Reply
celiacman Premium
Hello Ms Black,

I am using the Storefront theme for a gift shop, so maybe it is just the theme which is different but some of the editor tasks are different from my other websites with the same theme?

Jeff
Reply
celiacman Premium
This new editor is going to take some time to adjust too, but it does appear to be more efficient once we adjust to the changes.
Jeff
Reply
KenPe Premium
Hey Jeff,
Thanks for the like om Marion's post.

Cheers,
Ken
Reply
bpais1 Premium
Easy for you to say, Jeff.

I hope I find some redeeming qualities with it, also. Or, I will be clicking on "classic editor" constantly!

:-)

Jim
Reply
MarionBlack Premium
It takes a bit of getting used to but I'm sure WordPress is going to be better than ever.
Reply
MarionBlack Premium
Funny thing, Jim, when I'm playing in my Gutenberg sandbox I don't click on the Classic Editor. I'm getting used to the new WordPress.
Reply
bpais1 Premium
But, Marion - you are a professional computer guru! I'm just a lowly hacker!

Jim
Reply
Markyjoe99 Premium
I really like your site. You offer great, well-detailed information. Just the right kind of information I need right now! Thanks very much.
Reply
Starbound Premium
Hi Marion,

I look forward to learn & use the new image editor. I hope I can use it to remove an image I don't like to replace it with one I do like.

Thank you,
Lovetta**
Reply
MojalefaR Premium
Thank you , Marion. Training I shall embark on.

Mojalefa.
Reply
MarionBlack Premium
You're very welcome Mojalefa
Reply
Melissa901 Premium
Thank you Marion
Reply
MarionBlack Premium
You're welcome Melissa.
Reply
ChrisShouse Premium
Thank you Marion :)
Reply
MarionBlack Premium
You're always welcome Chris.
Reply
Kinwan Premium
Marion, thanks for info, I'll make a file for all your tips.

Romy
Reply
MarionBlack Premium
I like that idea Romy.
Reply
KenPe Premium
Hey Marion,
Thanks for the demonstration and will be of great help.

Cheers,
Ken
Reply
MarionBlack Premium
There's a few more videos to come Ken.
Reply
KenPe Premium
Hey Marion,
I expected that as this is such a big project. Thanks for the like
Cheers,
Ken
Reply
XavierPerez1 Premium
Thank you Marion. This will certainly be helpful. Have a great week.
Cab.
Reply
MarionBlack Premium
Thanks Cab.
Reply
buffetearns Premium
Well done Marion thank you!

Wayne
Reply
MarionBlack Premium
You're welcome Wayne.
Reply
terrycarroll Premium
Well it didn't take too long to get this video out, Marion.

A great tutorial as always and thank you yet again for making it so easy to understand

Terry
Reply
MarionBlack Premium
But wait, there's more...

:D
Reply
terrycarroll Premium
Waiting.....
Reply
MarionBlack Premium
It's after midnight here in beautiful, sunny Adelaide. I'll publish the next video when I wake up tomorrow (my time).
Reply
terrycarroll Premium
ZZZZZZZZZZZZZZZZZZZZZZZZzz
Reply
DarleneB Premium
Thank you so very much for these tutorials you're doing on Gutenberg. I'm sure it would have taken me forever to figure it out. What a time saver. Your videos are just so easy to follow.
Reply
MarionBlack Premium
Thanks Darlene. This is what I do for fun :)
Reply
QAVAVO Premium
Thanks for sharing
Reply
MarionBlack Premium
You're welcome Taniela.
Reply
ipalladino Premium
Thank you Marion!
Reply
MarionBlack Premium
You're very welcome Irene.
Reply
Triblu Premium
Yikes! Thank YOU Marion for the heads up on what's coming.

I prefer using the text tab, so am in for a BIG change, I'm sure.

Not looking forward to this update as it reminds me of Windows95 when Microsoft decided to start calling directories folders.
Reply
MarionBlack Premium
The "Text" tab is going to be called "Code Editor" and the Visual tab will be Visual Editor. I think it's going to be less confusing than it is now.
Reply
Triblu Premium
Time WILL tell, that is f'er sure.
Reply
dndurst Premium
Thanks, Marion, looking forward to when we can use this new tool. Dennis
Reply
MarionBlack Premium
I hope it's sooner rather than later :)
Reply
bpais1 Premium
Very detailed training, Marion!

I do have a question. Will I still be able to edit the image size to the exact width or height I want just as I have been able to do in the past, or, can I only choose between "full, thumbnail, etc."?

Jim
Reply
MarionBlack Premium
I don't know Jim. If you edit the size of the image before you upload it then "full size" will be the size you upload.
Reply
bpais1 Premium
What I am getting at is sometimes I like to fine-tune adjust an image after it is uploaded - even though I edit the size on my computer.

For 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
Reply
MarionBlack Premium
Good question Jim. I'll check it out when I've got time. In the meantime you could install the plugin on a practice website and try it for yourself.
Reply
bpais1 Premium
Thanks, Marion. I truly benefit from your expertise!

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
Reply
bpais1 Premium
Bad news for me, Marion. Using the Gutenberg plugin, I can't fine-tune the images in the content. I can only make these changes in the media library.

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
Reply
MarionBlack Premium
I'm sure that the update is taking into consideration the mobile experience which means that the images will be the best size for viewing on mobile devices as well as desktops.

There is an option to revert to the standard WordPress instead of using Gutenberg. Perhaps that will help you.
Reply
bpais1 Premium
I found that option. It's called "classic edit." But, alas - and dawg gone it - it still does not allow for fine-tuning an image.

Jim
Reply
PatsyC Premium
Hi Jim, I had the same question and Marion sent me over here (thanks Marion)

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?
Reply
PatsyC Premium
Hi Marion, I just left Jim a comment and have a question for you there.

You will see it anyway thanks!
Reply
bpais1 Premium
Do you have any idea how soon this "Gutenberg" thing is going to happen?
Reply
PatsyC Premium
Hi Marion, reverting back to the standard WordPress sounds great but it may be temporary?

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!
Reply
bpais1 Premium
Patsy, you are an absolute lifesaver! 10 kudos to you!

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.
Reply
PatsyC Premium
Yayyyyyy!! so it wasn't what you were asking Marion.

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!
Reply
MarionBlack Premium
Isn't this community great? Two of our members are popping in on this thread and helping each other. Kudos to both of you.
Reply
MarionBlack Premium
Isn't this community great? Two of our members are popping in on this thread and helping each other. Kudos to both of you.
Reply
PatsyC Premium
Hi Marion!!

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!
Reply
MarionBlack Premium
Sleep well Patsy.
Reply
bpais1 Premium
Extra kudos to you, too, Marion...for giving us the platform to discuss this somewhat unnerving issue!

Jim
Reply
bpais1 Premium
Hi Patsy,

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
Reply
PatsyC Premium
Hi Marion, thanks. I'm finally getting to this message 22hrs later it's almost 11:30 pm already!

I slept well thanks and I'm sure Jim did also haha!
Reply
PatsyC Premium
Hi Jim, Imagine no Marion or community?

No way!

It's a good thing she sent me over to your comment otherwise we wouldn't have slept yet!!
Reply
bpais1 Premium
I slept very well, thank you!

And, barring unforeseen issues, I plan on sleeping well every night this week!

:-)

Jim
Reply
bpais1 Premium
Ain't that the truth, Patsy!

Jim
Reply
PatsyC Premium
Haha! I've been sleeping like a baby myself.

Actually...I've learned to not get upset or worried over anything. It's not worth it. Look at how it worked out fine in the end :)
Reply
PatsyC Premium
Yes, it sure is true :D
Reply
PatsyC Premium
Hi Marion, I was looking forward to the image tutorial :)

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!
Reply
MarionBlack Premium
When you use the Image Block to upload an image, the image goes into the post and the Media Library at the same time.
Reply
PatsyC Premium
Thanks for clarifying that for me Marion :D

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.
Reply
MarionBlack Premium
I've just been having a similar conversation with @bpais1 in this thread.
Reply
Leahdavid Premium
Thank you I will be checking it out
Reply
MarionBlack Premium
Great. I recommend using a test website to try out the plugin. Have fun with it.
Reply
Leahdavid Premium
Great thank you for the advice I will
Reply
codevonish Premium
Thanks Marion viewed it on my mobile without any problems.
Reply
MarionBlack Premium
Way to go Courtney
Reply
DEversley Premium
Thanks for preparing us, Marion.
All the best!
David
Reply
MarionBlack Premium
There's more to come David. Keep an eye out for them.
Reply
DEversley Premium
I will, Marion. Thanks again!
Reply