WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image Caption Div adding 10px (13 posts)

  1. ekdor
    Member
    Posted 1 year ago #

    This appears to be an issue for lost of people. But I haven't been able to find a solution.

    I want the image captions on a site I'm developing for an acquaintance to contain no borders, margins or padding around them, with exception to the caption text. Something in WordPress is adding 10 pixels to the div surrounding the caption. This is not only visible in the image but it's easily seen in the output code. there is an extra 10 pixels on the width. The weird thing is it doesn't affect the top and bottom of the div. I've visited a lot of articles about this issue and tried countless permutation. The closest I got was a bit of code add to the function template, but this messed other things up and I don't know enough to fix that issue.

    Resources bellow which I will keep live for a while.

    Screenshot, sorry about the dark image: REMOVED

    Link to the live page: REMOVED

    Thanks for any assistance...

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which theme are you using?

  3. ekdor
    Member
    Posted 1 year ago #

    It's one I have built from scratch.

  4. ekdor
    Member
    Posted 1 year ago #

    The site is still under development. The content is still just sample stuff that the intended owner is using to practice using the wordpress cms.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your article elements have inline styling increasing the width to more than you want, isn't that the issue instead?

  6. ekdor
    Member
    Posted 1 year ago #

    Incidentally, this is the page where I found the code for the functions page I mentioned above:

    43 | Adjusting Caption Frame Width

  7. ekdor
    Member
    Posted 1 year ago #

    I don't know. I can't see the issue.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you using Chrome or Firefox?

  9. ekdor
    Member
    Posted 1 year ago #

    Safari, but the issue seems to show up in chrome and firefox as well.

  10. alchymyth
    Forum Moderator
    Posted 1 year ago #

    this is the page where I found the code for the functions page I mentioned above

    I wrote that a while ago, and the core code might have changed in the meantime ;-)

    the suggestion below is based on the latest media.php code;

    try and add this to functions.php of your theme:

    remove_shortcode('wp_caption', 'img_caption_shortcode');
    remove_shortcode('caption', 'img_caption_shortcode');
    
    add_shortcode('wp_caption', 'custom_img_caption_shortcode');
    add_shortcode('caption', 'custom_img_caption_shortcode');
    
    /**
     * The customized Caption shortcode.
     *
     * original code in /wp-inlcudes/media.php
     */
    function custom_img_caption_shortcode($attr, $content = null) {
    	// New-style shortcode with the caption inside the shortcode with the link and image tags.
    	if ( ! isset( $attr['caption'] ) ) {
    		if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
    			$content = $matches[1];
    			$attr['caption'] = trim( $matches[2] );
    		}
    	}
    
    	// 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' => ''
    	), $attr, 'caption'));
    
    	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: ' . ( (int) $width) . 'px">'
    	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }

    the edited part is the second last line which reads in the original code in /wp-inludes/media.php:

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
  11. ekdor
    Member
    Posted 1 year ago #

    That seems to have not had any effect this time around.

    Sorry. it's working. Thank you very much for that.

    Cheers,.

  12. ekdor
    Member
    Posted 1 year ago #

    P.S. Issue is resolved and I need to change the resources I provided. I hope the description is enough for others looking for help with this same issue.

  13. miamitom
    Member
    Posted 11 months ago #

    Thanks for the fix! Works great.

    I did change the

    <p class="wp-caption-text">

    to

    <div class="wp-caption-text">

Topic Closed

This topic has been closed to new replies.

About this Topic