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.

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.

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.

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 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