3

When I insert an image into the post editor, select it and click the "align left" button, it automatically adds the alignleft CSS class to the image, like so :

<img 
    src = "http://www.example.org/media/myimage.png" 
    class = "wp-image-123 size-thumbnail alignleft" 
    height = "141" 
    width = "188" 
/>

What I would like to achieve is that it also adds the HTML attibute align = "left", like that :

<img 
    src = "http://www.example.org/media/myimage.png" 
    class = "wp-image-123 size-thumbnail alignleft" 
    height = "141" 
    width = "188" 
    align = "left" 
/>

Note : I am talking specifically about the align buttons that appear over an image when it is selected in the editor :

enter image description here

2
  • 1
    align attribute is deprecated in HTML5. You sure want to use it?
    – Z. Zlatev
    Feb 10, 2015 at 13:07
  • Yes, this is for making email templates and taking care of MS Outlook, which doesn't accept the CSS float property.
    – mike23
    Feb 10, 2015 at 13:13

1 Answer 1

2
+100

The following workaround is based on the wpeditimage/plugin.js file in the core.

You could enqueue it or test it with:

add_action( 'admin_footer-post.php', function()
{?><script> 
    jQuery(window).load( function( $ ) {
        if( ! $( "#wp-content-wrap").hasClass("tmce-active" ) ) return;
        var editor = tinyMCE.activeEditor;
        editor.on( 'BeforeExecCommand', function( event ) {
            var node, DL, cmd = event.command;
            if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
                 node = editor.selection.getNode();
                 DL   = editor.dom.getParent( node, '.wp-caption' );
                 if ( node.nodeName !== 'IMG' && ! DL ) return;
                 node.align = cmd.slice( 7 ).toLowerCase();
             }
        });
    });                                                                 
</script><?php } );

Here we use the Visual mode checking from here. Then you could adjust this to support the case when the Text mode is loaded by default.

Previous answer:

There's no get_image_tag_align filter, like the handy get_image_tag_class filter. But we can use the image_send_to_editor or get_image_tag filters to modify the inserted HTML:

Example:

add_filter( 'get_image_tag', function( $html, $id, $alt, $title, $align, $size )
{
    if( $align )
    {
        $align = sprintf( ' align="%s" ', esc_attr( $align ) );
        $html  = str_replace( "/>", "{$align}/>", $html );
    }
    return $html;
}, 10, 6 ); 
2
  • Thank you birgire for the great answer, that worked like a charm! With minor tweaks I could adapt it to my needs.
    – mike23
    Feb 12, 2015 at 7:45
  • glad to hear you could adjust it to your needs @mike23
    – birgire
    Feb 12, 2015 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.