3

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.

  • 2
    full is not an alignment. If I understand correctly what you want, it is image size – Mark Kaplun Aug 11 '16 at 16:35
  • I'm with @MarkKaplun You want an image size as large as your content area and alignment: none – Andy Macaulay-Brook Aug 11 '16 at 17:17
  • I know there's an image size full, that's not what I'm looking for. I want to have an option that represents "full width of the browser window," as in the link to that article. I suppose I could style the class for the full size image to look like that, but then I worry about what happens for a smaller image that gets uploaded. I think the best option would be to add a new alignment option. – JacobTheDev Aug 11 '16 at 20:20
  • 1
    that was a comment about the design you want to do, not the coding. In general calling things what they are not, will confuse users and generate more work in the long run usually. It will just make the answer here less useful for you personally. you more likely need "browser width" media setting which will result in a different answer then what you are asking for – Mark Kaplun Aug 14 '16 at 7:35
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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