WordPress.org

Ready to get started?Download WordPress

Forums

add padding to images in editor (20 posts)

  1. gx3
    Member
    Posted 7 years ago #

    i was wandering if there was an hack or a plugin to add padding ability in post editor instead of vspace or hspace...
    something that can automatically add a style="padding:Xpx Ypx Zpx Kpx" inside the post code maybe a modified image properties popup box

  2. ryanarrowsmith
    Member
    Posted 7 years ago #

    you could hack the stylesheet for the admin area manually to style the images, but I don't know of a plugin that will do it for you.

  3. gx3
    Member
    Posted 7 years ago #

    yep i know that but the problem is that i use both image float left and right so modifying css sheet is not acceptable...

    however thanks for the reply

  4. lelion
    Member
    Posted 7 years ago #

    ...i use both image float left and right so modifying css sheet is not acceptable...

    Why it is not acceptable? Just add the styles to the admin .CSS file, and what is floated letf and right in your theme, will be floated left and right in the admin area as well:)

    Shoulddn't be so hard; if you need specific advice or want to show us an example, whould be nice:)

    Cheers!

  5. gx3
    Member
    Posted 7 years ago #

    ... when i select "left floating" from image popup box it changes the code by adding << align="left" >> in img code proprerties i don't think i can add a rule in css stylesheet that point to that property... it is neither an id or a style... and i don't want to affect everything modifying img{....} property

    what i want is an image left padding (when aligning right) and an image right padding (when aligning left)
    if its possible....

  6. lelion
    Member
    Posted 7 years ago #

    OK, maybe can be done (maybe not), send URL please to a post at your blog with two images, one with left and one with right alignment :)

    Also, why don't you use classes instead? It'll be much easier for you:)

    Here's a CSS excerpt from the default theme:

    /*	Using 'class="alignright"' on an image will (who would've
    	thought?!) align the image to the right. And using 'class="centered',
    	will of course center the image. This is much better than using
    	align="center", being much more futureproof (and valid) */
    
    img.centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left
    	}

    Using standard classes like these ones will give you the flexibility of aligning images left / or right, with custom padding, both in the WP admin area editor and in your theme (whatever theme that is).

    You'll just need to copy the above styles (or similar styles from your theme) to the admin CSS file, and this'll do the trick:)

    Hope this helps, report back later, so we can know what happened:)

  7. gx3
    Member
    Posted 7 years ago #

    before i change anything... and i can very simply cause the teme is self made...

    http://gx3.netsons.org/wpress

    but... this sounds like i have to add manually in the code box, inside img tag << class="alignleft" >> and not automatically by image property box...

    or maybe i'm wrong (meaning that WP automatically applies img.alignleft and img.alignright classes when present in style.css)?

    oh thanks for the help :)

  8. lelion
    Member
    Posted 7 years ago #

    You should add the class manually, yes, because WP can't do it automatically for you (unless you 'hack' it or create some plugin for this purpose, of course;-)

    If you can live with that (manual adding of the left/right classes), then it's ok for you, and you'll have your nicely floated left/or right images (and custom paddings) both in wp-admin and in the blog itself:)

    At least, this is how I'd do it... if not having access to a special plugin or something of the sort:)

  9. Doodlebee
    Member
    Posted 7 years ago #

    I'd stop using the Visual Rich editor. Use the WordPress quicktags that are default, and you can add buttons to your liking easily, or just manually add stuff in.

    For the record, the Visual Rich editor is TinyMCE - an outside script. If you go to the TinyMCE website, you might find out how to add additional buttons that you want in their script.

  10. lelion
    Member
    Posted 7 years ago #

    @doodlebee:

    Good advice! I guess, you can even create custom buttons for aligning images left and right, the buttons will assign classes to the images, and then you can style the classes as you wish them to be styled:)

    It'll involve some work, but could do the trick pretty nicely, I think:)

  11. Doodlebee
    Member
    Posted 7 years ago #

    It'll involve some work,

    Actually, it doesn't require much. You just add the custom buttons you want in the wp-admin/js/quicktags.js file. Right there at the top, you can see the buttons that are already there. Just add what you need, no biggie.

  12. lelion
    Member
    Posted 7 years ago #

    Thank you, that's an advice I may try myself, too, one of these days!

    Cheers! :)

    PS wp-includes/js/quicktags.js ;-)

  13. Doodlebee
    Member
    Posted 7 years ago #

    Thanks for that correction! It is the includes - sorry 'bout that.

  14. gx3
    Member
    Posted 7 years ago #

    hey tanks so much !!
    i'm about to look at those things :)

  15. lelion
    Member
    Posted 7 years ago #

    It's OK:)

    Here I found good tips from you, doodlebee, which I might explore, too, that's the important thing:)))

  16. desmondo
    Member
    Posted 7 years ago #

    Just wanted to follow up this, I have tried to edit the Javascript file (wp-includes/js/quicktags.js) and it doesn't change the buttons on the visual editor.

    I have also gone to the TinyMCE support forum and can't get the answer, although the same question seems to have been asked a lot.

    Can anyone tell me in laymans terms how to change the buttons on the Visual Editor so they will add class="left" instead of align="left"?

    Cheers

  17. desmondo
    Member
    Posted 7 years ago #

    I have found this file in the js folder:

    "wp-includes/js/tinymce/tiny_mce.js"

    There appears to be some stuff there that could be possibly changed to fix the editor, the weird thing is though when I edit the file the visual editor disappears when I reload the page. Then if I put the tiny_mce.js file back to the way it was it still comes up with errors. I have to delete the whole JS folder and replace to fix, any ideas why?

    Cheers

  18. Doodlebee
    Member
    Posted 7 years ago #

    Just a note to future people who find this...

    Just wanted to follow up this, I have tried to edit the Javascript file (wp-includes/js/quicktags.js) and it doesn't change the buttons on the visual editor.

    quicktags.js has absolutely *nothing* to do with the Visual Editor. You can edit that file to hell and back, but nothing will come of it as long as you use the WYSIWYG - that file only affects the quicktags.

  19. mickej
    Member
    Posted 7 years ago #

    Hi there,

    I have some thoughts and questions about images.

    First of all: Why do you need "display: inline;" for the left and right aligned images? Seem to show the same without it.

    Second: Why is the top margin set to 0px and why is there padding? Instead of just adjust all (top, right, bottom, left) only with margin? I have done this in my blog. You can see an example in this post:

    http://mickej.se/blogg/tallinnkryssningen

    In my CSS I have:

    img.alignright {
    margin: 10px 0px 7px 14px;
    float: right;
    }

    Third: If not touching the original wordpress style sheet at all. And using the ordinary align="right". Why does it show up like this

    http://bilder.mickej.se/wordpress.PNG

    instead of this

    http://bilder.mickej.se/orig.PNG

    Don't care about the font beeing Times New Roman att the second one. Did'n care to change.

    No. I'm not good at CSS. ;)

    Looking forward to answers and/or thoughts.

    --
    Micke

  20. desmondo
    Member
    Posted 7 years ago #

    Hi mickej, I don't have much time on my hands, so can't take a good look, but there appears to be a problem with the HTML for both of your page examples. If you view the source, it comes up with a load of jumbled code, not HTML. Also, it appears neither of them are receiving and styling. Is this correct?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.