WordPress.org

Ready to get started?Download WordPress

Forums

How to get pictures with text to show up properly (8 posts)

  1. Corelli1700
    Member
    Posted 4 years ago #

    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!)

  2. Jackson
    Member
    Posted 4 years ago #

    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;
    }
  3. Mark / t31os
    Moderator
    Posted 4 years ago #

    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.

  4. Corelli1700
    Member
    Posted 4 years ago #

    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.

  5. Corelli1700
    Member
    Posted 4 years ago #

    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.

  6. Corelli1700
    Member
    Posted 4 years ago #

    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!

  7. Corelli1700
    Member
    Posted 4 years ago #

    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...

  8. Mark / t31os
    Moderator
    Posted 4 years ago #

    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.
    http://codex.wordpress.org/CSS

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

Topic Closed

This topic has been closed to new replies.

About this Topic