Inserting Images into Posts and Pages

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

Top ↑

Adding the Image to the Block 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.
  1. From the Media Library
    You can select an existing image from your Media Library by clicking the “Media Library” button.
  1. 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.
  1. 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.

Top ↑

Block Toolbar 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:

Hide Block Settings

The Hide Block Settings option hides (or shows)the Block Setting panel in the editor’s Sidebar

Duplicate block

Using “Duplicate Block” option, you can create a copy of the selected block.

Insert Before

“Insert before” lets you add the previously duplicated block before the selected block

Insert After

“Insert After” lets you add the previously duplicated block after the selected block

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable Blocks

Using the Add to Reusable Blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the “Remove Block” option you can delete the selected block from your content.

Top ↑

Block Settings 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.

The advanced section lets you add a CSS class to your block.

Image Caption 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.

Top ↑

Resources Resources

Changelog

  • Updated: 2020-04-24
    • Updated the Resource section with Block editor links.
    • Added to “Common Block” Category
  • Updated: 2020-04-23
    • Added the Block Toolbar section
    • Replaced one animated gifs with newer interface
    • Replaced three animated Gifs with videos of the current interface (5.4)
    • Removed the various ways to add a block to a post with the link to the Add a Block page.
    • Add a Changelog Box
  • Created: 2019-09-12