Inline images

Inline images are inline. They’re not floated to make text wrap around them. That’s not what “inline” means, exactly.

If you want to make an image with text wrap around it, make a normal Image Block, then make the text in a Paragraph block below it. Then set the image to align left or right. The paragraph below will wrap up into it, and you can adjust the image’s size using the blue circles that appear on its edges.

I had the same problem and was forced to use the standard Image block. I’m just learning this, so maybe there’s a workaround for the issue I have: The problem with the Image block is that it includes the caption. If you don’t want a caption, you can leave it blank, but the space remains, throwing off your layout. I couldn’t find tags for the caption in the HTML view for the block; I thought I just might be able to delete that. I suppose there’s code that can be written to suppress that, but this should be easier. Suggestions?

Samuel,

The solution you offer works fine if you want the image to float to the top left or right of the paragraph. But what’s the solution for placing an image so that the text flows around 3 sides (eg., top, right, and bottom)? In the older WYSIWYG text editor, there was the option of placing media at the location of the cursor. If that’s a part of Guttenberg, I’m not seeing it.

The solution is as I stated above: The photo goes into its own block element and the alignment is set left or right for it. When the photo is resized smaller, the text flows around it. Otto is correct that “inline” is not the same as “text wrap.” With inline the photo sits on the baseline of the text into which it is inserted. With Gutenberg, a photo is in its own container, which is aligned left or right to create a wrap. It is not “inline.” BTW, I’ve learned since my first post that the caption, if left blank, is not a problem.

• This reply was modified 5 years, 10 months ago by nacinla.
• This reply was modified 5 years, 10 months ago by nacinla.
• This reply was modified 5 years, 10 months ago by nacinla.
• This reply was modified 5 years, 10 months ago by nacinla.

Thanks, but @revdrewhart is correct. This solution WILL NOT result with text above, beside and below image in the block. Text will be only on the side and below. If there are any suggestions, besides reverting to classic, that would be great.

Is there any way to have an image not align with the beginning of a paragraph? What if I want the first two lines of the paragraph to go full-width and then have the image align? I hate losing control and having to unlearn html to learn something I will never need anywhere else so much more than I can begin to explain.

I have a big issue also with floating an image in it’s own block, not inline, where the paragraphs after it don’t wrap. I have a tall image that now has a bunch of white space next to it instead of the paragraphs wrapping to the left of it…

https://curesearch.org/Immunotherapy-in-Children

Another problem is that the margins for .wp-block-image are still there, applied to a div with zero height but above the paragraph. So the paragraph is pushed down by a margin that shouldn’t be there, and no longer top-aligns with the image. See this screenshot of Firefox’s Inspect Element looking at that collapsed div: https://imgur.com/a/13875Ue The yellow area is the margin-bottom, which pushes down the paragraph. That margin should not be above the paragraph, but instead be applied to the image itself, to create appropriate space before the next block – notice the heading too close right under the photo.

I just discovered another problem, for which I added a second image to the same Imgur (https://imgur.com/a/13875Ue). You can’t put a heading next to an image!

At least in my theme (Astra, one of the most popular themes to go with Gutenberg, so others probably act similarly), headings contain clear:both. That is reasonably logical for handling a heading after a short wrapping paragraph. But if you want a heading+paragraph combo to sit next to an image, it isn’t possible.