Text won’t flow around image

  • Resolved todindiana

    (@todindiana)


    5 years, 6 months ago

    This is a continuation of a ticket that I marked “resolved.”

    The problem is not the margin but that the text doesn’t flow around the right side of the image. I have gone into the classic visual editor, selected the image, and clicked the icon that shows the image to the left with text on the right. Here is the code copied from the text editor (please note that the code extends to the right of the window – you need to scroll to view it all.):

    <figure><img class="alignleft" style="margin: -.5em .5em .5em -.1em; padding: .5em .5em .5em .5em; border: solid #910000;" src="https://scruffydog.org/wp-content/uploads/2020/11/beer.jpeg" alt="Beer Sign" width="200px" />
<figcaption>Beer Sign</figcaption>
</figure>

    You can see that the first statement is “alignleft”. That is supposed to force text into the empty space on the right of the image.

    Everything else works great: border, colors, caption placement, etc. There’s something that I’m not seeing.

    Thanks for any advice!

    Tod

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • George Appiah

    (@gappiah)

    5 years, 6 months ago

    You can see that the first statement is “alignleft”. That is supposed to force text into the empty space on the right of the image.

    This is just a class name, one of many default classes WordPress creates. But WordPress doesn’t style these classes… that’s the territory of themes.

    So, in spite if the name, the alignleft class doesn’t do anything unless your theme specifically adds the necessary CSS code to style it. And it appears your theme is lacking in this respect.

    (Using phone now and can’t test any code. Let’s hope someone else will chime in with the necessary CSS code you need)

    Thread Starter todindiana

    (@todindiana)

    5 years, 6 months ago

    @gappiah – Thanks for taking a look.

    Here is the code from another post in the same blog where I added the image from the classic visual editor. This snippet contains the same basic elements as the one in question, just in different order. The class and variable “alignleft” are present.

    <a href="https://scruffydog.org/wp-content/uploads/2020/01/IMG_1387-e1580170945278.jpg"><img class="alignleft size-full wp-image-2122" src="https://scruffydog.org/wp-content/uploads/2020/01/IMG_1387-e1580170945278.jpg" alt="" width="350" height="267" /></a>

    George Appiah

    (@gappiah)

    5 years, 6 months ago

    Hello,

    I’m finally able to take a look a this from a computer.

    The class alignleft is properly styled in your theme’s CSS. 

    .alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

    But in the first case where the alignment isn’t working (I believe this is from the Gutenberg editor), the img tag is inside a figure tag. So the img tag only is floated to the left of the figure container, which isn’t going to help much.

    What you need to do is float the entire figure container, so the sibling container (the paragraph tag) can wrap around it. Using figure {float:left;} works, but this will make ALL figure tags in your site aligned to the left.

    What we need is a way to add the alignment classes (alignleft, alignright, etc) to the figure tag. If you use the alignment option in Gutenberg (pictured below), WordPress will automatically add the appropriate alignment class to the figure tag, and this shouldn’t be a problem.

    So, have you applied the alignment option to the image?

    Note that switching back and forth between different editors may strip off HTML code added by one or more of the editors. So even if you previously set the alignment in Gutenberg, I’ll advise you do so again.

    Here is the code from another post in the same blog where I added the image from the classic visual editor. This snippet contains the same basic elements as the one in question, just in different order. The class and variable “alignleft” are present.

    In this case, the img tag stands on its own… it’s not inside a figure container. That’s why the float/alignment works.

    Thread Starter todindiana

    (@todindiana)

    5 years, 6 months ago

    @gappiah Welcome back! And thank you 1000x for taking the time to analyze and work up possible solutions. This is amazing help.

    First, the good news: I added figure {float:left;} to the theme by going to Dashboard > Appearance > Customize > Additional CSS and adding that. That solution works great. I acknowledge that it will affect all figure tags, which doesn’t really matter. It can be overridden in individual cases in the post’s editor if necessary.

    A note regarding the figure tag, I’m still in the dark ages using the classic visual editor and until recently, hadn’t even heard of the figure tag. I discovered it as I was testing an iOS notebook app called iAwriter where an image can be entered in a note and published directly to a wp.org blog. The html produced includes figure. In contrast, most posts that I have composed using Classic where I have added imaged directly don’t seem to enclose the image code with figure. Of course, in those posts I’ve had to click on the float left icon to accomplish this.

    Now with iAwriter, after I’ve added an image, I can put my cursor within the code and type “shimage” and the iOS text replacement feature will add img style: width="200px" class="alignleft" style="margin: -.5em .5em .5em -.1em; padding: .5em .5em .5em .5em; border: solid #910000; " to the entry, which adds the added style to the image. Once the post draft is finished, I can preview it, the publish it to my site. Fixing the text flow was my last hurdle.

    So, my friend, my hat’s off to you for fantastic assistance. I’m marking this “Resolved” but you can follow up with further comments if you like.

    Stay healthy and safe!

    Tod

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Text won’t flow around image’ is closed to new replies.

Tags