Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A set of function to improve the markup of images inserted into the editor in Wordpress.
<?php
function show_img_vars($html, $id, $caption, $title, $align, $url, $size, $alt) {
// remove alignment class from the image
$html = preg_replace( '/ class=".*"/', '', $html );
// return the normal html output you would expect
$figure = "<figure class='image-inline";
if ($align == 'left' | 'right') {
$figure .= " align".$align;
} elseif ($align == 'center') {
$figure .= " aligncenter";
}
$figure .= "'>\n";
$figure .= " $html\n";
if ($caption) {
$figure .= " <figcaption class='caption'>$caption</figcaption>\n";
}
$figure .= "</figure>\n";
return $figure;
}
add_filter( 'image_send_to_editor', 'show_img_vars', 10, 9 );
function filter_captions_to_editor($shcode, $html) {
// the caption code strips the alignment class out of the html so...
// we have to recover it from the shortcode like so
$align = preg_replace('/(\[.*)align="(\w*)"(.*\])((<.*>)\s*)+(.*)(\[.*\])/', '\2', $shcode );
// and insert it back into the html like so (P.S. I'm a total regex noob)
$html = preg_replace('/<figure class=\'.*\'/', '<figure class=\'image-inline '.$align.'\'', $html);
return $html;
}
add_filter( 'image_add_caption_shortcode', 'filter_captions_to_editor', 10, 9);
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment