Working with WordPress Image block: How to add images in WordPress [+Secret tip]

Working with WordPress Image block: How to add images in WordPress [+Secret tip]

For many users working with image can be really frustrating. It’s not always easy to choose the right aspect ratio or to resize images correctly to look good in the whole layout.

  1. Why to use the WordPress Image block
  2. How to add images 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. In addition, we will explain one more option of pasting images – how to copy and paste an image to the content area with just a few clicks. We will also introduce you newly added features that come from WP 5.3.

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.

Uploading images to WordPress

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

Less known method of adding WordPress images

Besides uploading images through the upload window as mentioned earlier, there’s another way to insert image (and it’s such a quick way!). With improved WordPress editor, you are able to:

  • Copy image from any content, or
  • Just “drag” the image with a mouse cursor

And then insert or move (drop) the selected image to the location in content area that you want.

Drag and drop image from published post to content area
Drag the selected image and drop it where you need to (directly to WordPress editor)

The same technique you can use also in case, you want to paste an image captured from your screen. Only three simple steps are needed. First, you need to take a screenshot using the print screen feature. For example Windows 10 provides its default Snippet tool called Snip & Sketch, which is also available via a shortcut – just press Win+Shift+S keys together on your keyboard. Then select the image area you want to capture. The last step is to paste the copied image (or part of it) into the content area using the basic shortcut Ctrl+V.

And what happen to WordPress image that you’ve pasted into your editor? Well, it is automatically added to the Media Library where you can edit this image.

Image metadata limited options

Within image editing you can set its Title, caption, description and alternative text. Unfortunately, you cannot change image filename – it will keep its auto-generated name, such as image-1.png and so on. This type of filename can be a little disadvantage in terms of SEO optimization due to conflict with file naming recommendations. Therefore, you need to consider this aspect before moving WordPress images to the content area.

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

New block style that transforms an image into a circle shape

If you’re using the latest available version of WordPress you may have noticed a new circle-crop style that you can use for your image. Shape of the image can be changed through top toolbar by clicking on the first “Change block type or style” icon. The default (rectangle) shape will be cut to a circle shape.

Circle shape of image
The new circle style design for your images

New features in WordPress Images block (added in WP 5.3)

Support for high resolution images

One of the biggest highlight of WP 5.3 is improved image processing on WordPress platform. Working with images has now two main features:

  1. Resuming upload – If you’re uploading high resolution photos and internet connection fails, the upload process will continue automatically from interrupted point
  2. Automatic image rotation – the latest released WP version ensures that incorrectly rotated images automatically rotate to the correct position as they are uploaded

Settings in Inspector

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 Images block and everything in one place in block editor.

Other Images 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 Images blocks 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 to add images in WordPress Image block? Try it by yourself!

Find out more about our brand new Citadela WordPress theme and its custom made layout packs. They were specially designed and developed for different kind of businesses and they also support the new way of editing content through WordPress block editor.

7 thoughts on “Working with WordPress Image block: How to add images in WordPress [+Secret tip]

  1. 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. 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. 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

  2. I’ve noticed that it’s possible to Paste an image directly into the Gutenberg editor. This will result in an image added to the media library called image-1, image-2 etc…

    A feature i did not read on this page so maybe a nice one to add in.

    This is particularly useful when an image was screengrabbed using windows snippet tool (Win+shift+S). It can then be pasted directly into the article right where the cursor is set.

    The biggest downside to this method is that i haven’t found a way to edit the filename during or after pasting it in.. So it won’t be very SEO friendly.

  3. Hi
    I’m having trouble adding images the “Multi Author Blog” theme. It seems to be impossible to add a 2nd or 3rd image to the revolving slider at the top of each Blog post. This means that the slider is empty after a few seconds, as though it was expecting the 2nd image.
    Please could fix it?
    Alternatively: a question – “Multi Author Blog” is important for Archnetwork (we have a partner in Slovakia) because we use it as “Reporting” platform for participants in our Nature projects. Is there an alternative Theme in your library that we could use in the same way?
    Blair Urquhart (Lifetime subscription – IT Dept Archnetwork)

    1. Hello there,

      Thanks for writing in. Firstly, please check out your theme/plugin versions with the latest ones if you can: we recommend to use AIT Updater plugin for free -> https://www.ait-themes.club/wordpress-plugins/ait-updater/ , (or the documentation how to set up the plugin: https://www.ait-themes.club/doc/updater-plugin-documentation/
      Instructions regarding product activation you’ll find at: https://www.ait-themes.club/doc/theme-activation/

      If your issue still persists, please provide us of some images or please contact us via support forum with AIT SysInfo report: https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/. Our technicians are ready to help you with any theme-regarding issue: Customer Support is provided during working days from 8am to 5pm Central European Time as i was not able to replicate your issue. Revolution slider works correctly.

      Secondly,
      some interesting features are added to Citadela product pack, please have a look at the comparison table: https://www.ait-themes.club/next-generation-directorypro/

      If there is anything else we can assist you, please contact us back.

      Kind regards!
      Zlatko
      AIT team

Comments are closed.