Switch betw align-center+left in caption

HTML & CSS
1

Hi - I’d like css code to text-align:center in wordpress captions.

Captions are left-aligned by default. This works to center the caption:

.wp-caption {text-align:center; font:0.8em Arial,sans-serif; line-height:1.1; border:none}

but then all captions are centered! That is, I can choose default left, or my center, but not both. I’ve tried:

.wp-caption.cnt {text-align:center}
and
.wp-caption .cnt {text-align:center}

but neither work. Does anyone know how I can have 2 separate css rules for left-align and center-align?

The problem seems to be I can’t enter class=“cnt” in the html [caption]. Default html in “Edit Post” (it’s alignright because my text wraps to the left of the image):

[caption id=“attachment_70” align=“alignright” width=“365” caption=“etc”]<img class=“size-full wp-image-70” title=“etc” src=“etc” alt=“etc” width=“365” height=“161” />[/caption]

I can’t do this:

[caption id=“attachment_70” class=“cnt” align=“alignright”…

wordpress strips the class out.

I can do this:

<img class="cnt size-full…

But it has no effect on the align of the caption, nor anything else.

This is my css:

/==BEGIN WORDPRESS IMAGES==
Frames+Borders, see http://www.blogfixes.com/wordpress-2-8-image-alignment-problem-center-left-and-right-blog-fix/
see also http://wpgarage.com/css/css-classes-align-images-block-captions/ - .wp-caption p.wp-caption-text
NEXT PARA AFTER IMG MUST HAVE CLEAR - because CLEARFIX does not work in [CAPTION] or IMG/

img.alignleft, div.alignleft {float:left; margin:0 15px 15px 0} /must keep div/
img.alignright, div.alignright {float:right; margin:0 0 15px 15px}
img.aligncenter, div.aligncenter {text-align:center; margin:0 auto}
.wp-caption {font:0.8em Arial,sans-serif; line-height:1.1; border:none}
.wp-caption.cnt {text-align:center}
.wp-caption .cnt {text-align:center}
.wp-caption img {margin-bottom:3px} /space betw img + cap/
/==END WORDPRESS IMAGES==/

thank you! - Val

P.S. I wonder why sitepoint doesn’t have wordpress forum when majority of sites are written in wordpress today, or are in process of switching to wordpress?

2

Hi - actually at the end of the day I found wordpress images so limiting - e.g. can’t set caption wider than or narrower than image so far as I recall - that I switched to doing parallel images + text using css that floats each image (or text) within a container div. This works great with visual editor too, no need to deactivate it.

See example here (test page only, not live):
http://www.greensmoothie.com/1gs/

The first image below date uses wordpress’s image code. All the others are in div’s. Even the last 2 parallel columns under “The Fountain of Youth” (image-with-caption on left, text on right) is in the same div structure.

Are you using Firefox with web developer toolbar and firebug? They make it easy to see the css. Here’s the html (copied from my wordpress Edit Page, Html view, can switch to Visual then back to Html and this will still be there unaltered):

<div class=“clearfix mtop30 mbtm10 w100”><!–positions + sizes the container div–>
<div class=“flft cnt w70”><!–floats the 1st image left, and positions + sizes its div–>

<img src=“[rel]/imgspr/dan-team.jpg” alt=“Dan + family” width=“365” height=“183” />
<p class=“cap p10 lft w80 hcnt”><!–left-align caption 80% of image width, centered under image–>
Pastor Dan Schaefer, his wife Diane, and daughters Tamara and Melody run this beautiful site from rural Michigan. Call 989-689-0005 (EST). Dan custom-makes our GoGreen Sprouter with foodgrade materials. When not drowned in Sprouter parts, he loves doing pastoral work in prisons.</p>

</div>
<div class=“flft cnt w30”><!–floats the 2nd image left against the 1st–>

<img src=“[rel]/imgspr/val-sm.jpg” alt=“Val Archer” width=“124” height=“183” />
<p class=“cap p10 lft w70 hcnt”>Val Archer in South Africa built the first GoGreen Sprouter. Val writes this site. Read <a href=“store/help.php”>About Us</a>.</p>

</div>
</div>

The thread is here:
http://www.sitepoint.com/forums/showthread.php?t=667351 (it goes through to page 2)

John Betong’s post of Mar 27, 2010, 05:59 gave me the answer.

The 2 plugins deactivate_visual_editor and mime_type enable you to selectively deactivate it per post, whereas turning it off in your profile, deactivates it globally.

best, Val

3

Hi Val - glad the solution is working for you (sort of). I do indeed have the visual editor deactivated (actually went into my Wordpress user profile and there was an option to turn it off).

I am not sure why the visual editor would strip out the tags, but I’ll have to research it a bit and get back to you. Hopefully I’ll be able to find some solution - if I do, I will reply here.

Sorry that isn’t immediately helpful!

4

Hi - thank you! It works but one problem…

If I switch to Visual, then back to Html view, wp deletes the captionalign=“…”

I can click Update before switching to Visual, and that works! But then captionalign never shows up in Html view (from the moment I switch to Visual). Which means any time I click Update for any change, I lose all captionaligns.

Do you have visual editor deactivated? I can deactivate it selectively by post with deactivate_visual_editor and mime_type - in which case I don’t lose captionalign in html view since that’s the only view available :slight_smile:

But I have so much text in every post (one post per URL) that I need to work in Visual.

Do you perhaps know how to stop Visual from deleting captionalign? Other than by deactivating Visual?

thanks! - Val

5

Know this is an older thread, but I was searching for the same functionality today and wound up using some info I found in the Wordpress Codex to roll my own [caption] code.

Basically, 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 it helps someone. If you need help, contact me @ blog at lootcorp dot com.

Cheers!

6

Hi, aside from adding a class to specific captions, you can (by default) set them to right aligned and then set a specific class to center alignment (or left)

Can you modify hte HTML to include the classes? If so, some variation of my advice will work :slight_smile:

7

Hi Val,

You can change the caption alignment and make it dependent on the positioning of the caption/image. Is that what you’re looking for?

For example, if you wanted all left-aligned images to have a left-aligned caption, or even all right-aligned images to have a right-aligned caption, you’ll need to target the wp-caption-text with CSS:

Here’s some markup I ripped from my blog to illustrate how WP marksup an image with alignment and caption:

<div style=“width: 310px;” class=“wp-caption aligncenter” id=“attachment_469”>
<a href=“https://sewmyheadon.com/wp-content/uploads/2009/10/myawesomeimage.png”>
<img width=“300” height=“117” alt=“My Image ALT” src=“http://sewmyheadon.com/wp-content/uploads/2009/10/myawesomeimage-300x117.png” title=“image title” class=“size-medium wp-image-469”>
</a>
<p class=“wp-caption-text”>WP-DBmanager Backup</p>
</div>

Since you have a wrapper div that’s created when you insert a caption, you can target the p.wp-caption-text by using something like:

div.alignleft wp-caption-text {text-align:left}
div.aligncenter wp-caption-text {text-align:center}
div.alignright wp-caption-text {text-align:right}

8

Hey Val,

The above works if you want to always make the caption align left when the image is aligned left, and the same for center and right.

I’ll have to think about the best way to selectively impose an alignment on a caption regardless of it’s corresponding image’s position.

My first inclination is to establish that all captions will be, say, centered except in cases where that doesn’t work for you.

In these special cases, you could target the caption directly using the div ID for the caption like so:

div#attachment_123 .wp-caption-text {text-align:left;}

Of course, if you tweak the positioning of every other caption, you’ll end up with a lot of extra CSS.

My policy is to find one caption style that works for me and stick with it as much as possible.

9

Hi Eric - thanks million. Yes centering caption works best in most cases, so I’m doing that with:

.wp-caption {text-align:center}

but when the caption’s very long, I do need to left-align it, regardless of image’s alignment.

Is there a way to fit your code:

div#attachment_123 .wp-caption-text {text-align:left}

directly into the html? which is (with right-align image)

[caption id=“attachment_123” align=“alignright” width=“365” caption=“etc”]<img class=“size-full wp-image-70”…

because as you say, doing it in the css will be excessive :slight_smile:

I tried this:

[caption id=“attachment_123” align=“alignright” width=“365” caption=“etc” style=“.wp-caption {text-align:left}”] but of course wordpress stripped it out when I went into Visual mode

Then I tried it with mime_type switched on (plugin that stops wordpress from stripping out code) and that didn’t work

But perhaps this is incorrect:
style=“.wp-caption {text-align:left}”

Do you know the correct way to include style within [caption] html itself instead of in css?

thank you! - Val

10

Because that’s invalid inline styling :). Just do style=“text-align:left;”

11

No, sorry. I’m not sure it can be done without creating a plugin.

12

Hi Ryan - thanks for correct way to do inline styling. Paul trained me so well, I never knew how to add style into the html :slight_smile:

Sadly, it does not work. It seems that wordpress has no way of aligning the caption differently from the alignment of the image, other than giving all captions the same alignment in the css, like centered. But no way to selectively impose an align on one caption.

So that’s the drag of switching to web 2.0 where visitors can give their feedback on a page. You don’t have full control with publishing platforms like wordpress!

Thank you Eric for trying :slight_smile: - Val