For many users working with image can be really frustrating. It’s not always easy to choose the right aspect ratio or to resize image correctly to look good in the whole layout.
- Why to use the WordPress Image block
- How to add image with WordPress Image block
- Additional formatting images process
- Extra tip from us inside the article
Older WordPress versions (up till v5.0) add images using +Add Media button. Problem was that even with minimal change to image size you would need to upload it again. It means waste of time and redundant clicks.
New Block-based editor Gutenberg changes the way how to add images into WordPress to make this process simpler for end users. In this article we will show you practical guide about adding and editing WordPress image block. But first let’s talk about why you should use images in posts and pages.
Images attract the attention of website visitors. They must be interesting to keep visitors on your website longer. Think about a blog post without images. It’s only a bunch of text. On the first sight it is not very interesting even though it could be valuable and full of information. Furthermore photos can help imagine and describe your topic better.
For that reason we need to use WordPress Image block to focus attention on important stuff.
Illustrative text and context
Images are also an essential part for understanding content because they allow visitors better understand what is article about. Thanks to infographics you can explain complicated connections and tell things simple way. It helps visitors better orient themselves in problem that you talk about.
Make website nicer
Besides, images nicely put finishing touches to the whole website design. It’s not all about website layout, but also usability. Correctly chosen and placed image can help visitor to browse your website easier.
To insert an image into Post or Page you need to add Core block – Image block. There are several ways to do it:
– Using “+” in the top bar or anywhere in the editor
– Using slash “/“ and writing word “image” afterwards
New block will be created where you can add actual images.
How to put images there where you want?
- Use Upload, and select an image from your hard drive
- Use Media Library, where you can select images there were already uploaded to your website
- Use mouse and drag & drop image
- Insert image URL address
Image alignment is one of the main features. No matter if you add WordPress Image block into Post or Page you should always consider placement depending on website design. Based on that image alignment can be chosen in toolbar above it. By default you can align image left, right or center it. Some WordPress themes allow images to be centered as wide or full width. It really depends on theme features as not all themes support it.
Revolutionary feature of Image block in WordPress editor is practical resizement. Simply drag side of the image to make it smaller or bigger. That way you can tweak image size depending on text in the content. Editor automatically keeps image proportions that means you do not have to worry about deformations.
To configure the exact dimensions you can use the Inspector on the right hand sidebar in the editor. Image size settings offers ready to use formats such as thumbnail, medium, large or full size. You can set the width and height in pixels or percentages of course.
It’s very fast and practical because you can do all image resizing changes right inside WordPress Image block and everything in one place in block editor.
How to add URL address
Images can be used as static images or they can be also clickable and link to:
- Media File
- Attachment Page
- Custom URL
How to edit picture in WordPress Image block
Every image can be edited after clicking on the pencil icon. Modal window with Media Library will be open where you can write alt text, title, caption and description. The same way as you’re already used to do it in older WordPress version with classic editor.
Why is it important to have these texts filled in?
If visitors click on the image to see it bigger, they see image Title (for example Citadela homepage) and not image filename. Also, if there’s any issue with loading the image, alternative text will be shown on your website.
Besides all of these reasons and settings for WordPress Image block there is the most important thing. You could gain more visitors to your website using images. So how to get them?
Nowadays people are lazy to read. They prefer to scroll down the pictures to find answers. How come your photos and images can rank? Texts is the answer. Very important for SEO optimization is the perfect image title and description. Do not forget to fill in Alternative text. Then Google can better understand the image. So you would have a higher chance to rank it in the image search results.
2 ways how to add image caption
Adding image caption is using block editor very easy. Right under the image there is a space to write text. This is the first way – Caption is written to this exact image on given subpage.
Second way is to write image caption using pencil icon (Edit image) within Media Library. This way you’re adding image caption globally throughout the whole website. That means if you use the same image on three different places, it’ll always use this caption.
Do you like how easy is it to add images in WordPress block editor? Read more about our brand new Citadela WordPress theme. It is specially designed and developed for WordPress Block Editor.