WordPress.org

Make WordPress Core

#27366 closed task (blessed) (fixed)

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

Reported by: eablokker Owned by: nacin
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: Media Keywords: has-patch
Focuses: ui Cc:

Description

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.

Attachments (21)

edit-image-details.png (239.2 KB) - added by eablokker 12 months ago.
Current edit image details modal
edit-image-details-concept.png (605.8 KB) - added by eablokker 12 months ago.
Proposed changes to the design of the edit image details modal
27366-01.patch (19.3 KB) - added by gcorne 11 months ago.
27366-02.patch (19.3 KB) - added by gcorne 11 months ago.
Screen Shot 2014-03-26 at 23.19.40.png (373.7 KB) - added by iseulde 11 months ago.
27366-03.patch (20.2 KB) - added by gcorne 11 months ago.
Screen Shot 2014-03-27 at 22.42.30.png (322.3 KB) - added by iseulde 11 months ago.
27366-04.patch (4.5 KB) - added by gcorne 11 months ago.
27366-05.patch (15.2 KB) - added by gcorne 11 months ago.
27366-06.patch (15.7 KB) - added by gcorne 11 months ago.
27366-07.patch (20.5 KB) - added by gcorne 11 months ago.
27366-08.patch (20.9 KB) - added by gcorne 11 months ago.
wp-image-details2.jpg (86.4 KB) - added by sdasse 11 months ago.
Reordered fieldsets and added parody with Insert Media dialog
wp-image-details3.jpg (94.5 KB) - added by sdasse 11 months ago.
Reveal "advanced" options
wp-image-custom-size.jpg (107.7 KB) - added by sdasse 11 months ago.
Adding custom dimensions option
27366-09.patch (10.8 KB) - added by gcorne 11 months ago.
27366.10.patch (11.7 KB) - added by azaozz 11 months ago.
27366-11.patch (3.5 KB) - added by gcorne 11 months ago.
27366-12.patch (5.0 KB) - added by gcorne 11 months ago.
27366-13.patch (448 bytes) - added by gcorne 11 months ago.
27366-14.patch (2.1 KB) - added by gcorne 11 months ago.

Download all attachments as: .zip

Change History (59)

@eablokker12 months ago

Current edit image details modal

comment:1 @SergeyBiryukov12 months ago

  • Milestone changed from Awaiting Review to 3.9

comment:2 @paulwilde12 months ago

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.

comment:3 follow-up: @eablokker12 months ago

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.

Last edited 12 months ago by eablokker (previous) (diff)

@eablokker12 months ago

Proposed changes to the design of the edit image details modal

comment:4 in reply to: ↑ 3 ; follow-up: @gcorne12 months ago

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:
http://make.wordpress.org/core/files/2014/03/06-video-sources1.png
http://make.wordpress.org/core/files/2014/03/03-audio-sources1.png

comment:5 @nacin12 months ago

  • Type changed from enhancement to task (blessed)

comment:6 @ircbot12 months ago

This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.

comment:7 in reply to: ↑ 4 @eablokker12 months ago

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:

http://i.imgur.com/ubEDCzj.png

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

  1. 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.

comment:8 @ircbot12 months ago

This ticket was mentioned in IRC in #wordpress-dev by gcorne. View the logs.

@gcorne11 months ago

comment:9 @gcorne11 months ago

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.

comment:10 @azaozz11 months ago

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.

@gcorne11 months ago

comment:11 @gcorne11 months ago

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.

comment:12 @ircbot11 months ago

This ticket was mentioned in IRC in #wordpress-dev by gcorne. View the logs.

comment:13 @helen11 months ago

#27512 was marked as a duplicate.

comment:14 @iseulde11 months ago

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

comment:15 @iseulde11 months ago

  • Summary changed from Clean up layout of edit image details modal to Clean up layout of "Image details" section in the media modal

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

@gcorne11 months ago

comment:16 @samuelsidler11 months ago

  • Keywords has-patch added

comment:17 @azaozz11 months ago

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

comment:18 @iseulde11 months ago

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

comment:19 @eablokker11 months ago

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?

@gcorne11 months ago

comment:20 follow-up: @gcorne11 months ago

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.

@gcorne11 months ago

@gcorne11 months ago

comment:21 @gcorne11 months ago

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.

@gcorne11 months ago

comment:22 @gcorne11 months ago

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.

@gcorne11 months ago

comment:23 @azaozz11 months ago

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

@sdasse11 months ago

Reordered fieldsets and added parody with Insert Media dialog

@sdasse11 months ago

Reveal "advanced" options

@sdasse11 months ago

Adding custom dimensions option

comment:24 @gcorne11 months ago

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.

@gcorne11 months ago

comment:25 @ircbot11 months ago

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.

@azaozz11 months ago

comment:26 @azaozz11 months ago

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

comment:27 in reply to: ↑ 20 @rachelbaker11 months ago

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.

Last edited 11 months ago by rachelbaker (previous) (diff)

@gcorne11 months ago

comment:28 @gcorne11 months ago

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.

comment:29 @gcorne11 months ago

[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.

@gcorne11 months ago

comment:31 @azaozz11 months ago

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

@gcorne11 months ago

comment:32 @gcorne11 months ago

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

comment:33 @azaozz11 months ago

In 27948:

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

comment:34 @ircbot11 months ago

This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.

comment:35 @nacin11 months ago

  • Resolution set to fixed
  • Status changed from new to closed

Border and margin is carried into #27706.

Please open new tickets for additional issues.

@gcorne11 months ago

comment:36 @gcorne11 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

comment:37 @azaozz11 months ago

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

comment:38 @nacin11 months ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from reopened to closed

In 28125:

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

props gcorne.
fixes #27366.

Note: See TracTickets for help on using tickets.