0

So how do I align an image caption under an image tag to it's right hand edge?

Tried using div but obviously that's not allowed in wp.

What alternative css/tags do I need to use?

2
  • Are you trying to right align ALL image captions on your site, or just a particular caption? Nov 28, 2009 at 15:29
  • all image captions would do I guess - I take it you've got a plugin in mind?
    – citronic
    Nov 28, 2009 at 15:43

3 Answers 3

1

Does this not work?

.wp-caption p.wp-caption-text { text-align:right; }

6
  • sorry, I've not looked at the wordpress css files - so I had this to the css file and does wp add those classes automatically or do I add them on a span say myself?
    – citronic
    Nov 28, 2009 at 16:21
  • WP will add those classes automatically when you create the caption. You can check your theme's stylesheet to see if it already has a rule for the wp.caption-text class. If so, you can modify that one. Or you could just paste the rule into the bottom of your stylesheet. Nov 28, 2009 at 16:25
  • Oh, 2.2 I'm not sure about the caption support in that version. I think the caption featured was reworked in 2.5 or 2.6. But if you can give a URL to a page with one of your captions I'd be happy to take a look. Nov 28, 2009 at 17:11
  • cheers - aleatory.clientsideweb.net/2009/11/28/…
    – citronic
    Nov 28, 2009 at 22:13
  • OK, try this: .wp-caption { text-align:right; display:block; } Nov 29, 2009 at 0:47
1

I came up with a way to specify alignment on a per-caption basis.

Basically, I copied the caption shortcode from the media.php and made it into my own custom function which accepts a "captionalign" argument.

To use, paste the below code into your theme's "function.php" file - this will allow you to specify an option in your caption tag named captionalign. By setting this to right, left, or center, you can specify a per-caption text alignment. Leaving out the attribute will have the caption default to whatever you have your default alignment as.

An example of this in use:

[caption align="aligncenter" width="300" caption="My caption" captionalign="right"]
<a href="http://www.myawesomeblog.com/wp-content/uploads/2010/05/image.jpg">
<img title="My image" src="http://www.myawesomeblog.com/wp-content/uploads/2010/05/image.jpg-300x216.jpg" alt="My image" width="300" height="216" />
</a>
[/caption]

And here is the function:

add_shortcode('wp_caption', 'custom_img_caption_shortcode');
add_shortcode('caption', 'custom_img_caption_shortcode');

/**
 * The Caption shortcode.
 *
 * Allows a plugin to replace the content that would otherwise be returned. The
 * filter is 'img_caption_shortcode' and passes an empty string, the attr
 * parameter and the content parameter values.
 *
 * The supported attributes for the shortcode are 'id', 'align', 'width', and
 * 'caption'.
 *
 * @since 2.6.0
 *
 * @param array $attr Attributes attributed to the shortcode.
 * @param string $content Optional. Shortcode content.
 * @return string
 */
function custom_img_caption_shortcode($attr, $content = null) {

// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
    return $output;

extract(shortcode_atts(array(
    'id'    => '',
    'align' => 'alignnone',
    'width' => '',
    'caption' => '',
    'captionalign' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
    return $content;

if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

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

Hope that helps someone!

0

Asked on Wordpress community site forum too, no response so presumably this isn't a feature of 2.2.1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.