3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

Images grab the attention of your readers and helps them understand the contents of your post.

How you add an image depends on if you are using the block editor or the classic editor.

You can’t just use any image you like in a post or page. Unless stated otherwise, the law automatically grants full “copyright” over any creative work a person makes. Refer to The Educator’s Guide To Copyright, Fair Use, And Creative Commons to learn more.

Block Editor

You can add an image to a post or page using an image block if you are using the block editor. Other options for adding images using the block editor include:

  • Cover block – It allows you to add text and cover overlay to your cover image to create sections in your articles in a more visually appealing way rather than using heading text.
  • Gallery block – for creating image galleries.
  • Media & Text block – Used to place image, or video, side by side with text.
  • Jetpack plugin and Co Blocks plugin both include additional options for adding images.

To add an image block you click on the + icon at the right of any empty block or at the top left of the editor then search for image and click on the image block icon.

Add image block

The image block has three options:

  • Upload: upload a new image from your computer.
  • Media Library: select an image that is already uploaded to your site’s media library.
  • Insert from URL: linking to the location of an image on the Internet.
Image block

Click on Upload or Media Library to add your image. Or click on Insert from URL if you want to linked to the location of an image on the Internet.

You can add the caption (optional) once the image is inserted.

Image added to a post

You can resize the image using the resize handles. Click on the resize handle and drag the image to your desired size.

Resize image

The image block toolbar has options to change block type, alignment, edit image and insert link.

Image block toolbar

The change block type or style icon is used to transform the block style from default to a circular mask or transform the block to a cover block, gallery block, file block, columns, media & text block or a group block.

Transform block

To align an image within a paragraph you need to insert the image block just above the paragraph block then click on the image block and select left or right alignment. This merges the image into the paragraph block and the text wraps around the image as you resize the image.

Align image

The alignment of the image block is changed by clicking on the change alignment icon and selecting the preferred alignment.

Choosing right or left will allow you to place another block alongside the image block. Choosing center will return the block to its default, taking up the full width of the post or page.

Align image
  • Align left: used to align image block left.
  • Align Center: used to center align image block
  • Align Right: used to align right image block.

Insert link allows you to hyperlink your image.  By default, the image is linked to None (makes your image unclickable).

Insert link
  • Custom URL – used to link to a custom URL by entering the URL you want to image to link to in the text box.
  • Media file – when the visitor clicks on the image they are taken original media file.
  • Attachment page – when the visitor clicks on the image they are taken to the attachment page that includes the image, the caption, the image description and a comment field.

When you click on the Crop icon in the toolbar a selection of editing tools will appear which allows you to edit your image within the editor.

Crop tools

From left to right these tools are:

  • Zoom: You can zoom in on your image up to 300% and click and drag to control which part of the image is zoomed in.
  • Aspect Ratio: Control the ratio of an image’s width to its height.
    • Original
    • Square
    • Landscape: 16:10, 16:9, 4:3, 3:2
    • Portrait: 10:16, 9:16, 3:4, 2:3
  • Rotate: Rotate your image by 90°, 180°, 270°, or 360°.
  • Apply: Commit your changes to the image.
  • Cancel: Exit the image editing tools, abandon changes.

Any edits made to the image creates a new copy of the image in your media library so it doesn’t affect the image if it is used in another location.

The Replace option allows you to select a new image for your block.

Replace image

The image block is changed to a Cover block when you click on Add text over the image.

Cover block

Additional options for the image block are located in the editor sidebar of the block editor.  Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.

Image block settings

Under Image settings you can add the Alt Text, change the image size and adjust the image dimension.

Classic Editor

Your Add Media button on your classic editor is used to add images to a post or page.

Place your cursor where you want the image to be inserted and then click on the Add Media button.

Add Media

This launches the Add Media window where you’ll see three options for adding an image:

  • Upload Files: upload image(s) file from your computer.
  • Media Library: select images(s) that is already uploaded to your site’s media library.
  • Insert from URL: link to the location of an image on the Internet.
Select Files

Click on Select Files to upload from your computer or select Media Library to add image(s) file from your site’s media library. Use your Shift or Crtl key to select more than one image.

If you upload more than one image you click once on an image to edit its attachment details.

Below is a summary of the options you can change in the Attachment Details area:

Attachment details
  • Title:  The title displays on the image attachment page.  
  • Caption: Image caption displayed directly below the image.
  • Alt Text:  The text displayed when the image is not available. Important for accessibility.
  • Description:  Displayed on the image attachment page.
  • Alignment:  The position of the image in your post or page.  Options are: None; Left, Center or Right.
  • Link to:  The URL to which the image is linked to. Choices are:
    • None – removes link completely.
    • Media File – links the image to its original full size version.
    • Attachment page – links image to its attachment page
    • Custom URL – allows you to link image to custom URL. For example, handy if you want to link an image to another website.
  • Size: – the size of the image. Choices are thumbnail, medium, large and full size.

Click Insert into Post once you’ve edited the image attachment details.

Edit image

You edit an image within your classic editor as follows:

1.  Click on the image and then click on the Edit Image icon that appears.

Click on Edit icon

2.  The Image Details window will appear.

Image Details

You can edit the following settings in the Image Detail screen:

  • Caption – displayed when a caption is added.
  • Alternative text – displayed when images don’t load.
  • Align – used to align the image left, center, right or none.
  • Size – Change size using the preset size options or use the custom size to specify the new size.
  • Link to  – You can link the image to its image URL,  link it to any URL (handy if you want to link an image to a website) or have no link URL (used if you don’t want readers to be redirected to another page when they click on an image).
  • Advanced options:
    • CSS Class – The CSS classes that will be added to the image given the current settings. You can override this as appropriate.
    • Link Relative –  The link’s rel attribute, for adding nofollow amongst other things.
    • Link CSS Class – CSS class applied to the link.
    • Target – Select whether the link should open in a new window or the same window.

3.  Click on Edit Original to edit the image.

Click on Edit Original

The screen will load and look like the following:

Edit Image

Your editing options are: crop, rotate, flip and resize.

Crop

Cropping is used to remove unwanted portions of an image that you have uploaded.

Click and frag with your mouse to select the area of the image you want to keep and then click on the Crop button once you are happy with your selection.

Select area to crop

This displays your new image.

Cropped image

Click Save if you are happy with the cropped image or Cancel to try again.   Once you’ve finished you must click Save on the cropped image to save the new image.

Rotate

The rotate icons are used to rotate the image clockwise or counter-clockwise.

Rotate image

Click Save if you are happy with the rotated image or Cancel to try again.

Flip

The Flip icons are used to flip the image vertically or horizontally.

Flip image

Click Save if you are happy with the flipped image or Cancel to try again.

Video – upload image

The following video shows how to upload images using the classic editor.

Video – media library

The following video shows how to add images from the media library using the classic editor.

Video – from URL

The following video shows how to add an image from a URL using the classic editor.