WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Beginners Guide» How to Add and Align Images in WordPress Block Editor (Gutenberg)

How to Add and Align Images in WordPress Block Editor (Gutenberg)

Last updated on January 2nd, 2020 by Editorial Staff
311 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add and Align Images in WordPress Block Editor (Gutenberg)

Images bring life to your WordPress posts and pages by making them more engaging. However, many beginners struggle with aligning images just the way they like.

The new WordPress block editor (Gutenberg) solves this problem by making it easier to add and align images in WordPress.

In this article, we will show you how you can easily add and align images in the WordPress to create beautiful content layouts.

Adding and properly aligning images in WordPress

Image Alignment in WordPress Editor

Previously, WordPress used a text area with editing buttons as its default editor. One particular issue in the old editor was image alignment.

Even though there were options to align images left, right, or center, they didn’t always look good. Sometimes images didn’t align, were not the exact size, or just looked odd.

WordPress 5.0 introduced a new WordPress post editor called the Gutenberg block editor. It fixed several problems with the old editor including the image alignment issues.

Let’s take a look at how you can easily add and align images in the new editor to create beautiful layouts for your posts and pages.

Add and Align Images in WordPress

The new editor comes with the following blocks that you can use to add images into your WordPress posts and pages.

  • Image
  • Inline Image
  • Gallery
  • Media & Text
  • Cover

Let’s start with a simple image block first.

Click on the ‘Add new block’ button or type /image in the post editor to insert an image block.

Adding a new image block in WordPress post editor

You will see three buttons inside the blank image block.

You can upload an image from your computer, select an already uploaded image from the media library, or insert an image by providing the image file URL.

Next, click on the ‘Upload’ button and then select the image you want to upload from your computer.

As soon as you select the image, WordPress will upload it to your media library and insert it into the image block.

Image options in WordPress post editor

Now, you will notice a toolbar on top of your image and some image block settings in the right column. To align your image, you’ll be using the toolbar that appears on top of the image.

Image alignment buttons in WordPress post editor

The image block gives you the following image alignment options as buttons in the toolbar.

  • Align left
  • Align Center
  • Align Right
  • Wide Width
  • Full Width

If your image is smaller in width, then aligning it to the left or right will bring up text next to the image. Aligning it to the center will display the image on its own row with no text on either side.

Center align an image in WordPress

Choosing the wide width option will make your image wider than the text area, and the full-width option will push it to the right and left edges of the browser screen.

Making an image full-width in WordPress

How to Perfectly Align an Image Next to Text

A lot of times you may need to perfectly align an image next to some text. WordPress block editor makes this easy by adding the Media & Text block.

This block basically adds a two-column area. One column for images (media) and the second column for text content.

Media and text block in WordPress post editor

Simply upload your image and then add the text you want to display next to it.

Image and text block settings

After adding the image and text, you will notice more options for the block. You can make the whole block wider or full-width, you can also switch the image and text sides.

The image’s alignment will automatically adjust to the height of the text in the next column.

Image size adjusts to align vertically

How to Align Gallery Images in WordPress

WordPress post editor also comes with a block to add image galleries. This allows you to easily display images in a grid of rows and columns.

The Gallery block comes with similar alignment options in the toolbar.

You can make the entire gallery block align to the left, center, or right. You can also make it wide or change it to a full-width row.

Align gallery images in WordPress post editor

The default gallery feature in WordPress is quite good. However, if you regularly add photo galleries to your WordPress posts and pages, then consider using a photo gallery plugin like Envira Gallery.

These plugins will give you more options to align images in your photo galleries, display them in the popup, and style them differently.

How to Add Two Images Side by Side in WordPress

The easiest way to display two images side by side in a WordPress post is by adding both images in a Gallery block.

Display two images side by side in WordPress posts and pages

Simply select a 2-column layout for the gallery block to display both images next to each other. You can also check the ‘crop thumbnail’ option to make sure that both images are of the same size.

More Ways to Add and Align Images in WordPress

Apart from the image, media and text, and the gallery block, you can also use the Cover block to add a cover image.

In modern web design, cover images are used to create highly engaging content layouts. These images are used for highlighting different sections of a page.

The cover image block comes with the same alignment options as an image block. You can add text over the image and choose an overlay color from the block settings. The best part is that you can check the ‘Fixed Background’ option which creates a parallax background effect.

