Clean up layout of "Image details" section in the media modal

[eablokker]

The new edit image details/replace image modal in the media editor is awesome! But the layout of the image details screen is in shambles. I propose that the look of it should more closely resemble the "attachment details" sidebar that we see in the replace image tab or the regular insert media modal, i.e. left-aligned form labels for instance. Perhaps it could include those details like upload date and image dimensions next to the image. In a previous version I recall that you could even expand the attachment details sidebar so that area became larger and easier to edit the fields, maybe it would look something like that.

I do like the button toggles rather than the drop-down select in the attachment details sidebar.

[eablokker]

Current edit image details modal

[paulwilde]

Maybe one suggestion would be to split the view into 2 columns, as currently there's a lot of whitespace on the righthand side and with a typical sized monitor you have to scroll the view to see the last option.

[eablokker]

Here is a Photoshop mock-up of how I think it should look. This is a hybrid between the "edit media" page (Media -> Edit) and the "insert media" modal. You can edit the Caption and Alt text in the main area beneath the image. In the sidebar are image details and the display settings like alignment and size.

Sorry I've removed the button toggles. I like them but we'd probably have to add them to all the media modal screens in order to maintain consistency. Probably better to go with what we've already got.

Suggestions and refinements welcome.

[eablokker]

Proposed changes to the design of the edit image details modal

[gcorne]

Replying to eablokker:

Thanks for putting this mockup together. I do like how more balanced it feels with the third column, but I wonder how this design will work on small screens. Did you have something in mind? I realize that the media modal has other issues when used on a small screen, touch-based device, but I would like to try and move us towards a better place.

Sorry I've removed the button toggles. I like them but we'd probably have to add them to all the media modal screens in order to maintain consistency. Probably better to go with what we've already got.

FWIW, the button toggles and the design of the Image Details state were borrowed from the state used when inserting an image via "Insert from URL." In essence, there are really two different contexts where the Image Details modal is used: (1) editing an image attachment, and (2) editing the details of an external image. While #1 is the more common, I think need to also keep #2 in mind.

A couple concerns that I have with the new design are:

1. Entering a custom Link To URL is a bit awkward in the narrow column.
2. The "file type" field is not very useful since the extension is also communicated via the "file name" field that is directly above.

In terms of functionality, one change that I would like to make is to make the image size reflect the selected size (e.g. thumbnail, medium, etc..), which makes me wonder if that particular control should be more visually connected to the preview image.

And, as far as overall consistency goes, it might be worth keeping the other media details views in the back our heads. For reference, see:

[eablokker]

Replying to gcorne:

Good call about the other media details views gcorne, I was not aware of those, or of the insert from URL view.

On small screens it will behave exactly the same as the sidebar on all the other media modal views. Here's how it looks currently:

Will be something similar to that. The main image will shrink to fit in the left column as will the caption and alt text fields

1. Entering a custom Link To URL is a bit awkward in the narrow column.

That's how it already is in the insert media view. Is it awkward there too? Maybe this is a separate issue

2. The "file type" field is not very useful since the extension is also communicated via the "file name" field that is directly above.

Agreed, I only included it because it's also there in the sidebar of the edit media page. Also useless because this screen only comes up when you're editing the details of an image, whereas video and audio get their own details views. File type detail is not needed.

In terms of functionality, one change that I would like to make is to make the image size reflect the selected size (e.g. thumbnail, medium, etc..), which makes me wonder if that particular control should be more visually connected to the preview image.

I agree with this too.

Let me see if I can rework this.

[gcorne]

After some fun discussions with @nacin, @helen, and @dh-shredder and considering feedback from various sources, 27366-01.patch​ makes a number of changes.

• Bring back some of the advanced settings that were taken away originally. (I still need to add the css class field for the image and the border and margin). The advanced settings are hidden behind a simple link.
• Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. Still lots of visual tweaks are needed.
• The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview."
• Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited.
• The caption is no longer automatically focused.

[azaozz]

Looking at 27366-01.patch:

• The new (two columns) layout looks a lot better.
• Changing the preview size on selecting another image size is very nice touch.
• The "Image location URL" (in the right column) needs a label.
• Not sure there should be "CSS Class" and "Style" fields.
• Having two "show advanced" links seems a bit confusing. Not sure what's the best there, one is for the image, the other for the link. Merging them into one "Advanced" area may work if the labels are clear: "Image title attribute", "Link rel attribute", etc. as the image and link settings are not clearly separated.

The old popup was made by merging functionality from the TinyMCE 'image' and 'link' modals at the time (5 years ago?). TinyMCE used to have a lot more settings in there making these modals pretty hard to use. Currently TinyMCE 4.0 is a lot simpler and easier, even with all plugins enabled. Thinking we should keep the same trend.

[gcorne]

27366-02.patch​ adds a few visual tweaks, removes the file url from below the image, and moves the size so that it is below the alignment buttons, and fixes a somewhat unrelated issue with the image editor when opened in the modal from somewhere other than post.php.

[helen]

#27512 was marked as a duplicate.

[iseulde]

Mockup for the layout of the other image edit section. Will submit patch asap.

[iseulde]

Moving discussion and patches for the other section to #27544 and renaming the title of this ticket because it is confusing.

[azaozz]

In 27797:

Edit Image modal:

