Instantly share code, notes, and snippets.

Embed
What would you like to do?
Insert an image into the wordpress editor always wrapped in a figure tag. The javascript is used to remove the figure element from the editor if the delete button is used. Editing alingnment left/right/center/none is supported.
(function($) {
$(document).ready(function() {
$('body').on('mousedown', 'div[aria-label="Remove"]', function(e) {
var editor = tinyMCE.activeEditor,
element = editor.selection.getNode();
if(element.tagName !== 'FIGURE') {
$(element).parents('figure').remove();
}
});
$('body').on('mousedown', 'div[aria-label="Align left"]', function(e) {
var editor = tinyMCE.activeEditor,
element = editor.selection.getNode(),
$figure;
if(element.tagName !== 'FIGURE') {
$figure = $(element).parents('figure');
$figure.removeClass('aligncenter alignright alignnone');
$figure.addClass('alignleft');
}
});
$('body').on('mousedown', 'div[aria-label="Align center"]', function(e) {
var editor = tinyMCE.activeEditor,
element = editor.selection.getNode(),
$figure;
if(element.tagName !== 'FIGURE') {
$figure = $(element).parents('figure');
$figure.removeClass('alignleft alignright alignnone');
$figure.addClass('aligncenter');
}
});
$('body').on('mousedown', 'div[aria-label="Align right"]', function(e) {
var editor = tinyMCE.activeEditor,
element = editor.selection.getNode(),
$figure;
if(element.tagName !== 'FIGURE') {
$figure = $(element).parents('figure');
$figure.removeClass('aligncenter alignleft alignnone');
$figure.addClass('alignright');
}
});
$('body').on('mousedown', 'div[aria-label="No alignment"]', function(e) {
var editor = tinyMCE.activeEditor,
element = editor.selection.getNode(),
$figure;
if(element.tagName !== 'FIGURE') {
$figure = $(element).parents('figure');
$figure.removeClass('aligncenter alignright alignleft');
$figure.addClass('alignnone');
}
});
});
}(jQuery));
/* To remove any br or p tags that the WordPress editor likes to throw in */
figure img + br,
figure a + br,
figure img + p,
figure a + p { display: none; }
// Insert Images within Figure Element from Media Uploader
// @see: https://css-tricks.com/snippets/wordpress/insert-images-within-figure-element-from-media-uploader/
function theme_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt ) {
//Always return an image with a <figure> tag, regardless of link or caption
//Grab the image tag
$image_tag = get_image_tag($id, '', $title, $align, $size);
//Let's see if this contains a link
$linkptrn = "/<a[^>]*>/";
$found = preg_match($linkptrn, $html, $a_elem);
// If no link, do nothing
if($found > 0) {
$a_elem = $a_elem[0];
if(strstr($a_elem, "class=\"") !== false){ // If link already has class defined inject it to attribute
$a_elem = str_replace("class=\"", "class=\"lightbox ", $a_elem);
} else { // If no class defined, just add class attribute
$a_elem = str_replace("<a ", "<a class=\"lightbox\" ", $a_elem);
}
} else {
$a_elem = "";
}
// Set up the attributes for the <figure>
$has_caption = !empty($caption);
$captionClass = $has_caption ? ' wp-caption' : '';
$figureId = !empty($id) ? ' id="attachment_' . esc_attr($id) . '"': '';
$attributes = $figureId . ' class="align' . $align . ' attachment-' . $size . ' size-' . $size . $captionClass . '"';
$output = '<figure' . $attributes .'>';
//add the image back in
$output .= $a_elem;
$output .= $image_tag;
if ( $a_elem != "" ) {
$output .= '</a>';
}
if ( $has_caption ) {
$output .= '<figcaption class="caption wp-caption-text">' . $caption . '</figcaption>';
}
$output .= '</figure>';
return $output;
}
// Insert Images within Figure Element from Media Uploader
// @see: https://css-tricks.com/snippets/wordpress/insert-images-within-figure-element-from-media-uploader/
add_filter( 'image_send_to_editor', 'theme_insert_image', 10, 9 );
add_filter( 'disable_captions', create_function('$a', 'return true;') );
@Jozze

This comment has been minimized.

Jozze commented Jun 15, 2017

Everytime i use the delete button, i get a js error and the editor gets cleared

js error: Uncaught TypeError: Cannot read property 'nodeName' of null

I suspect that tinymce wants to delete the tag, but can't after I already deleted the parent with the click event... did this kind of thing happen to you? Do you know how to fix this?

I enqueued the admin script with jquery as a dependency.

@netzgestaltung

This comment has been minimized.

Owner

netzgestaltung commented Oct 25, 2017

just saw your comment right now, i will take a look into it - i had no similar issues, but i have to look how i have implemented it finaly.

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