Support » Themes and Templates » Positioning of image caption

  • Resolved dadsidea

    (@dadsidea)


    Just a simple problem, which I am sure has a quick solution.

    This is the site I am updating:
    http://reelthoughtfilms.com/

    This is the dev site for the next set of changes:
    http://visualcontinuity.co.uk/dev/reel/rtfwp/

    You can see that I am trying to add a series of images here with some captions. The styling of the caption is exactly what I want. However, the problem I have is the position. I would like to have it sitting on the right hand side of the image, like this…

    http://visualcontinuity.co.uk/dev/reel/rtfwp/wp-forum/caption.jpg

    Surely this is not as hard as I think this is. Is it?

    This is my code:

    /*	Caption
    ----------------------------------------- */
    
    .wp-caption {
    
    border: none;
    text-align: right;
    padding-top: 10px;
    margin: -5px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: center bottom;
    }
    
    .wp-caption p.wp-caption-text {
    font-style: normal;
    font-size: 10px;
    line-height: 17px;
    padding: 8px;
    margin: 0;
    }

    Any help would be greatly appreciated! Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • dadsidea

    (@dadsidea)

    I also tried to edit the following code in my media.php file

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
    	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';

    This was from the following thread http://wordpress.org/support/topic/add-caption-above-image?replies=3

    It didn’t make any changes for some reason.

    Michael

    (@alchymyth)

    Forum Moderator

    this should be possible to edit here:

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
    	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';

    try this:

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
    	. '" style="width: ' . ((int) $width+ 300 + 20) . 'px">'
    	. do_shortcode( $content )
    	. '<p style="float:right; width:300px;" class="wp-caption-text">'
    	. $caption
    	. '</p><span style="float:none;clear:both;display:block;"></span></div>';

    (where the 300 is the width for the caption text;
    and the extras are for positioning and the case that the text stretches longer than the height of the image)

    dadsidea

    (@dadsidea)

    Alchymyth, THANK YOU!!!

    You’re a wee gem, and if you’re ever in Glasgow, I’ll take you for some good quality beer!

    Worked a treat, I’ve tweaked the values and it’s looking good. Have a look

    http://dev.visualcontinuity.co.uk/reel/rtfwp/

    Thank again!!!

    Michael

    (@alchymyth)

    Forum Moderator

    checked it in firefox, chrome, safari on windows PC; all fine;
    IE7 shows the text starting at the bootm right corner of the images;

    hopefully this fixes it for all browsers (wrapping a span with float:left; around the do_shortcode part):

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
    	. '" style="width: ' . ((int) $width+ 249 + 20) . 'px"><span style="float:left;">'
    	. do_shortcode( $content )
    	. '</span><p style="float:right; width: 251px;" class="wp-caption-text">'
    	. $caption
    	. '</p><span style="float:none;clear:both;display:block;"></span></div>';
    dadsidea

    (@dadsidea)

    Thanks very much. Site is now updated

    http://reelthoughtfilms.com/

    You’re a star!

    Hi everyone,

    This solution seems to be broken as of WordPress 3.1— that code is no longer in the media.php file. Anyone know of a new solution?

    Thanks!

    yeah – having the same problem. i found the original code in media.php file (line 741) but adding alchymyths code doesn’t seem to work. very annoying seeing as it’s something i’d love to be able to implement. could be something to do with the CSS stopping the additional code from media.php doing the right job?

    Michael

    (@alchymyth)

    Forum Moderator

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Positioning of image caption’ is closed to new replies.