• Bring back some of the advanced settings.
• Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit.
• The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview."
• Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited.

(updates two PNGs from precommit)
Props gcorne, see #27366

[iseulde]

The sections overlap each other a bit now. See screenshot above.

[eablokker]

Why bring in the Title attribute for the image? Title just adds a hover tooltip and is useless for SEO and accessibility as Alt is used instead. What we need here is to add CSS Class to the image, CSS Styles, and Margin properties for top, right, bottom, left.

Why does the image anchor link tag get Link Rel and CSS Class here when the standard insert/edit link modal doesn't have those options? Is Link Rel important on image links but not on text links? Why allow CSS Class on the anchor link tag but not on the image itself?

[gcorne]

With some design help from a friend of mine, I have taken another stab at cleaning up the design a bit in 27366-05.patch​.

• Stick all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal
• Switch to using <select> for the “Size” and “Link To.”
• Bring back the CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…)
• On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields.
• Keep image at top on screen sizes where the two columns are stacked into a single column.

The open questions are:

1. Do we want to bring back border and margin controls for the image? There has been a fair amount of pushback on wordpress.com about the removal of this functionality, so I am leaning towards “yes.”
2. Should we just remove the “Image Title Attribute” field? After thinking about it a bit more, I am leaning towards “yes.”
3. How can we come up with an intuitive way for power users to soft-resize the image to a specific size?

I also am working on some behind the scenes changes to make sure that we don’t stomp on any attributes that the user may have set via the Text editor when editing an image.

[gcorne]

27366-06.patch​ adjusts the borders to better match usage elsewhere in the media modal and adjusts styles for the settings so that they don't apply to the media sidebar when replacing an image.

[gcorne]

27366-07.patch​ refactors how the tinymce DOM is updated when a change is made via the modal. Instead of replacing DOM nodes, the patch manipulates the nodes, which means that updating an image, caption, or image link doesn't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism.

[azaozz]

In 27898:

Edit Image modal:

• Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal.
• Switch to using <select> for the Size and Link To.
• Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…).
• On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields.
• Keep image at top on screen sizes where the two columns are stacked into a single column.
• Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism.

Props gcorne, see #27366

[sdasse]

Reordered fieldsets and added parody with Insert Media dialog

[sdasse]

Reveal "advanced" options

[sdasse]

Adding custom dimensions option

[gcorne]

For following along, the above screen grabs posted by @sdasse led to the work resulting in r27898 and the changes in the latest iteration, which is 27366-09.patch​, which has the following changes:

• Fixes issue with adding a link to an image that didn't have one previously that was introduced in r27898
• Adjusts the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed.
• Adds a “Custom Size” option to the size <select> that when selected reveals fields for soft-resizing the version of the image inserted into the post. This will be selected if the user has soft-resized the image via the handles in TinyMCE and also provides a way to precisely soft resize images. This fixes an issue where modifying other settings would result in the original size of the image being overwritten.

[azaozz]

In 27918:

Edit Image modal:

• Fix issue with adding a link to an image that didn't have one previously.
• Adjust the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed.
• Add a Custom Size option to the size drop-down that reveals fields for soft-resizing the image inserted into the post.

Props gcorne, and props sdasse for the design help, see #27366

[rachelbaker]

Replying to gcorne:

The open questions are:

1. Do we want to bring back border and margin controls for the image? There has been a fair amount of pushback on wordpress.com about the removal of this functionality, so I am leaning towards “yes.”

At my local meetup last night the 3.9 media improvements were being demonstrated and several people remarked these styling options were removed. I didn't realize these advanced options existed, but they do appear to be relied on heavily by non-technical users.

[gcorne]

27366-11.patch​ adds some input validation to custom size handler to constrain the inputs , cleans up extractImageData() a bit, and handles bad height/width attributes such as width="foo" better.

[gcorne]

[attachmet:27366-12.patch 27366-12.patch] makes the calculation of the aspect ratio more robust by using the ratio of the full size version of the image when possible effectively resetting the aspect ratio of images that have been manually skewed by manipulating the height and width attributes by hand if the user changes the value of one of the dimensions in the modal. The latest patch also grabs the values of the height and width attributes instead of using the calculated width and height when those values are positive integers.

[designsimply]

Also see ​http://en.forums.wordpress.com/topic/image-resize-1/

[azaozz]

In 27942:

Edit image modal:

• Make the calculation of the aspect ratio more robust.
• Better getting of the image height and width.

Props gcorne, see #27366

[gcorne]

27366-13.patch​ adds an additional sanity check when setting the aspect ratio.

[azaozz]

In 27948:

Edit image modal: check if full size exists before trying to use it for setting aspect ratio, props gcorne, see #27366

[nacin]

Border and margin is carried into #27706.

Please open new tickets for additional issues.

[gcorne]

Sorry to ignore @nacin's encouragement to create a new ticket for new issues. While working on the plugin to the ability to edit margins and borders, I got annoyed with having to constantly toggle the advanced section, so I put together a patch​ to store the state in a user setting. I realize it is super late, but I think getting this into 3.9 makes sense.

[azaozz]

27366-14.patch looks good, the changes are minimal and it's a nice "finishing touch".

[nacin]

In 28125:

Image Details modal: Remember the last state of the advanced toggle.

props gcorne.
fixes #27366.