WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Image runaround (7 posts)

  1. chappie
    Member
    Posted 4 months ago #

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

  2. ElectricFeet
    Member
    Posted 4 months ago #

    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 300x300 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.

  3. chappie
    Member
    Posted 4 months ago #

    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.

  4. ElectricFeet
    Member
    Posted 4 months ago #

    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.

  5. chappie
    Member
    Posted 4 months ago #

    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>';
    }
  6. ElectricFeet
    Member
    Posted 4 months ago #

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

  7. chappie
    Member
    Posted 4 months ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic