image positioning and captions

  • I’m having a lot of trouble getting images to look correctly in posts.

    I’ve gone through the info in the codex and other sites, but still can’t get pictures to act right.

    I want to have pictures sit on the right or left side, have the text rap around them, and also have captions. I used to be able to do this in movabletype with html, but after moving to wordpress, the html no longer really works. For example, if i use <caption valign=”bottom></caption> but the text still sits on top of the image. I’ve also tried to use html (align=”left”) or style=”float:left” inside the img code, but then the image sits way out side the confines of the post, as in the post is only centered around the text, and the picture, if it is big enough, will carry over into the posts below it, and onto the sidebar.

    What I’m really looking for, is for someone to take my hand, pretty much show me the code i need to put in my style.css, and then what the code should look like when I’m writing the post. I’ve copied the exact code and example that is given on the codex page for wrapping text around an image, and it doesn’t work, most importantly that the caption code they give doesn’t work.

    or, is there a plugin that can do all of this for me?

    Below is what i have in my style.css for images.


    /* images
    --------------------------------------------------*/
    img.left {
    float:left;
    margin: 0px 12px 0 0;
    border: 3px solid;
    }

    img.right {
    float:right;
    margin:0 0 0 12px;
    }

    img.center {
    display: block;
    margin:0 auto;
    }

    .caption {
    margin: 5px;
    padding: 5px;
    border: solid 1px #000000;
    font-size:90%;
    color: black
    }

    .right {
    float: right
    }

    .left {
    float: left
    }

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

  • Have you tried this page ?
    https://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html

    Try this site that has many options on how to display images:

    https://www.mandarindesign.com/boxes.html#polaroid

    About half way down the page is a Polaroid version that includes a caption.

    Thread Starter fastcharles

    (@fastcharles)

    Thanks, I was able to position the images the way I wanted using inline. However I still can’t figure out how to add captions. I find many tutorials for captions, they all give ways to do it in css, but I have this suspicion that my posts don’t retrieve information from my stylesheet, as in, I try to put code in my posts referencing my stylesheet, but I never seen any changes. Is this normal? Or shouldn’t I get a change if I put something like

    <div class="caption">
    whatever my caption is
    </div>

    as long as I have a div.caption category in my stylesheet?

    Do you have div.caption or .caption in your CSS? They are not the same.
    Are other changes to your CSS visible, like changing body bgcolor?
    Check for duplicates in your CSS, refresh your browser.

    Thread Starter fastcharles

    (@fastcharles)

    overall changes that are made to every post exist. The problem is when i try use code referencing my stylesheet in indivdual posts, that code does nothing.

    How are you ‘referencing stylesheet in indivdual posts’? By posting HTML code in the posts? If so you might need to use the full URI to the CSS.

    Thread Starter fastcharles

    (@fastcharles)

    well i would prefer not to reference the styleheet in posts at all, is there anyway to include captions for images with only inline code?

    Thread Starter fastcharles

    (@fastcharles)

    for an example of what I want to do, I want to add a caption to this:

    (p)
    <img style="float:left;border:solid 1px silver;padding:5px;margin-right:10px;" src="https://www.slowthinkers.com/wp/images/armstrong.jpg">
    (/P)

    I have not done it myself but it shouldn’t be hard with CSS and template-tags. Check the codex.

    Thread Starter fastcharles

    (@fastcharles)

    You were right, I was able to do it, and get it to look half-decent too. Here’s the code I used, it is all inline, there was nothing added to the stylesheet.

    (p)<div style="margin-left:5px;margin-right:5px;margin-bottom:5px;padding-bottom:5px;border:solid 0px;font-size:90%;color:black;clear:both;float:left;text-align:center;width:175px;line-height:13px;font-style:italic;">
    (a target="_top"><img style="border:solid 0px silver;padding-bottom:2px;text-align:center;" src="https://www.slowthinkers.com/wp/images/thumb-armstrong.jpg" alt="armstrong" title="armstrong">(/a)"Hey, Lance! Check out my shirt! Now everyone will know that I'm your... Oh my god! What are you wearing? I have to go."</div>(/p)

    Granted this was really cumbersome, but it really seems to be the only way to get this to work in wp. The codex was usefull for ideas on adding the inline styles, but the way it tells you to float images and add captions via adding code to the stylesheet.css, did not work for me at all.

    Here is the image in action.
    https://www.slowthinkers.com/wp/?p=62

    i’m trying to do the caption thing. i’ve followed mandarin’s page, but i want to float the image left. or have text around the image. can someone help me out. thanks.

    }
    .polaroid {
    float:left;
    padding:5px 5px 25px 5px;
    border:1px solid silver;
    background:white;
    text-align:center;
    margin-right:10px;
    }
    .polaroidtext {
    color:black;
    position:relative;
    top: -50px;
    }

    Thread Starter fastcharles

    (@fastcharles)

    you seem to have the ‘float’ style already, and that should work. However, I was having problems using the stylesheet to change picture properties, that is why all of my code is inline.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘image positioning and captions’ is closed to new replies.