WordPress.org

Ready to get started?Download WordPress

Forums

10px added to width in image captions? (26 posts)

  1. Anonymous
    Unregistered
    Posted 6 years ago #

    I'm having a issue with the new image caption feature in WordPress 2.6. Apparently it is automatically adding 10px to the width of the caption div surrounding the image:

    <div class="wp-caption alignright" style="width: 347px"><img style="width: 337px; height: 450px;"...

    Does anyone know why this is, and how I might fix it so that the width of the caption div is the same as the image?

  2. precious-forever
    Member
    Posted 6 years ago #

    I second that ;-)

    I'm currently subtracting 10px in the caption tag, but that also feels just like a weird workaround.

  3. noname1
    Member
    Posted 6 years ago #

    width: auto;

  4. precious-forever
    Member
    Posted 6 years ago #

    So where would you put "width: auto;"?

    The thing is that the new caption feature writes something like that:

    [caption id="attachment_XY" align="alignright" width="100" caption="This is a caption"]<img src="example.com/image.jpg" alt="This is a caption" title="XYZ" width="100" height="100" class="size-full wp-image-XY" />[/caption]

    Note that the first width (that goes into the div in the output) is the same as the width of the image in the editor. But as soon as you post it, 10px are automatically added to the width of the div (so in the example above, the div would be 110px wide, although the image is only 100px).

  5. noname1
    Member
    Posted 6 years ago #

    the forum is more for a helping hand, not really to teach you everything. It is great you want to to run your own site, but this will involve you learning basic code, esspecially CSS. Lot of sites out that explaining with tutorials and examples CSS. CSS is universal and not just WP.

  6. precious-forever
    Member
    Posted 6 years ago #

    I don't get you. I do think this is a WP specific topic, not a general CSS thing. Did you read my last posting?

  7. noname1
    Member
    Posted 6 years ago #

    So where would you put "width: auto;"?

    This is your answer. If you understand CSS you know where to put it. If you don't know CSS you could badly screw things up. Read about the basics of CSS and you have your problem sorted.

  8. precious-forever
    Member
    Posted 6 years ago #

    Ok, but I still don't understand why WP adds these 10px.

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    Because the caption box surrounds the whole image, like the edge on a polaroid picture. It's got 5 px of gray on each side. Look at the default theme, for example.

    The caption shortcode itself does this. No fix other than replacing the shortcode with a plugin or hacking the core code. Look at the function img_caption_shortcode in the media.php file.

  10. precious-forever
    Member
    Posted 6 years ago #

    Ok, that explains it perfectly! Thanks a lot.

    @greyisgood: width: auto!important; for .wp-caption worked for me. Sorry for bothering.

  11. Andrew Ozz
    WordPress Dev
    Posted 6 years ago #

    Setting width:auto; (or no width) on the caption div would make it as wide as the content when the caption is centered, so the frame won't "stick" around the image.

  12. joelhardi
    Member
    Posted 5 years ago #

    Actually, setting width: auto; for floated elements is not valid CSS2, see:

    http://www.w3.org/TR/CSS2/visuren.html#floats

    (CSS 2.1 changes this to allow auto on floats, but it is still only a candidate recommendation. It would use "shrink to fit" width in this case.)

    So, while setting width: auto; may appear to work in your browser, it is actually incorrect and not cross-browser safe.

    So, WordPress is doing the right thing by hardcoding a width -- but it is doing something supremely annoying by randomly adding 10px instead of just leaving the width alone! To me this "feature" is a bug that WordPress should rectify or at least make configurable.

    There is a WP file you can easily hack if you want to remove this behavior. See this bug report for more info:

    http://wordpress.org/support/topic/218542

  13. jpadie
    Member
    Posted 5 years ago #

    instead of hacking the core, a simple plugin should do the trick. try this for size. install in the normal way.

    <?php
    /**
     * @package FixImageMargins
     * @author Justin Adie
     * @version 0.1.0
     */
    /*
    Plugin Name: FixImageMargins
    Plugin URI: #
    Description: removes the silly 10px margin from the new caption based images
    Author: Justin Adie
    Version: 0.1.0
    Author URI: http://rathercurious.net
    */
    class fixImageMargins{
        public $xs = 0; //change this to change the amount of extra spacing
    
        public function __construct(){
            add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
        }
        public function fixme($x=null, $attr, $content){
    
            extract(shortcode_atts(array(
                    'id'    => '',
                    'align'    => 'alignnone',
                    'width'    => '',
                    'caption' => ''
                ), $attr));
    
            if ( 1 > (int) $width || empty($caption) ) {
                return $content;
            }
    
            if ( $id ) $id = 'id="' . $id . '" ';
    
        return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
        . $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
        }
    }
    $fixImageMargins = new fixImageMargins();
    
    ?>
  14. revolutionfrance
    Member
    Posted 5 years ago #

    Hey! I tried you plugin which worked successfully on a localhost, but when I put it online, it says:

    Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /myweb/fiximagemargins.php on line 16

    Any ideas? Thanks a lot for this code, I hope they will fix this in the next version :-)

  15. revolutionfrance
    Member
    Posted 5 years ago #

    Any ideas at all?

  16. jesseisrad
    Member
    Posted 5 years ago #

    Worked for me on dreamhost.

  17. Herudea
    Member
    Posted 5 years ago #

    Freakin sweeeet! thanks.

  18. jesseisrad
    Member
    Posted 5 years ago #

    @revolutionfrance:

    Ah, damn... yeah on a client's site on MediaTemple, I'm getting the same error...

    dreamhost is fine... :-/

  19. jesseisrad
    Member
    Posted 5 years ago #

    Ah found it.

    This plugin only works php 5. Works now. woo!

  20. Xamataca
    Member
    Posted 5 years ago #

    And, commenting on this, if wp devels are going to fix this I would get rid of the hardcoded inline style too.

  21. reverb09
    Member
    Posted 5 years ago #

    @jpadie how do i install this plugin? i'm not familiar with installation from a text file. thanks.

  22. Grudge
    Member
    Posted 5 years ago #

    This hardcoded 10px padding is really annoying. WP devs, please remove these kinds of dabbling with the style.

    The plugin works great though, thanks jpadie.

  23. The Monkeyboy
    Member
    Posted 5 years ago #

    Great plugin! Those extra hard coded 10 pixels have been driving me bonkers!

    Oh, and reverb09, just save the text file as FixImageMargins.php and upload it to your plugins directory. Then you can activate it from your admin panel.

  24. jpadie
    Member
    Posted 5 years ago #

    @reverb09
    save the text to a new file in wp-content/plugins. does not matter what it's called. as The Monkeyboy says.

    @revolutionfrance
    the code is OOP and so properly compatible only with php5. it's easy enough to convert to php4 though. delete the word 'public' in the method declarations and change 'public' to 'var' in the property declaration

    @Xamataca
    i agree- this is a rare example of very poor core coding.

  25. Drawer
    Member
    Posted 5 years ago #

    Another hour gone to WordPress issues! (not happy)

    I wanted to change this frame around the images, too. As an artist and cartoonist, would like to note that the caption below is a great addition, but the grey on top and sides is distracting, and too thick.

    Anyway, am not able to change to php4, jpadie.

    Here is what I did: it mentions public 3 times, so changed according to you and instructions I found online to:

    var $xs = 0; //change this to change the amount of extra spacing
    
          function  fixImageMargins(){ 
    
            add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
        }
           function fixme($x=null, $attr, $content){

    But am still getting error message in 2.7.1. I don't understand php, am just copying.

    Anyone can help with this php coding to get it to work in php4?
    Thanks!

  26. Drawer
    Member
    Posted 5 years ago #

    Oops, just tried to change something else, too, so to help others, for php it should be:

    var $xs = 0; //change this to change the amount of extra spacing
    
          function  fixImageMargins(){ 
    
            add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
        }
           function fixImageMargins($x=null, $attr, $content){

    And it seems to work!

    The top of the frame is still a little thicker than I would like, but it's great to have the side frames only one px borders.

Topic Closed

This topic has been closed to new replies.

About this Topic