WordPress.org

Ready to get started?Download WordPress

Forums

Aligning Images. (14 posts)

  1. Missychele
    Member
    Posted 8 years ago #

    How do I align my photos in my posts so that the text flows around the image?

  2. Truth
    Member
    Posted 8 years ago #

    use a class

    eg.

    .image
    {
    float: left;
    padding: 3px;
    }

    to your CSS

    <img src="image.jpg" class="imagefloat" />

    to your html

    should work, working on mine =)

    By the way, this topic was touched on in the Codex

    http://codex.wordpress.org/Wrapping_Text_Around_Images

    for more information :)

  3. Missychele
    Member
    Posted 8 years ago #

    Don't laugh, but where do I put this code? Yes, I checked the codex and while it looks very useful, it still requires a general knowledge of CSS. Do I just stick this code in the post itself? Or style.css and if I add it to style.css does it change all photos? I'm still confused.

  4. Truth
    Member
    Posted 8 years ago #

    I won't :)

    .imagefloat
    {
    float: left;
    padding: 3px;
    }

    to your CSS
    change the padding px according to what you want.

    It will ONLY apply to images with the class="imagefloat"

    so if you want the image in your post to "float" apply the class to it. In another case where you don't want to apply the class to all images, when you've lots of images.

    Wrap your blog post with <div class="imagefloat"> and change the CSS class to .imagefloat img

    :) hope this helps

  5. Missychele
    Member
    Posted 8 years ago #

    So for instance. I would put this in my css and any photos I add to my posts I should put along with the alt tags an imagefloat tag?

  6. abs
    Member
    Posted 8 years ago #

    Are you using wordpress 2.0? If yes, when you insert an image, it tells you align left, right or center... choose one of them...

    if you are using wordpress 1.5 or below,

    <img src="/image_location/image_name.jpg" align="left">

    thats it...

  7. Truth
    Member
    Posted 8 years ago #

    erm.. don't get what you're trying to say.

    There are 2 ways to do it, add a class="imagefloat" to each img tags or wrapping your content in a div tag and make all images in the div tags float.

    What about alt tags? u mean the alt="texthere" in the img tags?

  8. Class
    Member
    Posted 8 years ago #

    I'm lazy and don't want to add the CSS class every time I insert an image, so I'm using
    p img {
    max-width: 100%;
    float: right;
    padding-left: 3px;
    padding-bottom: 3px;
    margin-left: 2px;
    margin-bottom: 2px;
    }

    this in my CSS file.

  9. Truth
    Member
    Posted 8 years ago #

    yupz, that works too, but that would be for all images already, but if you want to have it for all images, that one works fine, but if you want it for some images and not all, the class is needed I guess =)

  10. Class
    Member
    Posted 8 years ago #

    Yeah, if you only want it for images in posts, more adjusting have to be done and if you only want it for some images in a post, you have to add the class to the post manually :)

  11. Missychele
    Member
    Posted 8 years ago #

    Thank you all for your help, but abs totally nailed what I was asking for. My only question now would be...Is it possible to pad the photo or add a border to keep the text from wrapping directly around the photo. You know, some space so that the photo gets a little breathing room, so to speak? This is probably not the easiest method but for me this works great because I totally don't get the whole CSS thing. But, I'm going to work on that later, after work. For now, Abs method is perfect.

  12. Truth
    Member
    Posted 8 years ago #

    able.. :)

    Add this to your CSS

    img
    {
    margin-right: 10px;
    }

    ALL images will have a margin of 10px away from your text on the right.

    It you want only images in your blog entries, use this

    .entry img
    {
    margin-right: 10px;
    }

    Tested in firefox working, not sure in IE

  13. Missychele
    Member
    Posted 8 years ago #

    I added it to my CSS but it didn't change anything. Perhaps, I put it in the wrong spot. Where should I add this?

  14. Truth
    Member
    Posted 8 years ago #

    Add


    img
    {
    margin-right: 10px;
    }

    right after your

    /*
    Theme Name: Slinky Cat
    Theme URI: by Catherine Collingwood || http://cathcoll.net
    Description: Your theme
    Version: 1
    Author: You
    Author URI: http://myblog.com/
    */

    it works in firefox, are you using IE, I never test it in IE though, so I'm not sure if it works in IE.

Topic Closed

This topic has been closed to new replies.

About this Topic