Support » Themes and Templates » Image Caption Div adding 10px

  • Resolved ekdor

    (@ekdor)


    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…

Viewing 12 replies - 1 through 12 (of 12 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Which theme are you using?

    Thread Starter ekdor

    (@ekdor)

    It’s one I have built from scratch.

    Thread Starter ekdor

    (@ekdor)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter ekdor

    (@ekdor)

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

    43 | Adjusting Caption Frame Width

    Thread Starter ekdor

    (@ekdor)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Are you using Chrome or Firefox?

    Thread Starter ekdor

    (@ekdor)

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

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

    Thread Starter ekdor

    (@ekdor)

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

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

    Cheers,.

    Thread Starter ekdor

    (@ekdor)

    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.

    Thanks for the fix! Works great.

    I did change the

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

    to

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Image Caption Div adding 10px’ is closed to new replies.