jentanbernardus
6/12/2012 - 7:13 PM

Filter WordPress Image & Caption to use HTML5 figure

Filter WordPress Image & Caption to use HTML5 figure

/**
 * 
 * @author pixeline
 * @link https://github.com/eddiemachado/bones/issues/90
 *
 */ 

/*  Remove Width/Height attributes from images, for easier image responsivity. */

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'img_caption_shortcode', 'remove_thumbnail_dimensions');
add_filter( 'wp_caption', 'remove_thumbnail_dimensions', 10 );
add_filter( 'caption', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

// HTML5: Use figure and figcaption for captions
function html5_caption($attr, $content = null) {
    $output = apply_filters( 'img_caption_shortcode', '', $attr, $content );
    if ( $output != '' )
        return $output;

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

    if ( 1 > (int) $width || empty( $caption ) )
        return $content;

    if ( $id ) $id = 'id="' . $id . '" ';

    return '<figure ' . $id . 'class="wp-caption ' . $align . '" ><figcaption class="wp-caption-text">' . $caption . '</figcaption>'. do_shortcode( $content ) . '</figure>';
}

//add_filter('img_caption_shortcode', 'html5_caption',10,3);
add_shortcode( 'wp_caption', 'html5_caption' );
add_shortcode( 'caption', 'html5_caption' );