Adding cover image in WordPress post

To learn more about using cover images, check out our article on the difference between featured images and cover image in WordPress.

So far we have talked about adding images directly to your posts and pages. What about images from third-party sites?

The block editor makes this easy as well. It comes with embed blocks for popular social sharing sites including Instagram, Flickr, Imgur, Photobucket, and more.

For example, if you want to add an Instagram photo, then simply add the Instagram block to the post editor and enter the URL of the post you wanted to share.

Adding Instagram images in WordPress posts and pages

WordPress will automatically fetch the Instagram post and embed it for you. After that, you will be able to use the alignment options in the toolbar.

Instagram embed in WordPress

Embed blocks also allow you to easily embed videos in WordPress. After that, you can use the same options in the toolbar to align videos in WordPress.

We hope this article helped you learn how to easily add and align images in the WordPress block editor. You may also want to see our guide on how to optimize images to speed up WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

311 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

55 Comments

Leave a Reply
  1. Sharon says:
    Jan 19, 2021 at 10:33 pm

    I’m wanting to change the default for uploading an image to be centred every time. To change each image I upload to centre each time I add an image is so time consuming. Can I change the default to centre?

    Reply
    • WPBeginner Support says:
      Jan 20, 2021 at 10:37 am

      There is not a simple method we would recommend for beginners at the moment but we will keep an eye out for something we would recommend.

      Reply
  2. Amanda A. says:
    Oct 18, 2020 at 6:47 pm

    I am trying to use the Block Editor to display two images side by side. I used the two column feature then image blocks in each column. While designing, it displays correctly, but when I “preview in new tab”, the side by side columns are gone and the images are stacked. What am I doing wrong? Is this a common issue? How can I fix this?

    Reply
    • WPBeginner Support says:
      Oct 19, 2020 at 10:50 am

      You may want to ensure the images aren’t too large for them to be side by side in your specific theme for the most common reason for that issue.

      Reply
  3. Sheryl Zeiset says:
    Oct 12, 2020 at 4:16 am

    I’m trying to learn how to use the new block editor. When I click on the Add block button and choose image to add a photo, I only get the ‘insert from URL’ option and I can’t find a way to add photos from my Media Library. Can you help?

    Reply
    • WPBeginner Support says:
      Oct 12, 2020 at 11:40 am

      You would want to check closely to find the text next to the upload button for selecting the image from your media library

      Reply
  4. Luther Mckinnon says:
    Oct 2, 2020 at 7:26 am

    I have been publishing a blog for many years. I have learned to dread the introduction of a new system. Doing a simple thing like adding photographs is now very difficult.

    Reply
    • WPBeginner Support says:
      Oct 2, 2020 at 9:59 am

      Hopefully, once you are comfortable with the new system it becomes easier for you :)

      Reply
  5. Ward says:
    Aug 5, 2020 at 10:08 am

    Great information, problem is that back end it works but front end it always aligns to the left. Would it be possible that this has something to do with my Elementor template?

    Reply
    • WPBeginner Support says:
      Aug 6, 2020 at 10:25 am

      If you are using a page builder there is a chance that your page builder is overriding the styling and you can reach out to your builder’s support for assistance.

      Reply
  6. tanmay says:
    Jul 26, 2020 at 10:43 pm

    absolutely amazing feature its not every cup of tea to use HTML editor

    Reply
    • WPBeginner Support says:
      Jul 27, 2020 at 3:13 pm

      Glad you like the block editor feature :)

      Reply
  7. Louie Adem says:
    Jun 29, 2020 at 6:16 pm

    just started WordPress yesterday. Totally a beginner and so happy wpbeginner provided me the “trainer wheels” to jumpstart. The education in this website is so valuable. Can’t thank you enough.

    Reply
    • WPBeginner Support says:
      Jun 30, 2020 at 11:53 am

      Glad we could help get you started :)

      Reply
  8. BadlyDrawmWolf says:
    Jun 7, 2020 at 5:08 am

    Thank you for this little gold nugget – really struggling getting in to the “new” way of handling my blog and almost giving up and searching for other alternatives…. :)

    Reply
    • WPBeginner Support says:
      Jun 9, 2020 at 8:38 am

      Glad our article could help, for another helpful article you may want to take a look at our article below:
      https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/

      Reply
  9. Karen says:
    Jun 4, 2020 at 9:50 pm

    You mention “Inline Image”, but I don’t see any such block. Your article was written awhile ago but supposedly updated in Jan. 2020 – did that block go away and you forgot to remove it from this article? Or a better question: How can I add an inline image within another block like Paragraph or Heading?

    Reply
    • WPBeginner Support says:
      Jun 5, 2020 at 9:01 am

      The inline image block is not currently available but you can normally recreate the formatting with the text and image or the standard image block

      Reply
  10. Ted Strutz says:
    May 24, 2020 at 9:01 pm

    When I add an image from my media the image toolbar does not come up to align left or right. I can change size of image.

    Reply
    • WPBeginner Support says:
      May 27, 2020 at 8:49 am

      You would want to ensure you have not set it to be at the top of the page instead of how we have it at the moment.

      Reply
  11. Hannah says:
    May 24, 2020 at 4:35 pm

    Hello, I have aligned all images using the block editor and everything looks fine until I preview?

    Then some images have become far bigger than the others, I have a gallery of two images suddenly sitting on top of a single image. Everything has moved around randomly!

    Even when I published it, it was still all wrong. I would love your help, thank you!

    Reply
    • WPBeginner Support says:
      May 27, 2020 at 8:44 am

      You would want to reach out to your theme’s support to ensure there isn’t a styling conflict, otherwise, you could try disabling your plugins to see if this is a plugin conflict as well.

      Reply
  12. Harry says:
    May 20, 2020 at 7:19 am

    Hi, I’m looking to align shortcodes next to one another like you describe with the images is this possible? Many Thanks

    Reply
    • WPBeginner Support says:
      May 20, 2020 at 9:12 am

      That would depend on the shortcodes themselves

      Reply
  13. Ap says:
    May 16, 2020 at 11:15 am

    Hello,
    How do you arrange the positioning of the title for the cover blocks?

    You have that option in your bar, but for some reason, when I click on cover block, there is no text alignment option.

    Any ideas on this?

    Thank you for the great article.

    Reply
    • WPBeginner Support says:
      May 19, 2020 at 8:43 am

      You would want to check the top of your page as that would be the other location the alignment options would be rather than floating over the element

      Reply
  14. Cheryl says:
    May 14, 2020 at 8:56 am

    How do you make an image clickable with a clickable link? I’ve been looking for tutorials and they all seemed based on a prior Gutenberg block which since has changed an the tutorials no longer match the block.

    Reply
    • WPBeginner Support says:
      May 14, 2020 at 9:27 am

      You would want to check the top toolbar for the current location for where to add a link to an image

      Reply
  15. Alejandro says:
    May 7, 2020 at 2:39 pm

    Hello, Is it possible to write an image caption right below the image when using the “Media & Text block”?

    Reply
    • WPBeginner Support says:
      May 8, 2020 at 9:57 am

      It would depend on your specific theme for the styling but you should be able to

      Reply
  16. Lancer Kind says:
    Dec 25, 2019 at 1:53 pm

    Nice! Thank you so much!

    Reply
    • WPBeginner Support says:
      Dec 26, 2019 at 10:44 am

      You’re welcome :)

      Reply
  17. Pete Newman says:
    Aug 14, 2019 at 10:44 pm

    There is an existing issue of incompatability between Gutenberg and themes. Do you have a list of themes that are compatable with Gutenberg (and that allow full functionality of Gutenberg)?
    Thanks and regards,
    Pete.

    Reply
    • WPBeginner Support says:
      Aug 15, 2019 at 9:37 am

      There should be fewer issues with that as themes are updated but for specifically Gutenberg friendly themes you could take a look at our list here: https://www.wpbeginner.com/showcase/gutenberg-friendly-wordpress-themes/

      Reply
  18. Pete Newman says:
    Aug 14, 2019 at 7:43 am

    I have been using wordpress for years but have been a bit absent lately. Gutenberg is a headspin. I follow these instructions but simply cannot align images in an image/text block. When I go to preview the image is aligned extreme hard left of the page with no margin at all. Any solutuions on offer?
    Thanks!!

    Reply
    • WPBeginner Support says:
      Aug 14, 2019 at 10:56 am

      If the settings are being ignored you may need to check with your theme’s support to ensure it’s not overriding your styling. If you wanted to try reverting to the classic editor we have our guide here: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/

      Reply
      • Pete Newman says:
        Aug 14, 2019 at 10:40 pm

        Thank you! Excellent support. I added the classic editor plugin and the disable Gutenberg plugin and was able to create an approximation of what I want. Looking forward to Gutenburg functioning as intended and developers catching up – it is a great idea.

        Reply
        • WPBeginner Support says:
          Aug 15, 2019 at 9:37 am

          Glad we could help :)

  19. Jimmie says:
    Aug 3, 2019 at 3:28 pm

    But you can’t link images in a gallery? That makes the gallery function less attractive

    Reply
    • WPBeginner Support says:
      Aug 5, 2019 at 11:11 am

      If each image needs its own link then setting up columns would likely be what you’re looking to do :)

      Reply
  20. Roxana Snedeker says:
    Jun 24, 2019 at 1:11 pm

    What is the best way to add multiple images at once, I can’t seem to add more than one at the time :(

    Reply
    • WPBeginner Support says:
      Jun 25, 2019 at 11:48 am

      If you want to add multiple images in the same area, you would want to take a look at the gallery block to add multiple images in one section

      Reply
  21. Aaranja says:
    Apr 25, 2019 at 8:05 am

    How to add an image directly in the “Code Editor”, without passing by “Visual Editor”?

    Reply
    • WPBeginner Support says:
      Apr 25, 2019 at 10:46 am

      You could disable the visual editor under Users>Your Profile but that would prevent you from using the visual editor for other sections.

      Reply
  22. Alice says:
    Apr 18, 2019 at 4:20 am

    I’m centering all of my images correctly in the editor, but they are all showing up as left-aligned in preview and live posts no matter what. Do you know what might be causing this? It’s driving me so crazy!

    Reply
    • WPBeginner Support says:
      Apr 18, 2019 at 11:56 am

      Your theme may be overriding the styling you are setting. If you reach out to your theme’s support they should be able to assist.

      Reply
  23. Anne says:
    Apr 15, 2019 at 4:03 pm

    I would like to have an image next to a file (pdf) – all on the same line. Can I do that in one block, or would I need to create two? Thank you!

    Reply
    • WPBeginner Support says:
      Apr 16, 2019 at 11:03 am

      You would want to add the column block to split the content and allow you to display the content like that.

      Reply
  24. Suzy Algar says:
    Apr 14, 2019 at 9:47 am

    I am having creating captions for images and downloads that appear in my files. I don’t know where to go once I have the image in my files.

    Reply
    • WPBeginner Support says:
      Apr 15, 2019 at 12:48 pm

      If you’re trying to add the image to a post or page you would normally add an image block and then select the file you want to use in the block

      Reply
  25. Roxana Safipour says:
    Apr 8, 2019 at 6:17 pm

    So now how do you do “no alignment”, where the image is on the left and has no text wrapping around it? This used to be easy with the no alignment option, which is now gone. Please bring this back! I am going crazy trying to figure out how to get my image on the left (not centered) and with no text next to it, but the text keeps wrapping around it automatically!

    Reply
    • WPBeginner Support says:
      Apr 9, 2019 at 11:45 am

      For what it sounds like you’re wanting, if you don’t specifically set the alignment for an image, the image should set itself that way.

      Reply
      • Ben says:
        Sep 12, 2019 at 8:34 am

        Just a quick followup on this, as it was annoying me as well. There’s a simple answer but it’s sort of not that obvious as I was looking for a setting – just press the selected alignment button again to turn off the alignment and revert to the default no alignment.

        Reply
  26. Jesse says:
    Mar 22, 2019 at 12:24 pm

    Great post very useful.I have ugrade to wordpres 5.1 but now have problem with linking image to url. Can you help me?

    Reply
    • WPBeginner Support says:
      Mar 25, 2019 at 2:10 pm

      If you’re using the block editor, in the image block’s settings there should be a Link Settings section for you to set where an image links to.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
InMotion Hosting
InMotion Hosting Coupon
Get an exclusive 50% off InMotion hosting plus a free domain.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.