Image runaround

It sounds like you are falling foul of the “feature” of WordPress that adds an extra 10px when an image has a caption. They do this to make sure that multi-line captions wrap properly (or something similar; I can’t recall all the details). If you look in Firebug, you can see that a 300×300 image with a caption has a preceding <div id="attachment_xxxx" class="wp-caption aligncenter" style="width: 310px">

Google wordpress caption extra 10px and you’ll open up a whole new pandora’s box. When I did so, I resolved to take the 10px off, but then decided to leave it on, as taking it off caused other problems (again, I can’t recall all the details).

For me it’s not such a problem, as my site always uses captions. You might be able to hack a solution by putting a   to effectively make blank captions, so at least you get a consistent extra 10px. But I haven’t tested it; let us know if it works.

Thanks ElectricFeet — I had begun to accept that my question had been consigned to the elephants’ graveyard so thanks for digging deep for it.

I will see what Google comes up with and report back. However, the problem illustrated in my screen grab above seems to be the opposite of what you describe, ie the padding/margin is *reduced* on the top and sides of the image when I add a caption.

However, the problem illustrated in my screen grab above seems to be the opposite of what you describe, ie the padding/margin is *reduced* on the top and sides of the image when I add a caption.

You need to look at the left side of the image and where it aligns, too. With the caption, the whole image has been shifted right. The behaviour may be influenced by the align="aligncenter" tag in the [caption] shortcode.

Try playing around with alignleft etc. to see if it helps.

I was hoping that the filter suggested by this chap would fix my captioned image runarounds.

But while his code did restore the default padding on the right hand side of captioned images, it also moved my left-aligned images sharply right, giving them a hefty indent as per this screengrab.

Which part of his code is doing this and can I simply change it? Here’s his php:

add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'aligncenter',
		'width'	=> '',
		'caption' => ''
	), $attr));

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

	$capid = '';
	if ( $id ) {
		$id = esc_attr($id);
		$capid = 'id="figcaption_'. $id . '" ';
		$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
	}

	return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: '
	. (int) $width . 'px">' . do_shortcode( $content ) . '<figcaption ' . $capid
	. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}

'align' => 'aligncenter' I think.

However, before using his code, did you play around with the html produced when you add media with a caption. You can set alignleft there.

I remember giving up on the idea of removing the 10px. Although it’s a hack by the WordPress people, they know what they are doing and I think if there were a better way (given their current constraints) they would have used it.

My captions have always been alignleft in html, eg:
[caption id="attachment_1155" align="alignleft" width="300"]<img class="size-full wp-image-1155" alt="pastlife" src="https://localhost:8888/sitename/wp-content/uploads/2014/01/pastlife.jpg" width="300" height="250" /> Exploring the past can explain the present[/caption]

At least, they have been that way since I decided early on that I didn’t want my caption text to be centred.

However, I may be confusing things by also having applied this CSS early on:

/* photo caption padding */
.wp-caption img {margin-bottom: 0.6em;
}
.wp-caption-text {
padding-left: 5px;
padding-right: 5px;
}

That was to fix the distance between the bottom of the image and the caption text, which was inadequate by default. And the padding was to prevent the caption text extending beyond the left and right edges of the image (into the extra space gratuitously added by WP in the caption filter…

Maybe I should try the above php filter mod with this CSS removed — albeit, the distance that my images were indented by the filter mod was over 20px and I can’t fathom where that comes from.

I had cause to look into this again and also have now seen this exhaustive discussion.

Bottom line: They’re keeping the extra width for backwards compatibility, but this will eventually die out when captions are given html5 support.

In the meantime, since WP 3.7, there’s a significantly easier php method than the one you posted above. If you use captions, you can stop the div that surrounds the image having a width wider than the image itself by adding the following to the functions.php to your child theme:

// removes WP's extra width on images with captions
add_filter( 'img_caption_shortcode_width', '__return_zero' );

Additionally, you may also want to remove the padding that is introduced in Customizr, with the following CSS in your Custom CSS or child-theme’s stylesheet:

.wp-caption {
	padding: 0;
}

Works for me. All my images are now finally flush with my dividers / titles / text. Let me know if it works for you.

Thanks EF — that looks a very welcome fix to a problem which drove me nuts. I will try it out when I get back to designing/coding (currently ‘resting’).

[Btw, your fabulous website is looking even more fabulous today!]

[Btw, your fabulous website is looking even more fabulous today!]

Thanks Chappie! Praise indeed from such a pixel perfectionist.

[I finally fixed everything up, including getting rid of ‘wpautop’ as well, so now my vertical spacing is fixed, as well as my horizontal spacing ??

Next steps: Getting to grips with Woocommerce ]

EF, whats your site? I am curious now ??

Hi stellamaris5. It’s darioalfonsi.com

Lovely..really nice and stylish

Thanks ??