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.
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.
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.
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.
You can resize the image using the resize handles. Click on the resize handle and drag the image to your desired size.
The image block toolbar has options to change block type, alignment, edit image and insert link.
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.
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.
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 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).
- 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.
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.
- 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.
The image block is changed to a Cover block when you click on Add text over the image.
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.
Under Image settings you can add the Alt Text, change the image size and adjust the image dimension.
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.
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.
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:
- 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.
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.
2. The Image Details window will appear.
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.
The screen will load and look like the following:
Your editing options are: crop, rotate, flip and resize.
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.
This displays your new 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.
The rotate icons are used to rotate the image clockwise or counter-clockwise.
Click Save if you are happy with the rotated image or Cancel to try again.
The Flip icons are used to flip the image vertically or horizontally.
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.