Image Block

Embed

Copy the following HTML iframe code to your website:

<iframe src="https://www.caffeinejournal.com/glossary/image-block/?embed=1&length=X" style="width:100%;height:300px;border:solid 1px black;" class="cm-embedded-content"></iframe> Copy to clipboard

The WordPress Image Block allows you to easily add an image to your page or post.

Here’s how the WordPress image block looks on the back end of the website before you add an image:

Note that I inserted this image of the image with the image block — so you can see how it appears on the front end.

You have three choices here: upload a new image, choose one that’s already in your media library, or insert a URL from an image elsewhere. For more detailed information about uploading images to the Media Library, read this post.

If you click on the little picture icon in the upper left corner of the Image block, it will open up a menu where you can make your image round, or transform it to one of a selection of other block types.

You can also click below where it says “Write Caption” and type in any caption you might want. If you leave it blank, it won’t show anything on the front end of your website.

The next icon over will open up a dropdown of choices for aligning your image.

Replace will allow Zip to change his mind when he decides not to represent himself with this image of a baby sloth.

And, you can choose to make your image link to something by using the link button, just as you did with the Paragraph block.

Image Block Settings

When you have an image block selected, you’ll see these settings in the block tab in the right panel.

• The Styles settings will do what we already did: choose between a squared or rounded image.
• In Image settings, you can enter Alternative Text, which will describe the image when read by a screen-reader and may confer some SEO benefit if you add some keywords.
• You can choose from some of the existing sizes for this image by using the dropdown, or specify exact dimensions or percentages of the original image size that you want to apply for this image.
  
  It is best, as much as possible, to use the exact image size. Images load much slower if they need to be resized down in your browser.
  
  For instance, if you want to use a 300px Medium Sized Image here, choose the Medium size. Don’t select full size and then specify 300px or 25% in the settings here, which will size that large image down.
• Advanced will let you add a title attribute. Doing so is optional, but may show up as a tooltip when someone hovers over the image on the front end of your website.
• Additional CSS classes: again, this is for styling. You’ll notice that the class is-style-rounded got automatically added here when we chose a rounded style for our image.

Here’s a short video of the image block in use.

Note that it’s not narrated — your sound is working just fine!

WordPress 5.5 Update

WordPress 5.5 added some features to the image block. Now you can do some editing right from the top bar of the block including zooming in, setting the image orientation and rotation and cropping. See the video below for a quick demo.

Cheryl

https://www.caffeinejournal.com

Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.