I add an image with caption to my page and need to increase <figure> width. But wordpress is adding an inline width.

[caption id="attachment_44" align="alignnone" width="216"]<a href="image path"><img src="image path" alt="caption" width="216" height="95" class="size-full wp-image-44" /></a> caption [/caption]

So, the DOM look like this:

<figure id="attachment_43" aria-labelledby="figcaption_attachment_43" class="wp-caption alignnone" style="width: 216px">
   <a href="">
       <img src="http://localhost/bordados/website/wp-content/uploads/2014/02/homeThumb01.jpg" alt="Caption" width="216" height="95" class="size-full wp-image-43">
   </a>
   <figcaption id="figcaption_attachment_43" class="wp-caption-text">Caption.</figcaption>
</figure>

I try to remove width="216" from code, but the caption desappear.

How I remove this inline style?

I add an image with caption to my page and need to increase <figure> width. But wordpress is adding an inline width.

[caption id="attachment_44" align="alignnone" width="216"]<a href="image path"><img src="image path" alt="caption" width="216" height="95" class="size-full wp-image-44" /></a> caption [/caption]

So, the DOM look like this:

<figure id="attachment_43" aria-labelledby="figcaption_attachment_43" class="wp-caption alignnone" style="width: 216px">
   <a href="">
       <img src="http://localhost/bordados/website/wp-content/uploads/2014/02/homeThumb01.jpg" alt="Caption" width="216" height="95" class="size-full wp-image-43">
   </a>
   <figcaption id="figcaption_attachment_43" class="wp-caption-text">Caption.</figcaption>
</figure>

I try to remove width="216" from code, but the caption desappear.

How I remove this inline style?

• posts
• images
• captions

• Please show the Code how you inserted the attachment. – fischi Commented Feb 28, 2014 at 15:33
• @fischi I'm using page editor. See code above. – marcelo2605 Commented Feb 28, 2014 at 15:41
• WordPress' default caption shortcode uses a div - you must be using a plugin or theme that outputs figure instead, which we need to know in order to help. – TheDeadMedic Commented Feb 28, 2014 at 15:44
• @TheDeadMedic I'm using roots theme – marcelo2605 Commented Feb 28, 2014 at 15:46
• 2 The markup is controlled by the img_caption_shortcode filter, located in roots theme in /lib/cleanup.php. Search this site for remove_filter and add_filter to learn about overriding that in a child theme. – Milo Commented Feb 28, 2014 at 15:49

4 Answers 4

SOLVED

I'm using roots theme. So I open cleanup.php file and comment/remove this line:

$attributes .= ' style="width: ' . (esc_attr($attr['width']) + 10) . 'px"';

You can override the width with a filter. Any falsy value will remove the attribute from the <figure>.

add_filter('img_caption_shortcode_width', '__return_false');

This may not be best practice, but you could select the css in a style sheet with

.wp-caption {
                width: 100% !important;
            }

this will override the in-line style.

 $(document).ready(function(){  
    $("figure").removeAttr("style");
});