WordPress.org

Ready to get started?Download WordPress

Forums

Control Image Placement (16 posts)

  1. tresfavian
    Member
    Posted 4 years ago #

    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.

  2. Jonas Grumby
    Member
    Posted 4 years ago #

    Does your CSS have the alignleft class in it?

  3. Taylor Dewey
    Member
    Posted 4 years ago #

    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

  4. tresfavian
    Member
    Posted 4 years ago #

    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.

  5. Jonas Grumby
    Member
    Posted 4 years ago #

    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?

  6. Taylor Dewey
    Member
    Posted 4 years ago #

    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.

  7. tresfavian
    Member
    Posted 4 years ago #

    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;
    }

  8. tresfavian
    Member
    Posted 4 years ago #

    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?

  9. tresfavian
    Member
    Posted 4 years ago #

    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?

  10. Jonas Grumby
    Member
    Posted 4 years ago #

    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.

  11. tresfavian
    Member
    Posted 4 years ago #

    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.

  12. Jonas Grumby
    Member
    Posted 4 years ago #

    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" />

  13. Jonas Grumby
    Member
    Posted 4 years ago #

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

  14. tresfavian
    Member
    Posted 4 years ago #

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

  15. tresfavian
    Member
    Posted 4 years ago #

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

  16. Jonas Grumby
    Member
    Posted 4 years ago #

    Thanks for the props. Glad it worked for you.

Topic Closed

This topic has been closed to new replies.

About this Topic