1

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?

  • Please show the Code how you inserted the attachment. – fischi Feb 28 '14 at 15:33
  • @fischi I'm using page editor. See code above. – marcelo2605 Feb 28 '14 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 Feb 28 '14 at 15:44
  • @TheDeadMedic I'm using roots theme – marcelo2605 Feb 28 '14 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 Feb 28 '14 at 15:49
1

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"';
  • 2
    Glad you solved it! You can accept your own answer :) Also, I recommend editing your original post to state which theme you are using, so if anyone else comes across this it's easy for them to solve too. This question is only specific to this theme. – Tim Malone Apr 19 '16 at 22:33
-2

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

  • Explanation as it how helps OP would be great! – bravokeyl Sep 23 '16 at 13:19
  • This would remove any style attribute, also this would remove it in case JavaScript is enabled. Looking at the solution, I would assume this is not the OPs intention. – kaiser Sep 23 '16 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.