Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save hatsumatsu/e349c2f9e3264e07870c to your computer and use it in GitHub Desktop.
Save hatsumatsu/e349c2f9e3264e07870c to your computer and use it in GitHub Desktop.
/**
* Modify markup of inline images added via the visual editor
* to follow the srcset responsive image pattern
* @param string $html original image markup
* @param int $id attachment ID
* @param string $alt alt text
* @param string $title image title
* @return string modified markup
*/
function responsive_image_embed( $html, $id, $alt, $title ) {
$sizes = array(
'thumbnail',
'medium',
'large',
'full'
);
$fallback = wp_get_attachment_image_src( $id, 'medium' );
$attributes = array(
'alt' => $alt,
'title' => $title,
'src' => $fallback[0],
'class' => 'inline-image'
);
$html = '';
$html .= '<img';
$html .= ' srcset="';
foreach( $sizes as $size ) {
$src = wp_get_attachment_image_src( $id, $size );
$html .= $src[0] . ' ' . $src[1] . 'w,';
}
$html = rtrim( $html, ',' );
$html .= '"';
foreach( $attributes as $attribute => $value ) {
$html .= ' ' . $attribute . '="' . esc_attr( $value ) . '"';
}
$html .= '>';
return $html;
}
add_filter( 'get_image_tag', 'responsive_image_embed', 10, 4 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment