Image Block

The Image Block lets you insert an image into your WordPress site …

WordPress Gutenberg Blocks – Image

WordPress Gutenberg - Image Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Image Block Description

The Image Block lets you add images to your WordPress site …

Add images to WordPress using the Image Block

(Add images to WordPress using the Image Block)

How To Use The Image Block

To add an Image Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select an ‘Image’ block (in Most Used or Common Blocks section), or
    • Add the ‘Image’ block in the Content Area.
  • Drag or upload a new image, or select an image file from the Media Library.
  • Use the tools in the Image Block Editor or Block Settings section to resize, edit, format, or customize your image.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select an ‘Image’ block …

'Add Block' Tool - Add Image Block

(‘Add Block’ Tool – Add Image Block)

Or, select an Image Block in the Content Area …

Add an Image Block from Content Area

(Add an Image Block from Content Area)

After adding an Image Block, you can add an image:

  • Using drag and drop.
  • Using the web browser uploader.
  • From your media library.
  • From an external URL.

Add An Image Using Drag & Drop

To add an image using drag and drop:

  • Make sure you have your ‘images’ folder open (you may have to resize your browser to view your post and your images folder).
  • Select an image from your ‘images’ folder and drag it onto the active (shaded) gallery upload tool.
  • The image will be automatically uploaded to your media library and inserted into your Image Block.

Add an image to WordPress using drag and drop

(Add an image to WordPress using drag and drop)

Add An Image Using Your Web Browser Uploader

To add an image using your web browser uploader:

  • Make sure you know where your ‘images’ or media files folder is located.
  • Hover your cursor over the Image Block and click the ‘Upload’ button to open your web browser’s image uploader window.
  • Select an image from your media folder and click the ‘Open’ button to import the image into your site.
  • The image will be automatically uploaded to your media library, inserted into your Image Block, and added to your post or page.

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Image Block …

Upload Image button

(Upload Image button)

This will bring up the ‘Upload Media’ window on your browser. Select an image from your media folder and click on ‘Open’ to import the image into the Image Block and add it to your post/page …

Upload an image

(Upload an image)

Add An Image From Your Media Library

To add an image from your media library:

  • Make sure that your image has been uploaded to your media library (if you need help with this step, see our How To Use The WordPress Media Library tutorial).
  • Hover your cursor over the Image Block and click on the ‘Media Library’ button.
  • Click on an image from the Media Library to select it.
  • Click on the ‘Select’ button.
  • Your image will be imported to the Image Block and added to your post or page.
  • Update or publish your post or page to save your changes and update your content.

Let’s go through the above steps:

Hover your cursor over the Image Block and click on the ‘Media Library’ button …

Media Library upload button

(Media Library upload button)

Select an image from your media library (or upload one from your ‘images’ folder) and click on the ‘Select’ button …

Upload an image from the Media Library

(Upload an image from the Media Library)

The image will be imported to your Image Block and added to your post or page …

Image added

(Image added)

Add An Image From An External URL

You can add an image to your post or page from an external URL.

To add an image from an external URL:

  • Make sure you have uploaded your images to your server or external cloud storage location (e.g. Amazon S3, Dropbox, etc.)
  • Copy the image URL
  • Hover your cursor over your Image Block and click on ‘Insert from URL’
  • Paste your image URL into the URL field
  • Click ‘Apply’ to insert the image into your content.

Let’s go through the above process.

After uploading your image to your storage location and copying its URL, hover your cursor over the Image Block and click on ‘Insert from URL’ …

Insert image from URL

(Insert image from URL)

Paste the image URL into the URL field and click ‘Apply’ to add the image into your post or page …

Insert image from URL

(Insert image from URL)

After adding images:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit Your Image

Use the Image Block Editor to change image alignment, image width, add a caption to your image and resize the image.

To edit your image:

  • Click inside the Image Block to
    • Use the Block Editor tools:
      • Image alignment tools – Use these tools to change the alignment of the image on your post/page
      • Image width tools – Use these tools to change the width of the image on your post/page.
      • Edit Image tool – Use this tool to upload another image and replace your existing image.
    • Caption your image (and style your caption with bold, italics, strikethrough, or add a hyperlink).
    • Resize your image using the image resizing handles
    • Delete/remove the image.
How To Align & Resize Your Image

Use the alignment tools and resizing handles to align and resize your image …

Edit your image size, width, and alignment

(Edit your image size, width, and alignment)

You can also adjust your image size using the block’s Image Settings …

Resize image settings

(Resize image settings)

How To Caption Your Image

After your image has been inserted into your post or page, you can add a caption to the image by clicking inside the block and typing a caption  …

Add a caption to your image

(Add a caption to your image)

Note: You can add a link and format your caption using bold, italics, or strikethrough.

You can also nest your image inside a paragraph of text (i.e.  wrap text around your image).

How To Wrap Text Around An Image

To wrap text around an image:

  • In the content area, position your image above or below the Paragraph Block containing the text you want to wrap your image around.
  • Click inside the Image Block to select the image,
  • Resize your image by dragging one of the resizing handles,
  • Align your image to the right or left using one of the alignment buttons,
  • Click inside the Paragraph Block to select it,
  • Move the Paragraph Block down (if your text is positioned above the image), or up (if your text is positioned below the image).
  • The image will be nested in your paragraph.
  • To separate the Image and Paragraph Blocks again, select the image and click on the Wide Width or Full Width button.

Wrap text around an image

(Wrap text around an image)

You can also nest images in other block types (e.g. a List Block) …

Nest an image in your list

(Nest an image in a list)

Remember to update and publish your post or page to save your settings.

How To Remove An Image Block

To delete or remove an image block:

  • Click inside the Image Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove an Image Block

(Remove an Image Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Image Blocks into Reusable Blocks.

Image Block Tools, Options & Settings

The Image Block includes tools, options, and settings for:

  • Image Block Editor
  • Image Block Settings

Image Block Editor

Image Block Editor

(Image Block Editor)

The Image Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘Image Block – Additional Info’ section below.)
  • Align Image
    • Align image left
    • Align image center
    • Align image right
  • Image Width
    • Wide width
    • Full width
  • Edit Image
    • Opens the image inside your Media Library where you can perform additional image editing functions, such as:
      • Add/edit the alternative text (alt text)
      • Add/edit image title
      • Add/edit image caption
      • Crop, scale or rotate the image (see our How To Edit Images In WordPress tutorial if you need help.)
      • Select another image
  • More Options

Image Block Editor

(Image Block Editor)

Image Block Settings

(Image Block Settings)

Image Block settings include:

  • Block description area
  • Image Settings
    • Alternative Text (Alt Image Text) – Adding an image description is useful for:
      • Site visitors – if your image doesn’t load on your web page, people who can’t see the image can still get an idea of what the image is about, and
      • SEO – Alt text  descriptions help search engines index your images.
    • Image Size
      • Thumbnail
      • Medium
      • Full Size
    • Image Dimensions
      • Width
      • Height
    • Preset Sizes
      • 25%
      • 50%
      • 75%
      • 100%
      • Reset Button (Resets image to original size)
  • Link Settings – Link your image to:
    • None (clicking on image does nothing.)
    • Media File (clicking on image sends visitor to the location on your server where the image has been uploaded to.)
    • Attachment Page (clicking on image sends visitor to an’ attachment’ page created by WordPress to display the item).
    • Custom URL (clicking on image sends visitor to the URL destination: i.e. an internal page, external website, product page, e-commerce store, etc.)
    • Note: Selecting any of the above settings except ‘None’ gices you the option to open the link in a new tab.
  • Advanced Settings
    • Additional CSS Class

(Image Block Settings)

Image Block – Additional Info

The Image Block can be converted into the following block types:

Change Block Type - Image Block

(Change Block Type – Image Block)

Info

Installing plugins or themes on your site may add new functionality, options, or settings to Image Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Image Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com