Support » Theme: Customizr » Image runaround

  • chappie

    (@chappie)


    ‘Runaround’ is a term used in page layout applications to set the amount of white space between an image and the text which runs around it. I guess in CSS/HTML the same thing is achieved with margins, padding or borders. I’m not sure which of these sets the default runaround when an image is placed manually (ie not via any presets such as Featured Image) on a Customizr page but I’m happy with the default amount of white space.

    However, I use a mixture of captioned and uncaptioned images and I find that adding a caption via the Edit Image mouseover button drastically alters not only the width of the runaround but also the vertical position of the image.

    Here’s a side-by-side screengrab.

    Ignoring for the moment the bug which causes the first paragraph of text to disappear forever when it is a) bold and b) preceded by an image, the effect of adding a caption to the image is clear. I would classify this as a bug but perhaps it’s a feature…

    Anyway, it plays havoc with my layouts and makes for ugly pages when some of the images have captions and others don’t.

    Ideally, I would like all my image runarounds to be the same – ie the same white space as the default image on the left. But for images (like these) which align with the top of a text column or the top of a paragraph, it would be nice to align the tops perfectly — which ironically is the only good thing about the captioned image on the right.

    I have tried playing around with the margins and padding of captioned images but can’t get satisfactory results so if anyone has an answer to this problem I would be grateful to hear it.

Viewing 13 replies - 1 through 13 (of 13 total)
  • ElectricFeet

    (@electricfeet)

    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 &nbsp; 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.

    Thread Starter chappie

    (@chappie)

    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.

    ElectricFeet

    (@electricfeet)

    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.

    Thread Starter chappie

    (@chappie)

    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>';
    }

    ElectricFeet

    (@electricfeet)

    '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.

    Thread Starter chappie

    (@chappie)

    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="http://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.

    Thread Starter chappie

    (@chappie)

    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 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Image runaround’ is closed to new replies.