How can I add a fifth option to the alignment picker?

by

I’d like to have the following options in the image alignment picker:

  • Left
  • Right
  • Center
  • Full
  • None

Obviously four of those are there by default, but the “full” one doesn’t currently exist. The idea is to allow the user to easily insert full-bleed images like in this article.

Is it possible to modify the alignment list? I can’t seem to find any information on it.

1 Answer
1

You mentioned using the class in your comment. You could try just adding 

max-width:100%

to the css from the link you provided.

Or use jQuery:

$(document).ready(function(){
$('img.fulljust').each(function(){

if($(this).width() > 300){

$(this).css({
  'width' : '100vw';
  'position': 'relative';
  'left': '50%';
  'right': '50%';
  'margin-left': '-50vw';
  'margin-right': '-50vw';
});
}
});
});

EDIT:
I realized I didn’t answer your actual question about adding buttons. WordPress uses the TinyMCE editor which is built in javascript. So you have to create a plugin with a javascript file similar to the one found here: https://www.tinymce.com/docs/configure/content-formatting/#style_formats and add your own css styles to the code.

Then follow the WordPress instructions for creating a TinyMCE plugin found here: https://codex.wordpress.org/TinyMCE_Custom_Buttons#Creating_an_MCE_Editor_Plugin

Leave a Comment