Captions fine in editor, don’t work when posted

  • radarlake

    (@radarlake)


    14 years, 2 months ago

    Any help on this will be appreciated. Been struggling for awhile.

    Basically, the captions look fine in the wordpress editor but when I post them, the caption is completely unformatted and the text simply appears below the image. When I post images without captions I have no problems with alignment or text wrapping but as soon as I add the caption they go haywire. You can see an example at http://www.radarlake.com/2009/11/phil-ramone-comes-to-mcgill/

    Here’s an example of the html code in the editor:

    [caption id="attachment_21" align="alignleft" width="180" caption="Phil Ramone comes to Mcgill"]<img class=”size-full wp-image-21″ title=”Smaller_Cropped_Phil_Ramone” src=”http://www.radarlake.com/wp-content/uploads/2009/11/Smaller_Cropped_Phil_Ramone.jpg&#8221; alt=”Smaller_Cropped_Phil_Ramone” width=”180″ height=”181″ />[/caption]

    Which then generates this html on the page:

    <div id=”attachment_21″ class=”wp-caption alignleft” style=”width: 190px”><img class=”size-full wp-image-21″ title=”Smaller_Cropped_Phil_Ramone” src=”http://www.radarlake.com/wp-content/uploads/2009/11/Smaller_Cropped_Phil_Ramone.jpg&#8221; alt=”Smaller_Cropped_Phil_Ramone” width=”180″ height=”181″ /><p class=”wp-caption-text”>Phil Ramone comes to Mcgill</p></div>

    Here’s my CSS code for images and captions:

    img.alignright {float:right; margin:0 0 1em 1em}
    img.alignleft {float:left; margin:0 1em 1em 0}
    img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    a img.alignright {float:right; margin:0 0 1em 1em; border:none}
    a img.alignleft {float:left; margin:0 1em 1em 0; border:none}
    a img.aligncenter {display: block; margin-left: auto; margin-right: auto; border:none}

    /* Captions */
    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }
    /* End captions */

    .post{
    padding: 10px 0 10px 0;
    }

    .wp-caption-text {
    font-size:xx-small;
    color:#66FFFF;
    vertical-align:top;
    }

    I made this theme myself and I’m very far from being a pro at this stuff so there’s a possibility I’m missing something basic I guess. I’m usually pretty good at finding solution online but this one has me completely stumped.

    I’m using version 2.9.1 with 2 plugins: My Link Order and WP-Spamfree.

    Thanks in advance everyone!

Viewing 5 replies - 1 through 5 (of 5 total)
  • bsabol

    (@bsabol)

    14 years, 2 months ago

    I’m having the exact same problem with the body of my text not wrapping around a captioned image.

    Moreover, the WordPress documentation “Captioning the Image” at http://codex.wordpress.org/Wrapping_Text_Around_Images supposedly shows an example of text wrapping around a left-aligned captioned image. But this example doesn’t display correctly to me in either Firefox or IE8. As in my blog, the example’s text body doesn’t wrap at all; instead it loads everything under the captioned image.

    Can someone investigate or explain what I may be doing wrong? I’m running WP 2.9.1.

    douglaslucas

    (@douglaslucas)

    14 years, 1 month ago

    Same problem here. Using (basically) the Copyblogger theme at http://www.douglaslucas.com/blog — WordPress 2.9.2

    Michael

    (@alchymyth)

    14 years, 1 month ago

    @douglaslucas
    the theme is missing the wp-caption.alignwhatever styles:

    .wp-caption.aligncenter {display: block; margin-left: auto; margin-right: auto}
.wp-caption.alignright {float:right; margin:0 0 1em 1em}
.wp-caption.alignleft {float:left; margin:0 1em 1em 0}

    add them to custom.css

    douglaslucas

    (@douglaslucas)

    14 years, 1 month ago

    Thanks alchymth! That fixed it! Completed example: http://www.douglaslucas.com/blog/2010/03/24/typewriter-ish-writing-on-a-computer/

    Here’re two releated items I found out, which are applicable at least to my theme (Copyblogger).

    If you want to align the image+caption left or right, but always want the caption text centered underneath the image, add this to custom.css:

    .wp-caption {text-align: center;}

    To make the caption text a link (e.g., to attribute a Creative Commons-licensed image). The only problem I experienced with that solution was switching back and forth between the Visual and HTML editor modes, which caused the single apostrophes suggested in the post to switch back to double apostrophes. Easy enough to repair that manually.

    Thanks again, all!

    dancasas

    (@dancasas)

    13 years, 11 months ago

    @alchymyth

    THANKS A MILLION.

    That’s exactly what is happening to me with WordPress 2.9.2 and multi-column theme. I just added the styles for .wp-caption.aligncenter and it works like a charm.

    Thanks,

    Dan

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Captions fine in editor, don’t work when posted’ is closed to new replies.