WordPress.org

1. billnanson
   Member
   Posted 10 months ago #

   Am enjoying the captioning of images, but am frustrated at my inability to alter what I assume to be wordpress generated stylings of the caption.

   If I have an image with 560px width, the wordpress generated div (e.g. <div id="attachment_2939" class="wp-caption alignnone" style="width: 570px">) gives a <div> width of 570px which I certainly didn't ask for ;-)

   I'm currently using the css below, but in Firefox I still get padding of 4px between the image and its border, and for IE7, padding to the (only to the) right as in the appended image. I want no padding i.e a tight border so I no longer have to manually add it to images - any ideas?
   Thanks, Bill

   .wp-caption {
   border: 1px solid #ddd;
   text-align: left;
   background-color: #f3f3f3;
   padding-top: 0px;
   margin: 0px;
   border-radius: 0px;
   }

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

   .wp-caption p.wp-caption-text {
   font-size: .80em;
   line-height: 17px;
   padding: 0 5px;
   margin: 0;
   }

2. chaoskaizer
   Member
   Posted 10 months ago #

   in Firefox I still get padding of 4px between the image and its border, and for IE7, padding to the (only to the) right as in the appended image.

   There is extra padding inherit from .storycontent img{padding:4px} (style.css line 139) try reset it too. For MSIE I think it doesnt parse float very well, try play around 'div.alignleft, div.alignright, img.alignleft, img.alignright'.

   generated div (e.g. <div id="attachment_2939" class="wp-caption alignnone" style="width: 570px">) gives a <div> width of 570px which I certainly didn't ask for ;-)

   The caption need a fixed dimension to centered properly, without a fixed width certain browser will not render it, one's of the reason its automatically generate.

3. billnanson
   Member
   Posted 10 months ago #

   Dear chaoskaizer - thanks for the tips.

   Putting .wp-caption img rule after .storycontent img{padding:4px} in style.css at least means that Firefox is behaving exactly as MSIE7 with padding now only on the rhs.

   Will try 'playing around' as you suggest tomorrow...
   tks

4. billnanson
   Member
   Posted 10 months ago #

   try play around 'div.alignleft, div.alignright, img.alignleft, img.alignright'.

   Dear chaoskaizer - I've tried all combinations of div.alignleft, div.alignright, img.alignleft, img.alignright that I can come up with, all with padding set to zero - but I remain with a DIV at 570px versus and image of 560px so too much padding on RHS like here. Consistent in Firefox 3.0.5 and MSIE7.

   Would appreciate a 'step-up'
   Thanks
   Bill

5. Otto42
   Moderator
   Posted 10 months ago #

   The DIV will always get an explicit style of the width of the image (on the page, not necessarily the actual width of the image) plus 10 pixels. This is hardcoded, it cannot be easily changed through styling alone. The extra 10 pixels are to give it a 5 px border around the sides.

   Changing it involves replacing the captioning code with a filter or something similar.

6. billnanson
   Member
   Posted 10 months ago #

   Dear Otto42 - that's kind, but absolutely meaningless to me in terms of next steps :0)

   I do understand though what you mean about the div not necessarily being what you see, as I have found that I can make Firefox work fine (HOORAY!!!) by hiding the following in the css:
   /*.alignleft {
   float: left
   }
   img.alignleft, div.alignleft
   {float:left; margin:0 0.5em 0.5em 0;
   }*/

   and changing my .wp-caption to give a 17px bottom padding:
   .wp-caption {
   border: 1px solid #ddd;
   text-align: left;
   background-color: #f3f3f3;
   padding-top: 0px;
   padding-bottom: 17px;
   margin: 0px;
   border-radius: 0px;
   }

   Trouble is (needless to say) these things made zero difference to MSIE7...
   Bill

7. jhm
   Member
   Posted 4 months ago #

   CSS wont help you, unless your images have always the same width, then you could force a width with
   width:300px !important;

   but this 10 extra pixels are actually added by wordpress and its get done by some sort of hardcoded way (-> into the html tag) - that way you can't make the box "10 pixel smaller" via css. i think the only solution is to find that section in the WP code and disable the addition.

   regards

8. jhm
   Member
   Posted 4 months ago #

   If it still matters - you can fix your problem in wp-includes/media.php in line #596 (Wordpress 2.8 - maybe in another line in other WP Versions):

   return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ($width) . 'px">'
   	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';

   (In the original Code there is a (10 + (int) $width) in the style:width definition.

   regards,
   jhm

9. Adrian Verstuyft
   Member
   Posted 4 months ago #

   And to not alter hardcoded files (you would loose your changes with the next update or you have to manually alter it again) simply give the .wp-caption class a negative margin:
   e.g. margin-left: -10px;
   depending on your alignment of course.
   That always worked for me in FF or IE.

10. sagemintblue
    Member
    Posted 1 week ago #

    And to not alter hardcoded files (you would loose your changes with the next update or you have to manually alter it again) simply give the .wp-caption class a negative margin:
    e.g. margin-left: -10px;
    depending on your alignment of course.
    That always worked for me in FF or IE.

    Better yet, if you're working with your own theme, you can simply override the internal WP function in your theme's "functions.php" file with a new definition which omits the extra 10px:

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

    Note that there's likely a better way to do this using filters, but I wasn't able to get it to work, perhaps due to passing of multiple parameters to the filter function.

Reply

You must log in to post.