Dan Antion

Wrapping Images – Wrapping Up

The Editor when she read the part about this being the final post in this series.

This is the last post in my make-the-block-editor-less-frustrating series. I saved images for last for two reasons. One, I’ve been here before, and two, I had some things to learn. I am going to focus on putting images next to text. If you want to put an image in between paragraphs, that’s easy – add a Paragraph block. Write some text. Add an image block. Choose a photo. Add another Paragraph block. If you want to have an image next to your text, well, there are several ways.

If you search for “wrapping text around images in the block editor” one of the first results you will get will point you to the Media and Text block. That’s a thing. That doesn’t mean an Image block and a Paragraph block, it’s a composite block that handles media and text. It doesn’t have a lot of options. Basically, you plop an image into the media side and you paste your text in the other side. When you first put the text in, it kinda looks like, um, well, let’s just say you won’t be happy.

That’s ok, you can resize the text to get it to look good. You do that by changing the size of the text, either by choosing between small, medium, large and such, or by setting the point size. You can also set where the image should be anchored vertically, and you can set whether the image should appear on the left or the right of your text. You can skip through the slide show to see these steps.

  • Entering ‘ME’ in the search box will bring the Media and Text block into view.
  • Media and Text
  • Select your image.
  • Set the font to a size that best matches the rest of your post, or the look you want.
  • Align the image with your text.
  • Choose right or left for the media.
  • Voilà!

According to several sources, the easiest way to add an image to a block of text, such that the text wraps around the image, is to simply add an image block and a text block. I’m here to tell you that it does work, but it is the least intuitive operation in the Block Editor – By Far! Here’s how you do this. 1) You add an Image block. 2) You choose an image to put in that block. 3) You resize the image. 4) You choose the alignment (I like them on the right) that you want. 5) You add a Paragraph block beneath your resized and aligned image … and … poof, the Paragraph block will position itself alongside your image. Seriously, it really works. The slide show thingie below this paragraph includes a few screen shots of this process.

  • Add an Image block.
  • Choose the way you want to add your image.
  • Select your image
  • Scale your image (either left and right or up and down).
  • Choose the alignment for your image,
  • Once the Image block is set, add a Paragraph block.
  • The Paragraph block will position itself opposite of your image automatically.
  • Paste your text and you’re done.

