Image Block

The image block allows you to add an image to your content.

Jun 2020 4 minutes

To watch the video, login or sign up for FREE

Image Block video screenshot

Transcript

Image Block.

The image block allows you to add an image to your content.

After inserting the image block, you can click on the “Upload” button to upload an image to your media library, or click the “Media Library” button to show your media library and select an existing file that you’ve uploaded previously.

Alternatively, you can click the “Insert from URL” button, enter the URL of the image you would like to display if it’s on another website.

You can even drag and drop your image onto the image block and it would be automatically uploaded to the media library and inserted into the block.

I’m going to choose media library, here. Now, if you have already uploaded it, you can grab the link of the the image, here.

You can add a caption, add some alternative text, which I always highly recommend for accessibility and an optional caption, or description, here.

So that’s now inserted into my content.

Now you also have the same options or similar options along the toolbar at the top and in the Settings sidebar.

So here again, you can add your alternative text here to describe what’s going on in the image and you can choose to “Link To” the file which is the same URL here, the attachment page or use a custom URL. If you want to send people somewhere else and this would enable them to open that link in a new tab, presumably, if it’s to another website.

You can also style or image, it depending on the version of WordPress that you have and by default you would have a square image. Sometimes you have the option in here to, make it a circle image by selecting the “circle mask” style. And if you select a style in the default, default style dropdown list, any further image blocks you add in your page will use that style as well.

If you want to change the size of your image, there is a number of ways to do that as well. You can use the width and height fields to set the exact pixel width of your image. Or you can use percentage buttons underneath, like so. Alternatively, you can select the size from the image size dropdown.

The default WordPress image sizes are available from this list. Depending on your theme, it might have other sizes available in this option as well.

You can also change the size of the image using these drag handles on the image itself within the block. You just hover your cursor and it’ll change icon and you can click and drag that as well. When resizing your images, it’s recommended that you resize down an image, rather than up, so it doesn’t go all pixely, and it’ll keep it nice and crisp for you.

You can choose to add a caption to your image here and you can style that as you wish. You can also align your image in this content block also, and you can edit your image.

Again, it takes you back to this screen and you can delve deeper by going to “Edit image” and crop that image if it’s not how you wish to display. So we’ll just have a look on that now. That’s how it’s displaying on our theme.

Tags:

Register now for free

OctoPress gives you the knowledge and insights to manage your WordPress website.

Sign up today!