How to get pictures with text to show up properly

  • I am editing a post and I am inserting three small pictures that are left-aligned and with text on the right side. Unfortunately, the text does not cover a sufficient number of lines to make the pictures go underneath each other, so in stead the show up leftaligned between each other under the text of the picture above, but not underneath the picture above, but besides it. Here is the post I am editing.

    I have tried different things to solve the problem: first i tried adding returns after the last line of the lowest line of text for each picture, and it looked ok untill i pressed publish and alle the “emtpy” lines disappeared. I also tried doing the same in the html editor. I also tried adding <p> before each picture and </p> after the last line of text in the html editor, but it didn’t change anything. Is there anybody out there with any ideas about how to do this without adding lines of text?

    I have been annoyed by WP not letting me add “empty” lines before while editing text, but this problem really makes it more or less impossible to use the built-in picture feature and still have a little control of how the result will show up. There should be some way to turn this automation off. (Even the automated “we know you can’t spell since you are using our text editor, and even if you choose another language than english, we won’t let you write “i”-s in lower case or write abbreviations without capitalization after the first punctuation”-type hell MS Word has a possibility to turn off all the automated nonsense. (Allthough it takes half an hour and that half hour is probably better spent downloading a better text editor and doing some writing.) Sorry for the bursting out in cries of fury, but I am just so fed up with all the automation assuming people don’t know what they want to write and how!)

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

  • This is more of a CSS issue than an issue with the visual editor.

    Simply add “clear:left;” to your .alignleft, img.alignleft style rule. 

    .alignleft, img.alignleft {
clear:left;
float:left;
margin:5px 10px 5px 0;
}

    That’s a good suggestion, however that will apply across multiple posts and pages, where the clear on the float may not be warranted.

    My suggestion would be to open your post/page back up, switch to HTML mode and wrap each of the image and text sections in a wrapper div element..

    Eg.

    <div>

image here

text here

</div>

<div>

next image here

text here

</div>

    That should have the desired effect without effecting other posts/pages.

    Thread Starter Corelli1700

    (@corelli1700)

    Thanks for the tips, guys! ?? I ended up with the CSS solution. I think I would usually want this type of behavior from the pictures, so it is probably easier than remembering to use the <div> </div> in every post with this problem.

    Thread Starter Corelli1700

    (@corelli1700)

    But then I looked again at the post and saw that the text still wasn’t aligned next to the picture it was supposed to belong to, even if the pictures now are where I want them, so I added the <div> and </div> anyway, and it seemed to do the trick.

    Thread Starter Corelli1700

    (@corelli1700)

    I also tried just with the <div>s without the CSS and then I got the text aligned where I wanted it, but not the pictures, so it seems I need both the clear.left and the <div> to make everything show up as I want. Thanks again!

    Thread Starter Corelli1700

    (@corelli1700)

    Actually, after deleting a line of the text, it still doesn’t show up just to the right of the pictures, even with the <div>s in place…

    You should ensure your theme contains the necessary classes for image alignment and such, these include those such as .alignleft, .alignright, and so on..

    You can find a list of the necessary WordPress classes (all theme’s should have these), here.
    https://codex.www.ads-software.com/CSS

    Without those your theme doesn’t know how to position images posted inside your posts and pages correctly.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to get pictures with text to show up properly’ is closed to new replies.