Remove inline width style for Figure element

  • In my functions.php page, I’ve added the following code to tell WordPress to use HTML 5 for images with captions:

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

    This is fantastic, except WordPress automatically applies inline style “width” to the figure element, which prevents the image from behaving responsively.

    I imagine I have to add a bit of code in the functions.php to tell WordPress not to include “width” when outputting the figure element. How would I do this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter niknak

    (@niknak)

    $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>';
	}

    In the media.php file, I found where the inline style for width is added and commented it out and it did the trick. But I’d like this to be a permanent solution. Any ideas?

    Just found your question. Yes there is a solution for not overwriting the core-files. In the first 3 lines (of your second posting) there is a filter that you can use to implement your own output.

    So that’s the approach to override the complete output (add i.e. in functions.php):

    add_filter('img_caption_shortcode','fix_img_caption_shortcode_inline_style',10,3);

function fix_img_caption_shortcode_inline_style($output,$attr,$content) {
    //your code here
    return 'test';
}

    Now you have a look to “wp-includes/media.php” into the “img_caption_shortcode” function. Copy the code into your new function and customize at will.

    My resulting fix looks like the following (warning: not tested intense):

    add_filter('img_caption_shortcode','fix_img_caption_shortcode_inline_style',10,3);

function fix_img_caption_shortcode_inline_style($output,$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'] . ' class="' . esc_attr( $class ) . '">'
		. do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
	}

	$caption_width = 10 + $atts['width'];

	$caption_width = apply_filters( 'img_caption_shortcode_width', $caption_width, $atts, $content );

	$style = '';

	return '<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
		. do_shortcode( $content ) . '<p class="wp-caption-text">' . $atts['caption'] . '</p></div>';
}

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Remove inline width style for Figure element’ is closed to new replies.