There is a third option that you will think should be an easy way to handle this task. That’s the Inline Image option, which you can invoke while working in a Paragraph (and a few others) block. As the slide show indicates, this doesn’t give great results. I cannot figure out how not to have it end up looking like the last image in the show. I’ve looked this up in a few places, and I haven’t found a good answer. I want to believe that there’s a way to get the text to wrap around the image. If you know how to do this, please leave a comment explaining it. However, if you were able to get it to work, it would look like one of the two options above.

  • With your cursor where you want the image to appear, open the tool bar and choose “Inline image.”
  • Choose your image
  • And, not so voilà :(

There is at least one more way to get an image alongside your text – add a Column block to your post. Set it to be two columns wide and add an Image block to one side and a Paragraph block to the other. This is essentially what the Media and Text block does for you.

While this will be the last post in this series, this and the previous posts are available on the menu under the Block Editor option. As I have mentioned before, if you have specific questions about the Block Editor or other issues you’re having with WordPress, feel free to ask in a comment or send me an email. I am happy to help if I can.

There’s lots of cleanup work to be done at Great River Park.
This bird can’t hide yet, but pretty soon.
We had 2″ (5cm) of rain Thursday and Friday. My puddle was back on Saturday.
The trees are showing their spring.
The morning after a 2-day storm.
It was still very windy on Saturday after the storms.
Pretty blossoms might be the best part of spring.
Forsythia on the side of our yard. The dogwood is beginning to bud out as well.
The Editor likes these shrubs (Pieris japonica). I had a bad track record with their care.
Here you go River!
The woodpecker is working hard in our neighbor’s tree.
Green and growing.
The oak trees along Maddie’s path are starting to bud.
The middle tree (I think) is an apple tree.
I think Smokey has been hanging around with Arnold. He looks like he wants a peanut.
Maddie, surveying her yard.

58 comments

  2. Hi Dan – the ‘wrapping up’ good to see The Editor is happy! I prefer the images – but come from a different basic platform (blogger) … so won’t go there. The images were interesting – we’ve had cold Arctic winds … but beautiful sunny skies and need some rain! Still as you say Spring is a-coming … all the best – Hilary

    Liked by 2 people

    Reply

  4. I like Smokey’s two tone look. Oh, Dan, I thought you should know, they’re calling for snow on Wednesday. I told you we always get with the same weather you do eventually. They’re only calling for 1 to 3 cm (maybe an inch) So I’m not worried. I am a little annoyed. I need spring. We all need spring. To see your trees budding gives me hope.

    Liked by 1 person

    Reply

  6. The way I add in-line images is to write my text, click on the three little dots at the end of the formatting bar above the paragraph, and choose Insert Block Before. Then I add my image, resize it, and align it left or right. I don’t know how to get the text to wrap above it, but it’ll wrap below it, if the text is longer than the image is tall.

    Liked by 1 person

    Reply

  7. Smokey is just a fat little chunk of cuteness! Do they make diet peanuts? Great reflection photo. So nice to see spring has sprung in your area. Everything looks so nice. That woodpecker works steadier than most humans!

    Love seeing Maddie just hanging out happy to see her kingdom not buried under snow. Looks like bunny has found her forever home. Before long you’ll be seeing baby bunnies! So cute!
    Ginger

    Liked by 1 person

    Reply

    • We think that bunny is “with bunnies” – at least she seems to be eating for more than one. The Editor noticed that this Smokey has a brown belly. I think he’s showing off, but he is adorable. The woodpecker is hard at work. There must be a serious bunch of bugs in that dead branch.

      I hope you have a wonderful week, Ginger!

      Like

      Reply

  9. I’ve never tried this feature in the block editor. If nothing else using the block editor has narrowed how I present my content, because it’s too work-y to do otherwise. A small blessing, I suppose.

    Liked by 2 people

    Reply

  10. appreciate so much your posts on Block Editor posts. Apparently I paid the price for procrastination (procrastinating on learning about block editor) on my last Thursday doors post “Along a Country Street”. horrified to see that it published the photos without showing the captions, which I discovered you mentioned in one of your tutorials (and yes, I usually check with preview…) whatever made WordPress think this was a good idea? I figured this could be one of those times when I break the rule of “editing” a post; grit my teeth and move on…at least I caught this week’s TD post. appreciate your time and efforts, and animal/nature photos for some calming balance.

    Liked by 1 person

    Reply

  11. WP should have you on their payroll, Dan. Luckily, I don’t plan on taking up actual ‘writing’ any time soon–I’ll stick to a couple of lines and a photo–but if I did, having the Block Editor on your header is the way to go. Why do they make it so difficult??! That portrait of Smokey is so darn cute! Yeah, he’s been hangin’ with Arnold……

    Liked by 1 person

    Reply

  12. I use the resizing the image option and aligning the text, so it appears next to an image, Dan. However, I had no idea about the media and text block )which looks cool to me). I’ll try it out next time.
    Thanks for the tutorials.

    Liked by 1 person

    Reply

  13. Dan, Considering that I usually do my posts in the wee hours I usually don’t mess with the slightly fancier bells and whistles. You know the ‘if it aint’t broke don’t fix it’ school. Not that the explanation is not appreciated. Who knows someday I might feel compelled to experiment. Good luck with that Northeaster coming through. Hope you don’t get too much of the white stuff. Glad to hear you are easing up on the Editor.

    Liked by 1 person

    Reply

  16. Thanks, Dan. You’ve primed me for a little more frustration , I guess . I’ll do a little experimentation , though , and as a friend of mine says : what’s impossible to do just takes a little longer .

    Liked by 1 person

    Reply

  24. What, you’re not holding WordPress class every Monday? :-) Please know that all of us who are using the Editor thank you sincerely for taking the time to give such detailed instructions. I’d not only give you an A+ on training but also give you a bonus. Yes, I read Wednesday’s post before Monday’s because I was busy putting up my shed pegboard. :-)

    Like

    Reply

  26. Very helpful, Dan! Some of these tips I’ve already discovered, but it took some hunting. Others are new to me. Thanks for continuing to share your experiences and discoveries with the new editor.

    Liked by 1 person

    Reply

  27. Thanks a lot. One question remains: How do I determine the size of the image in the Media&Text block?
    The options from thumbnail to full size only effect the resolution of the image.
    Or do I have to use an image with the exact dimensions I need? If so, that’s somewhat antediluvian strategy, because resizability was part of HTML 2.0.

    Liked by 1 person

    Reply

    • You still should be able to resize the image by dragging the little blue handles. The aren’t where you expect them but there’s four. Top, bottom and both sides, in the center. Drag them and the image will resize proportionately.

      Liked by 1 person

      Reply

Add your thoughts or join the discussion. One relevant link is OK, more require moderation. Markdown is supported.

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.