Adding a button to Experience Editor to open the image editor app

I ran across a question in Stack Overflow today about how to show "edit image" in Sitecore experience editor? and thought that would be an easy one to tackle.  Originally I figured I could copy the command from the existing link ("Edit Image") in the content editor and it would be a very simple answer, however it turns out that it's not quite so easy.

If you have access to a decompiler, take a look at the existing command Sitecore.Shell.Framework.Commands.Shell.EditImage as well as the existing command for selecting an image in Experience Editor Sitecore.Shell.Applications.WebEdit.Commands.ChooseImage. You'll see that they're similar, but unfortunately they use two different methods of opening a dialog (Windows.RunApplication and SheerResponse.ShowModalDialog), as well as reading the image from the context vs from the URL, so we can't reuse the existing class as-is. Fortunately the two classes are similar enough that you can easily re-use code from both, and make a class which opens the image editor in a modal dialog (as required by the experience editor).  I've posted a gist to the full class below.

Step 1:
Duplicate one of the buttons under /sitecore/system/Field types/Simple Types/Image/WebEdit Buttons
Change the icon and text to something meaningful to your authors.
Make the contents of the Click field: chrome:field:editcontrol({command:"webedit:changeimage"})
(annoyingly there's already a webedit:editimage which opens the image properties, so we can't name it that).

Step 2:
Create your custom command class (eg. EditImage.cs), make it serializable and inherit from WebEditImageCommand like the other EE buttons. I have posted the full class as a gist to make it easier to read and copy.

Step 3:
Open App_Config\Include\Sitecore.ExperienceEditor.config and duplicate the entry for webedit:chooseimage. Change the command name to webedit:changeimage as per step 1, and change the type to the custom command class you created in step 2.

When you select an image in the Experience Editor, you should now have an extra button in the list which opens the image editor in a modal window when clicked!

Extra 'edit image' button second from the left

After clicking the button, the image is opened in the image editor modal

Note: You'll have to refresh the window to see the updated image.  I leave it as an exercise for the reader to determine a way to get the image to refresh after closing the modal :) or maybe I'll write that up in a later post...