WordPress 3.9.x – remove inline width from figure element

6 Views

Starting in WordPress 3.9, you can add a line of code to functions.php to tell WordPress to output images with captions with the more semantic figure and figcaption elements: 

add_theme_support( 'html5', array(
'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
) );

This is great. But for some reason WordPress adds an inline style for width to the figure element, which prevents the whole unit from being responsive. That’s not great. I’d like to add some code to the functions.php that tells WordPress to not include the inline width.

Read More

In the media.php file, I found the caption shortcode that addresses my issue: 

$output = apply_filters( 'img_caption_shortcode', '', $attr, $content );
if ( $output != '' )
return $output;

$atts = shortcode_atts( array(
'id'      => '',
'align'   => 'alignnone',
'width'   => '',
'caption' => '',
'class'   => '',
), $attr, 'caption' );

$atts['width'] = (int) $atts['width'];
if ( $atts['width'] < 1 || empty( $atts['caption'] ) )
return $content;

if ( ! empty( $atts['id'] ) )
$atts['id'] = 'id="' . esc_attr( $atts['id'] ) . '" ';

$class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );

if ( current_theme_supports( 'html5', 'caption' ) ) {
return '<figure ' . $atts['id'] . 'style="width: ' . (int) $atts['width'] . 'px;" class="' . esc_attr( $class ) . '">'
. do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
}

Any ideas how to remove the inline style width from the figure element?

Edit: I found the solution here.

Post Views: 6

Related posts

Leave a Reply

2 comments

  1. There is a filter for your question:

    Any ideas how to remove the inline style width from the figure
    element?

    add_filter('img_caption_shortcode_width', '__return_false');

    This leaves the figure element without any style attribute crap

  2. I feel your pain Nick.

    If you look at the first few lines of code you pasted, you will see that if you return a result from the apply_filter call it is used instead.

    Here is what I did.

    First, Hook into the filter… 

    /** Register the html5 figure-non-responsive code fix. */
add_filter( 'img_caption_shortcode', 'myfix_img_caption_shortcode_filter', 10, 3 );

    Now just create myfix_img_caption_shortcode_filter using the code from the media file (essentially the code you pasted).

    function matajas1_img_caption_shortcode_filter($dummy, $attr, $content) {
$atts = shortcode_atts( array(
    'id'      => '',
    'align'   => 'alignnone',
    'width'   => '',
    'caption' => '',
    'class'   => '',
), $attr, 'caption' );

$atts['width'] = (int) $atts['width'];
if ( $atts['width'] < 1 || empty( $atts['caption'] ) )
    return $content;

if ( ! empty( $atts['id'] ) )
    $atts['id'] = 'id="' . esc_attr( $atts['id'] ) . '" ';

$class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );

if ( current_theme_supports( 'html5', 'caption' ) ) {
    return '<figure ' . $atts['id'] . 'style="max-width: ' . (int) $atts['width'] . 'px;" class="' . esc_attr( $class ) . '">'
    . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
}

// Return nothing to allow for default behaviour!!!
return '';
}

    Essentially I just changed the “width” to “max-width”

    Hope it works for you and thanks for asking… I’m glad it’s not just me!