Images shrink when using caption, lose clarity

[mkatich]

I noticed when I put a caption on an image, the image is shrunk a bit. I compared with and without caption. The caption padding (between the outline and the image) is what's causing the shrink. Is there a way to make the whole image+caption grow wider whenever there is a caption so the image can stay the same size as without a caption? I like the padding the way it is, but it shouldn't shrink the image because of course that makes images lose sharpness.

Here is the source when I have a caption.

<div id="attachment_1197" style="width: 480px" class="wp-caption aligncenter"><img class="wp-image-1197 size-full" src="http://www.hikingmike.com/wp-content/uploads/2015/12/sawyer-mini-filling-bag-at-high-lake.jpg" alt="sawyer-mini-filling-bag-at-high-lake" width="470" height="332" /><p class="wp-caption-text">Preparing to squeeze the life-giving water out of High Lake</p></div>

I did poke around. I see that wp-caption has a padding of 10px. I reduced it to 0, and then image stayed the full size but the caption outline was goofy because it pressed against the left side of it but with padding on the right somehow. Argh.

If that outer div didn't have a width, then this probably wouldn't be a problem. But I guess that's what they use to make the actual outline around the image and caption.

[ginsterbusch]

A possibly option would be to replacing padding with margin. And maybe add a slight reset to the p-aragraph .wp-caption-text.

cu, w0lf.

[Ixiter]

The caption in wp is designed to use the same width as an image without caption. This is the default behavior. Depending on styles for .wp-caption and calculated width in /wp-includes/media.php, the images with a caption are smaller than images without caption. In my opinion a best practice default behavior.

The real issue is missing html5 support for captions in _tk. Thats why the behavior is worse than default. ;)

@mkatich .. you should create a child theme from _tk, as it is meant for, and add your own filter for image caption width, to keep your original image size. in your child theme's function php add the following code:

/**
 * Add caption image width behavior
 * 
 * @todo Add a configuration panel for the behavior to theme settings
 */
function _tk_img_caption_shortcode_width($width, $atts, $content) {
    $caption_width = $atts['width'] + 22; // keep original image width
    return $caption_width;
}
add_filter('img_caption_shortcode_width', '_tk_img_caption_shortcode_width', 10, 3);

[mkatich]

Thanks for your replies! Sorry for replying so late.

@Ixiter what about this?

“I’m a theme meant for hacking, so don’t use me as Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That’s what I’m here for.”

I did not make a child theme because of that. It seems that text no longer exists on TK's site, though I still found it here - http://www.polesapartdesign.com/from-the-ground-up/building-wordpress-themes/wordpress-starter-theme-vs-theme-framework/

I will update since I see there is a new version of _tk and then I will try making a child theme.

...

Update - Ok, this appears to have worked perfectly. My images are sharp! Thanks!