[resolved] Attached Image Captions adding 10px (6 posts)

  1. midstatelitho
    Posted 7 years ago #

    I've created a custom template (based on classic) to match our existing site. I'd be happy to share a link if it will help but I'm pretty sure I've narrowed down my problem.

    When I attach an image and apply a caption to it, the div for the caption seems to add a 10px margin which throws off the entire layout.

    My column width is 380, and the attached image itself is 380. The div for the caption that surrounds the image has a style attribute that has a width of 390. Now I cannot figure out where this number 390 is coming from. Here's the source code I'm getting

    <div id="attachment_28" class="wp-caption alignnone" style="width: 390px"><img class="size-medium wp-image-28" title="anilox_400" src="http://www.midstatelitho.net/articles/wp-content/uploads/2008/11/anilox_400-300x240.jpg" alt="Anilox Roller Cells Magnified at 400x" width="380" height="321" /><p class="wp-caption-text">Anilox Roller Cells Magnified at 400x</p></div>

    I've searched high and low through my source and can't seem to find it. It seems strange that the number 390 would be written into the template code so I assume there's a calculation somewhere in the caption code that is coming up with 390.

    Any ideas?

  2. midstatelitho
    Posted 7 years ago #

    line 375 in wp-includes/media.php

    change 10 to 0

    return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . (10 + (int) $width) . 'px">'

  3. joelhardi
    Posted 7 years ago #

    I would unmark this as "resolved" if I were you ... to me this "feature" is a bug. This kind of thing shouldn't be hardcoded deep in a core WP library. It should either be removed entirely (which I would prefer) or be configurable via the Settings (there are already places under the Miscellaneous panel where image thumbnail sizes are set) or as a PHP constant or global you can define in your theme.

    I don't get why they did this. It's so easy to just do

    .wp-caption {
    padding: 0 5px 0 5px;

    or whatever to achieve the same visual effect.

    This is annoying in my case because I don't want this extra gap around my images. The CSS2 spec says you have to define a width for any floated element (the div in this case) so I appreciate what WP is trying to do, I just wish it wouldn't add the 10px!

  4. jpadie
    Posted 7 years ago #

    i posted a plugin solution in this thread.

  5. ohnoezitasploded
    Posted 7 years ago #

    the code actually adds a hardcoded element style width of 10px + the image width to the html:

    style="width: ' . (10 + (int) $width) . 'px"

    so then in your html you have:

    <div style="width: 810px">...</div>

    For every single captioned picture in your site. Which just seems like bad code to me. Stuff like this is what CSS was invented for.

    I took out that whole part, rather than just the 10px padding, and my stuff still looks fine in IE, FF, and Chrome.

  6. kove
    Posted 6 years ago #

    I dont like that +10px thing neither, can someone tell me why they added it, and why they keep it?

    Is like a workaround to something..?

Topic Closed

This topic has been closed to new replies.

About this Topic