views:

157

answers:

3

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?

+1  A: 

Does this not work?

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

Rob Flaherty
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?
rutherford
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.
Rob Flaherty
tried that and it doesn't have any effect
rutherford
should point out I'm using v2.2.1
rutherford
Can you post a URL?
Rob Flaherty
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.
Rob Flaherty
cheers - http://aleatory.clientsideweb.net/2009/11/28/google-app-engine-datastore-gotchas/
rutherford
OK, try this:.wp-caption { text-align:right; display:block; }
Rob Flaherty
nah still no luck. I can't find any actual caption field for the image in this version of wp anyway so I imagine it's just not supported. Thanks anyway for the pointer
rutherford
A: 

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

rutherford
+1  A: 

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"&gt;
<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!

Jim