Inserting images into posts and pages (Block Editor)

Go back to the list of Blocks

Note: This page uses Block Editor. If you are a Classic Editor User, refer this page.

When creating or editing a WordPress page or blog post, you can easily add images to a post or page using the Image Block.

Adding the Image Block to the Page or Post

To add an image to your page or post, you’ll add an Image Block.

You can also add an Image Block from within your content. To do that, hover over the block you’d like to add the Image Block above or below and click the plus sign. Then select the Image block from the available blocks shown.

Detailed instructions on adding blocks can be found here.

Once you’ve added the block, you will see the option to upload an image, select an image from the Media Library or insert an image from a URL.

Adding the Image to the Block

There are four ways you can add an image to the block. Three offered via buttons on the Image block placeholder and one drag & drop way to add images to your post or page.

1. Upload from your computer
   Click on the “Upload” button. This opens up a dialog box pointing to your own hard drive. Select the file you want to upload and click on the “Open” button.

2. From the Media Library
   You can select an existing image from your Media Library by clicking the “Media Library” button.

3. Insert from URL
   Click on the “Insert from URL” button and paste or type in the URL for the image.
   Notes:
   1. URL needs to be a fully qualified URL starting with https:// and the domain name and not be a relative reference to your own site.
   2. Images inserted via URL, will not be saved into your Media Library. They keep referenceing the image from the site of the URL. If the site disappears, your image will disappear from your post or page.

4. Drag & Drop
   You can select an image from your Explorer or Finder window on your computer and drag it into the block editor window. then drag and drop it into the block.

Block Toolbar

Besides the “Mover” and “Drag & Drop Handle” on the left side, the Block Toolbar for the Image Block shows five buttons:

• Block Styles and Transform to
• Change alignment
• Replace image
• Insert Link
• More Options

Block Styles / Transform to

In this drop-down, you see the two styles for you image.

The “Default” style displays your image as it was uploaded.

The “Rounded” style offers you a display with rounded corners

Transform to

You can transform an image block into five other blocks:

A Group block, a Gallery block, a Cover block, a File block and a Media & Text block. Please use the links to learn more about these blocks that use an image.

Replace

The “Replace” button from the toolbar provides you with three choices to replace the existing image with another one: via the Media Library, Upload from your computer or Insert from URL. These are the same choices you encountered at the beginning of this article.

Insert Link

“Insert Link” Button allows you to add a link to your image. The link options are:

• Paste URL – Links to a website or a different post or page on your own site. Can be relative or absolute (“/contact-page” or “https://google.com”). Type in a keyword and the Search will find a page/post from your own site.
• Media File – Links to a page with just the image
• Attachment Page – Links to the WordPress Attachment Page with details about the image

More Options:

The image block has a number of additional options that can be accessed clicking on the three-dot menu on the right hand-side part of the tool bar. These options are common to all blocks, you can read more about them here.

Block Settings

When you add a new block to your post or page content, it automatically brings up the block’s settings in the right-hand menu.

Styles

Image can be displayed two different styles.

The “Default” style displays your image as it was uploaded.

The “Rounded” style offers you a display with rounded corners

Via the Default Style drop-down you can select a default display variation.

Image Settings

The Image settings include Alternative Text, Image Size, Image Dimensions, and Advanced.

The Alt Text setting is where you would add a description of the image for people who can’t see it. This helps with accessibility as well as search engine optimization.

The Image Size setting allows you to select from Thumbnail, Medium, Large and Full Size.

• Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
• Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
• Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
• Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

The Image Dimensions setting allows you to manually set a height and width or set the image to 25%, 50%, 75% or 100% of the image’s full size. There’s also a Reset button there in case you need to revert your changes

Advanced

Title attribute

Beyond the Alt-text, you can also add a title attribute for your image, describing briefly the role of this image on the page.

To learn more, follow the link to the explanation on W3.org, the standards body for HTML.

Additional CSS class(es)

In the “Additional CSS class(es0 section you can one or more CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Image Caption

Beneath the Image in the Image block, there is an option for you to add a caption. You can format the text in Bold, italics and add a link.

Further reading

• Embeds – Inserting different media types.
• Gallery – Inserting a gallery block to pages or posts 
• Image Size and Quality
• Use Images
• Use image and file attachments
• Settings Media Screen
• Media library screen
• Media Add New Screen
• Edit Media
• Inserting Images into Posts and Pages (Classic Editor)