ThemeShaper Forums » Thematic

[closed]

Adding caption misaligns image

(6 posts)
  • Started 9 years ago by djaubert
  • Latest reply from EricH
  • This topic is resolved
  1. I'm trying to add captions to my images but when I add them the image jumps to the right by a few pixels - the image gets wrapped in another <div> automatically when a caption is added. I've looked through the stylesheet but I can't seem to get the image not to move to the right.

    Here is an example of an image without a caption:
    <p><img class="alignnone size-large wp-image-140" title="blah" src="blah.jpg" alt="" width="585" height="388" /></p>

    And here is an example of an image with a caption:
    <div id="attachment_139" class="wp-caption alignnone" style="width: 595px"><img class="size-large wp-image-139 " title="blah" src="blah.jpg" alt="" width="585" height="413" /><p class="wp-caption-text">Blah Caption</p></div>

    The image section of my stylesheet is as follows:

    .alignnone,
    img.alignnone{float:left; margin-right:20px; margin-left: -5px; display:block}
    .alignleft,
    img.alignleft{float:left; margin-right:20px}
    .alignright,
    img.alignright{display:block; float:right; margin-left:20px; margin-right:-5px;}
    .aligncenter,
    img.aligncenter{margin-left:auto; margin-right:auto; display:block; clear:both}
    .wp-caption{text-align:center; margin: 0}
    .wp-caption img{margin:0; padding:0; border:0 none}
    .wp-caption p.wp-caption-text{margin:0; padding-bottom:5px; font-size: 9px; color: #999999;}
    .gallery a {border:none;background:transparent;}
    .gallery a:hover {border:none;background:transparent;text-decoration:underline}
    .gallery img{margin:0}
    .wp-smiley{/* Prevent the smileys from breaking line-height */max-height:12px; margin:0 !important}

    Any ideas would be appreciated.

    Posted 9 years ago #
  2. Do you have this set up somewhere to look at?
    Try adding

    padding:0;

    to

    img.alignnone{float:left; margin-right:20px; margin-left: -5px; display:block}

    Did you add in the negative margin?

    Posted 9 years ago #
  3. EricH, I tryed adding the padding:0 but it didn't have an effect. I noticed that in the editor it shows the image in a grey border as well as the additional spacing from the left.

    You can see the site in progress at http://dev.postpost.co

    Posted 9 years ago #
  4. Got it.

    I found the code below at the WP Forum here http://bit.ly/9ANWn4 and added it to functions.php to get rid of an added 10px that was being added to the overall width. An image width of 585 would become 595 in the shortcode.

    /*
     * Fix the extra 10 pixel width issue for image captions
     */
    add_shortcode('wp_caption', 'fixed_img_caption_shortcode');
    add_shortcode('caption', 'fixed_img_caption_shortcode');
    function fixed_img_caption_shortcode($attr, $content = null) {
    	// 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));
    	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>';
    }

    There was still an added space on the left so I just added

    margin-left: -10px

    to

    .wp-caption img{margin:0; padding:0; border:0 none; margin-left: -10px;}

    Posted 9 years ago #
  5. You've got padding in style.css line 218 that is pushing it to the right.

    change padding:22px 5px 0; to padding:22px 0 0;

    Then you can get rid of your negative margin.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.