Support » Fixing WordPress » Control Image Placement

  • Hi y’all!! How does one control the image placement on a WP Page or Post?
    I have checked align left to all images but they are placed across and
    not aligned. Then there is no control on the text either.

    Someone have a tip how to get control over images and text placement in WP? Tres.

Viewing 15 replies - 1 through 15 (of 15 total)
  • Does your CSS have the alignleft class in it?

    Image placement is controlled
    through css. For example, selecting “align left” adds the class alignleft to the image (or it’s container).

    Be sure your theme has the css classes that are generated by WordPress: http://codex.wordpress.org/CSS#WordPress_Generated_Classes

    If this applied to css then does this control all the images being inserted? Can you control just one page?

    Oh thank you for info, will be helpful.

    You can certainly create your own class in the CSS and only use it on one page, but alignleft is a required WordPress class and should already be in the CSS. Assigning the image to a class that does not exist in the CSS will not work. If you are running version 2.8.5 it’s likely that your theme is out of date as well. Bottom line is the same as my first response.

    Does your CSS have the alignleft class in it?

    I suggest setting defaults. If you want to override one image, you can add the style information either directly (click the HTML editor), or in the image uploaded under advanced image setting before you insert it into a post

    If it’s less arbitrary, e.g. All images in posts in the “cheese” category, you could use conditional tags to include a special stylesheet to override the defaults.

    I do have align left – center – or right codes. This is in my style.css sheet below. What I want to do is align somehow 8 button images {they will be image links soon} to all go left on one page.
    or 3 side by side all aligned, 8 all left will probably be easier.
    I have assigned alignleft to all these images but they go across the page and are not aligned. Is this s.t. you can help with? Tres.

    Images
    *

    ************************************************/
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 0px;
    }
    img.alignnone {
    padding: 0px;
    margin: 0px 0px 10px 0px;
    display: inline;
    }
    img.alignright {
    padding: 0px;
    margin: 0px 0px 10px 10px;
    display: inline;
    }
    img.alignleft {
    padding: 0px;
    margin: 0px 10px 10px 0px;
    display: inline;
    }
    .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    }
    .alignright {
    float: right;
    margin: 0px 0px 10px 10px;
    }
    .alignleft {
    float: left;
    margin: 0px 10px 10px 0px;
    }
    .wp-caption {
    border: 1px solid #DDDDDD;
    text-align: center;
    background-color: #EEEEEE;
    padding: 4px 0px 5px 0px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    .wp-caption img {
    margin: 0px 0px 5px 0px;
    padding: 0px;
    border: 0px;
    }
    .wp-caption p.wp-caption-text {
    margin: 0px;
    padding: 0px 0px 0px 0px;
    font-size: 11px;
    font-weight: normal;
    line-height: 12px;
    }

    taylorlorde, I was writing before I see your post. I prefer just to put the code into html on my page to set the images. Can this be done?

    I don’t know how to set it to one page. I suppose the page will have to be named s.t.page/php then what can I copy from my style sheet and what would I change in this page?

    It doesn’t seem to me like the answer is to create a new php template. It seems like you just want a line break between the images so that that they all align to the far left in a vertical column, but it’s hard to say w/o being able to see the site.

    YES that’s exactly right. SSMinnow

    http://www.ipadapplet.com/itunes-store/

    if you go to this page you will see the mess it is in. I want to put these images in some kind of order. Thanks.

    if you go into HTML mode in the editor, you can remove class="alignleft" from each of the images and replace it with align="left". Otherwise you will need to clear the float by putting something like <br clear="all" /> at the end of each line, so…

    <p><img src="http://www.ipadapplet.com/wp-content/uploads/2010/04/FREE-APPS.jpg" alt="FREE APPS" title="FREE APPS" width="173" height="63" class="alignleft size-full wp-image-120" /> CLICK HERE FOR ITUNES ACCESS TO FREE APPS.</p>

    becomes

    <img src="http://www.ipadapplet.com/wp-content/uploads/2010/04/FREE-APPS.jpg" alt="FREE APPS" title="FREE APPS" width="173" height="63" class="alignleft size-full wp-image-120" /> CLICK HERE FOR ITUNES ACCESS TO FREE APPS.<br clear="all" />

    There are other ways to do it as well. You can also add a class to your CSS that will clear the float.

    I’ll go try it now. let you know. thanxs SSM!!

    HEY SSMinnow – You really helped me get this in order. Looks so much better. Thank you soooo much. I just used the align=”left” and it worked like a charm. You can go to sleep tonite, knowing you really are a big help to s.o. in need !! Thanxs again mucho !!

    Thanks for the props. Glad it worked for you.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Control Image Placement’ is closed to new replies.