Working with WordPress Image block: How to add images in WordPress

Author: Categories: WP Tutorials
Updated: August 7, 2019
Working with WordPress Image block: How to add images in WordPress

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.

  1. Why to use the WordPress Image block
  2. How to add image with WordPress Image block
  3. Additional formatting images process
  4. 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.

Why is WordPress Image block must-have for your website

Attract attention

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.

Example of 2 blogs with or without images

Example of 2 blogs with or without images

 

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.

Infographic example

Infographic for better text explanation

 

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.

How to add images in WordPress block editor

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

Add image block by clicking on “+”

Adding WordPress image block by clicking on “+”

– Using slash “/“ and writing word “image” afterwards

Add image block using slash

Adding image block using slash “/”

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
Options to upload images

Available options for upload images – one of them is drag & drop image from folder

 

Image alignment

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.

Image alignment settings

Image alignment options

Resizing images

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.

Image resizing

Smooth image resizing by catching its handles

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.

Available image size settings

Image size settings

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.

Other Image block settings

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
Image link settings

Available image link settings

 

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.

Image details for SEO purposes

Image details you should fill to improve your website SEO

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.

Extra Tips

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.

Image caption

Caption written directly under the image

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.

Adding image caption in Media library

Image caption added via Media library

 

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.

Learn about Citadela

 

Comments (4)

  1. fab

    in fact there is no real change before/after the gutemberg editor. All those options were already in place. and the truth is that gutemberg editor is a complete desaster, this is why elementor, divi, and visual composer are so populars. I truely hope that your next release will be 100% compatible with those builder, because nobody is using the wordpress editor 😀

    1. Zlatko

      Hello,

      thanks for commenting. Yeah, the template will be compatible with all WordPress plugins written according to the WordPress Codex and Standards.

      Cheers!
      Zlatko

    1. Zlatko

      Hello there,

      thanks for asking. It is our core business to each of our products keep up-to-date on regular basis.
      If you are interesting about the option to upgrade from City Guide to Citadela theme that will be fully compatible with wordpress gutenberg editor the answer is: yes, we are intended to release the plugin thanks to which you’ll be able to manage migration from City Guide theme to Citadela theme extended with Citadela directory plugin (the 1st plugin should be released soon).

      Sincerely!
      AIT team

Leave a Reply

Your email address will not be published. Required fields are marked *

Your comments help us to improve our products and services so we keep recording them. We use the comment also for future reference. For further details please see our privacy policy

Pre-sale Questions