Author feigner
2016
3
43
Premium
Ambassador
Rank 43
Unfollow

Adding Images into Gutenberg editor

The classic editor was a little easier to add images and media.

What you did was to click where you wanted an image and then select the 'add media' button.

You were then shown your media library and after selecting the image you wanted you clicked 'insert'.

With the new editor you don't have this option.

As all of your content is added as 'blocks' you need to define where you want the images.

Pasting images into Gutenberg (1:07)

One way I have found that you can insert images almost where you want is to copy an image ( make sure you are allowed to use it) - go to your post and around where you want it to appear put the cursor - pressing ctrl+v will paste the image.

Using the alignment you can put it to the right and the text will wrap around it.

This is the most uncontrolled way to use it as you cannot go back and move the image- you can resize it and add a caption ( the most read part of your post) and a link to make it clickable.

Using the media and text box (2:55)

After you have created your post and you want to go back and add images using this method, you can click on the + at the top of the paragraph block to add a block above this one.

Select a media and text block.

With the image you cannot paste, so you will need to upload it or select it from url.

You can set the image to the left or right.

After selecting the media - you can resize it and add the alt text.

Grabbing the handles you can keep the aspect ratio.

Adding the text to the left of the image - you don't need to retype the text.

If you hover the mouse over the left side of the block, you will see an up arrow, down arrow and a block in the middle.

If you left click on that block and drag the mouse up to the left of the image you will see a blue bar appear.

If it is full width then come down the left until it becomes half width and release the mouse.

You have now added the paragraph to the left of the image.

You can add other paragraphs there as well.

If you delete the original block then it tidies it up a bit.

Previewing this you will see that the text under the image is a bit tight.

You could add a spacer block under this to add some space

As I said there is no caption - Wordpress say that the text next to the image is good enough.

And you cannot make the image clickable.

Third way - and most customizable using Columns (6:18)

The third way I have found is to add a block called columns.

When you add this to start with it comes in as a two column block.

Clicking in the right hand area you can then add an image block.

This will show the caption.

You can drag and drop as above with the other column.

The differences between media text and columns (9:02)

The main difference is whether you want the image to be clickable.

With the media block you cannot add a link to your image and the columns you can.

Also the spacing is very tight under the image on the media block - so don't forget to add a spacer.

If you have any Comments , leave them below.

Or if you want any more training then please contact me on my profile or private message me.

Thanks for watching, if you liked the video then click on the like button.

Take care.

Phil

Join the Discussion
Write something…
Recent messages
DarkoL Premium
Hi Phil,

Just tried to insert picture with Ctrl-V but don't work. I copied an image from my hard disk and try to insert it in my new post with Ctrl-V. Can you check that, maybe is something changed in meantime with Gutenberg.

Ty.
Darko
Reply
feigner Premium
is it worth uploading the image to your site to insert it that way?
if you want the caption or clickable use the two column method.
if you don't then add it to aa meda block.
was the image open when you copied it or direct from the hard drive.
try with the image open on your computer.
Reply
DarkoL Premium
Later I take a copy from Media library and now it works.
Reply
feigner Premium
i jsut tried copying with it open and only the name of the file came through, ut found if you edit it on your computer and select all then copy - pasting it into your site then works.
glad you got it sorted Darko.
Reply
ElliottP5 Premium
Hi thanks for doing this video, it's a great help, as I've been having trouble with my pictures. Some have been coming out how I want them to. And others, completely wrong too big and blurred.
The block editer is brilliant. I'm completely new to it all, so still trying to work it all out.
Would I be right in saying, when starting a new post to use site content as normal?

Thanks Elliott.
Reply
feigner Premium
Hey Elliot....
it depends on whether you want ot keep a track of your stats...
if you do then use sitecontent....
when you publish your post then on your site you have a couple of options...
one is to leave it within the classic editor
or you can convert it to blocks....
once converted to blocks you may need to go through and check the images ( the one thing that don't really convert well)
i'm glad you are getting on with the block editor, it is the way forward...
if the images are too big then you should be able to click on them in the post, grab the slider and reduce the size of them....
let me know if you want me to have a look at anything Elliot
phil
Reply
jghwebbrand Premium
We have noticed that converting images to the block editor doesn't always make them look good. So it is necessary to check each page after publishing and converting it to the block editor.
Reply
IvanBroz Premium Plus
You can keep using site content or you can start working directly via WordPress dashboard. I personally prefer the latter because it's easier for me to post my content via WP.
Reply
ElliottP5 Premium
I'll give that ago, I've looked at that once or twice but wasn't sure. With any luck it'll be better/easier.
Reply
ElliottP5 Premium
Hi thanks for replying, I was having a bit of a mare with my pictures and it was driving me mad. Technical stuff like all this is tricky. Worse when you don't know any of the simplicity of it all, to correct it. But.... block editor has made my pictures come out just how I want them so far. Fingers crossed that it continues like that.
Reply
ElliottP5 Premium
Will do, your video is helping a lot, I have to keep re-watching it for help. Learning about using the blocks and just understanding them.
Thanks again.
Reply
jghwebbrand Premium
Yes, Hope that keeps working.
Reply
Julia39 Premium
Hi Phil good demo, I don't have Gutenberg editor, I understand what you are showing, I uploaded word press 5 hoping it would convert into something more easier to use. I don't have the same icons you show in your video. Like the plus sign top left that opens a block for frequent tab or block tab etc There is no gallery option, this would have helped me. I need to align images one after the other as I demo what to do next to make something.
Is there any other way around this? Can I get Gutenberg or is word press 5 the new version of this?
Reply
feigner Premium
what you may like to use is tablepress plugin
so you can add your content in table form
having text on one side and the image on the other side
if you go into settings - writing you may find that your default editor is set to classic and you can set the block editor up in here
glad you liked the demo
shout if it doesn't work
Reply
Julia39 Premium
Ok thanks Phil l'll give it a go and fingers crossed it works for me' otherwise l will be back lol!
Reply
DarkoL Premium
Great training Phil. All were useful to me. Ty. Did you make any other training for Gutenberg?
Reply
feigner Premium
I haven't made any more directly for gutenberg - i have just found a plugin that stops the related videos appearing and am putting the finishing touches to it.
I there anything specifically you want to know or is it more general useage, i am up for anything.
Reply
bushrash Premium
Very helpful training, thanks for sharing with us, Phil!

Bushra
Reply
feigner Premium
Thanks Bushra, I know this was one thing i had problems with when trying out the gutenberg editor.
the old classic editor was a lot easier to place and move images, but it makes you choose you place with more intent now.
Reply
Top