Positioning of image caption

  • Resolved dadsidea

    (@dadsidea)


    14 years, 6 months ago

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

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

    This is the dev site for the next set of changes:
    https://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…

    https://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)
  • Thread Starter 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 https://www.ads-software.com/support/topic/add-caption-above-image?replies=3

    It didn’t make any changes for some reason.

    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)

    Thread Starter 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

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

    Thank again!!!

    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>';
    Thread Starter dadsidea

    (@dadsidea)

    Thanks very much. Site is now updated

    https://reelthoughtfilms.com/

    You’re a star!

    timoandres

    (@irksomecushion)

    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!

    headandneck

    (@headandneck)

    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)

    this got ‘warmed up’ in new thread:
    https://www.ads-software.com/support/topic/captions-on-the-right-side-of-image?replies=6

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