WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Positioning of image caption (9 posts)

  1. dadsidea
    Member
    Posted 3 years ago #

    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!

  2. dadsidea
    Member
    Posted 3 years ago #

    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.

  3. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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)

  4. dadsidea
    Member
    Posted 3 years ago #

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

  5. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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>';
  6. dadsidea
    Member
    Posted 3 years ago #

    Thanks very much. Site is now updated

    http://reelthoughtfilms.com/

    You're a star!

  7. irksomecushion
    Member
    Posted 3 years ago #

    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!

  8. headandneck
    Member
    Posted 3 years ago #

    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?

  9. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.