Skip to main content

A fresh new Image editor UI for WordPress

In the beginning of this year I played with a image editor dialog to replace the current image editor. Mainly because that one doesn’t make any sense with the new media dialog. It makes the user experience weird and it’s really ugly hack what they did in 3.5.  Opening a new tab to edit an image and then go back and press the refresh link isn’t really a good way.

The main idea is to rewrite all the JS  and move the image editor to a dialog so we don’t need to link to the edit media page but just have it on the same page. I would love to see an edit dialog that benefit the styling of the new media dialog. My current version of it is now on github: https://github.com/markoheijnen/Improved-image-editor. The current state is no state. Only the filters work and the UI need a lot of thoughts. Also the JS need to be rewritten to Backbone.

Most likely the filters don’t make sense to have in core but it would be awesome to have this idea in mind  so plugins can enable it with hooks. This is also focus on the rewrite since extending this dialog should be possible without touching (much) JS.

Ticket 21811: http://core.trac.wordpress.org/ticket/21811

Edit image dialog from TinyMCE

So when you want to change the information of an image in your content it still uses a TinyMCE dialog what looks weird since you added it with the new media dialog. The TinyMCE dialog need to be removed and when you want to edit an image it needs to open the media dialog but with that image already selected. Having a nice API for this also benefit plugin developers for using the media dialog.

Ticket 24409: http://core.trac.wordpress.org/ticket/24409

WP_Image

A WP_Image class that handles as an better API for dealing with media attachments.This should also fix the isseu when you want to create a WP_Image_Editor for an attachment. Currently it’s a bit messy since you don’t know the path of the image so you need to request that one first.

Also it adds the ability to add new image sizes to an image in a few lines of code. Also merge some of the WordPress functions to this class. Current code can be found on https://github.com/markoheijnen/WP_Image.

Ticket 23424: http://core.trac.wordpress.org/ticket/23424

Plan of action

First tackle the new image editor UI dialog and have all the communication on the Github repo. For now having a weekly chat on IRC doesn’t make sense. Having all the communication on Github makes it easier to contribute back to it since you can leave your message there without the need to make it to a meeting.

People that showed interest

melchoyce and DH Shredder

5 Replies to “A fresh new Image editor UI for WordPress”

  • Peter Knight -

    Are you looking at ticket #19889 as well? http://core.trac.wordpress.org/ticket/19889
    Would make a lot of sense if a new UI is created. Right now there’s no way to manipulate custom images without affecting other sizes inside the interface. I was sad to see the current image editing UI is mostly hardcoded so it’s difficult to create a non-hacky plugin to achieve things like that.

    Reply

    Marko Heijnen -

    I’ll do know that ticket but I’m unsure yet how to tackle that correctly since you maybe also want to revert one image size and not all of them.

    Reply

    Peter Knight -

    I was thinking of a workaround in my plugin and I’m finding it tricky as well because I don’t want to create tons of image files or duplicate attachments just for the purpose.

    Right now I’m thinking of storing the manipulations (for example, the crop coordinates) that were made per image size based respective to the original. That metadata could then be versioned so you could revert size-specific edits. If a user then makes an edit that affects all sizes afterward, those additional manipulations are added separately as size specific edits for each size.

    Reply

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.