Skip to content

Instantly share code, notes, and snippets.

@miklb
Created June 12, 2012 19:13
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save miklb/2919525 to your computer and use it in GitHub Desktop.
Save miklb/2919525 to your computer and use it in GitHub Desktop.
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' );
@mastekno
Copy link

mastekno commented Apr 4, 2018

Thank You, very help dude :)

@ACPourya
Copy link

ACPourya commented Nov 2, 2023

Is there anyway to manipulate all the image captions, like a SVG or dashicon to all image captions of my website?
Smth like the camera logo under this photo.
https://i.stack.imgur.com/rzrhD.png

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment