WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#6811 closed enhancement (fixed)

Unify TinyMCE image popup and insert image popup

Reported by: matt Owned by: azaozz
Milestone: 2.6.1 Priority: normal
Severity: normal Version: 2.5
Component: Administration Keywords: blessed
Focuses: Cc:

Description

Right now we have two methods for interacting with images, one bundled with TinyMCE and one from our "insert image" dialog.

Our insert image dialog has some better functionality around alignment and such, so we should standardize on that.

Attachments (6)

wpeditimage.zip (14.6 KB) - added by azaozz 7 years ago.
edit-image-popup.patch (6.3 KB) - added by azaozz 7 years ago.
edit-image-popup2.patch (32.4 KB) - added by azaozz 7 years ago.
editimage-rtl.zip (455 bytes) - added by azaozz 7 years ago.
edit-image-popup3.patch (25.2 KB) - added by azaozz 7 years ago.
edit-image-popup4.patch (9.2 KB) - added by azaozz 7 years ago.

Download all attachments as: .zip

Change History (20)

comment:1 @matt7 years ago

See also: #6812.

@azaozz7 years ago

comment:2 @azaozz7 years ago

Customized Edit Image dialog, first run. Has the functionality of both "Insert/Edit Image" and "Insert/Edit Link" popups in TinyMCE, together with several WordPress specific features (css classes, attachment rel, etc.). Also the look and feel is like the Add Media dialog.

Has an advanced tab that may need some options added or removed.

The zip file contains a TinyMCE plugin that goes to /wp-includes/js/tinymce/plugins/.

@azaozz7 years ago

comment:3 @ryan7 years ago

(In [8066]) Unify TinyMCE image popup and insert image popup. Props azaozz. see #6811

comment:4 follow-up: @ryan7 years ago

I think some strings in the plugin need to be setup for translation.

comment:5 in reply to: ↑ 4 @azaozz7 years ago

Replying to ryan:

I think some strings in the plugin need to be setup for translation.

Yes, the translation strings aren't in yet. Was wondering if this should be integrated with the "Add external image" too.

comment:6 @azaozz7 years ago

Second run. Added translation strings, RTL support, several layout improvements, image border, hspace and vspace can be used as shortcuts to add css styles, the preview is visible on both tabs, etc.

Also made a small change to ThickBox' style for the loading animation, now it's shown in a box similarly to the theme preview on http://wordpress.com.

@azaozz7 years ago

comment:7 @ryan7 years ago

(In [8083]) Image popup improvements from azaozz. Added translation strings, RTL support, several layout improvements, image border, hspace and vspace can be used as shortcuts to add css styles, the preview is visible on both tabs, etc. see #6811

comment:8 @azaozz7 years ago

The edit-image-popup2.patch includes a new file:
wp-includes/js/tinymce/plugins/wpeditimage/css/editimage-rtl.css
that didn't get created for some reason. Adding a zipped version of it.

@azaozz7 years ago

comment:10 @azaozz7 years ago

Fixes: align center in IE, import of color css stylesheets, potential error on submit when removing align center, few css fixes, etc. The image size setting is now on the side and is in percents of the current size.

@azaozz7 years ago

comment:11 @ryan7 years ago

(In [8167]) Edit image updates from azaozz. see #6811

comment:12 @azaozz7 years ago

Several fixes: new link not created if the image has class "aligncenter" in Safari; recalculates the demo image size properly and applies any inline styles to it; if relative link is added, it's converted to absolute; "Unknown error" in IE6, although everything is working well.

@azaozz7 years ago

comment:13 @ryan7 years ago

(In [8191]) Edit image fixes from azaozz: : new link not created if the image has class "aligncenter" in Safari; recalculates the demo image size properly and applies any inline styles to it; if relative link is added, it's converted to absolute; "Unknown error" in IE6. see #6811

comment:14 @azaozz7 years ago

  • Milestone changed from 2.9 to 2.6.1
  • Resolution set to fixed
  • Status changed from new to closed

Done.

Note: See TracTickets for help on using tickets.