Daryl Koopersmith 11:47 pm on July 18, 2012

Media in 3.5

One of the goals for 3.5 is to redesign and improve the workflows for uploading and selecting media in WordPress. Over the next week or so, we’ll be working to flesh out exactly what this will entail from both a technical and design perspective.

Scope

To ensure we stay on track, our focus and top priority is to improve the “Upload/Insert” modal window. Anything outside of that modal UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. is technically out of scope — nice to have, but by no means necessary.

For the 3.5 cycle, we have allotted two months for feature development. Due to the size of this project, a lot will be going on at once. Development on basic structures will begin this week.

What can I do?

Over the next few days, feel free to comment with:

Ideas
User tests (for the current UI)
Concepts and wireframes (quick sketches or text descriptions, it’s all good)

Keep in mind…

We should also be keeping an eye towards the future: we should build modular components that can be adapted for other workflows and potentially be reused in inline UIs.

The media modal currently covers media in posts, galleries, custom headers, and custom backgrounds. Several elements in the modal also blend into the media section of the admin.

Most workflows include a handful of processes:

Uploading media.
Selecting item(s) from the media library.
Editing media details (both item-specific and workflow-specific).

I highly recommend reviewing our current media model. It is fairly complex, and reducing it to a simple system will be quite the challenge.

Let’s talk!

If you’d like to chat with myself and other UI team members about media, comment here, or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” us in #wordpress-ui (especially during office hours).

Travis Smith 12:40 am on July 19, 2012

Personally, I would really like to see WordPress be able to switch to Imagemagick via an option in Settings > Media if Imagemagick is recognized on the server. I have had a ton of requests for this in my development, especially for those photographers and journalists.
- Daryl Koopersmith 12:50 am on July 19, 2012
  
  We were discussing abstracting the image APIs to able to use either ImageMagick or GD in IRC last week and earlier today:
  
  nacin: I would really like someone to implement ImageMagick alongside our use of GD. If someone is willing to step up on that…
  
  Using ImageMagick would fall more on the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. / dev side of things, and less the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. side. That said, I’d love to see it happen.
Mel Choyce 1:58 am on July 19, 2012

I decided to take a shot at a really rough comp for uploading outside of the modal window. At some point we had talked about integrating media into the post page (especially adding media) so people can still work on their post while images are uploading.

Here’s a screen to show the media uploader on the post page.

Here’s a screen to show uploading images.

I’ve added a media button to the content editor to pull up the media modal window. Clicking on “Show Details” and/or “Edit Image” in the completed upload listing would also pull up the modal window.

An immediate problem I see: Putting media uploading on the post page takes up a lot of space. If we wanted to go this way, maybe we could consider putting it into a collapsible panel so users could show or hide the image uploader.
- Mel Choyce 3:01 am on July 19, 2012
  
  Err, one other thing I just realized is that as things are set up now, “show details” would have to expand on the post page so people could choose what image size they’re going to be inserting into their post (along with the other metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data). So maybe having “add to post” along with “show details/edit” wouldn’t work.
- Ben Huson 11:55 am on July 19, 2012
  
  I think probably in a collapsable panel would be a good idea and I would suggest maybe it could be below the main editable area?
  - José Marques 10:18 am on July 20, 2012
    
    Hello everyone (my first post here!).
    I like this concept, having an area to drop a bunch of files, collapse it and continue to compose your post. Maybe the collapsed area could have a progress indicator referring to the status of the uploads?
- MartyThornley 5:44 pm on July 19, 2012
  
  I agree with the problem of too much space. An in-page upload when dding a lot of images could take up a lot of real estate. I would love to see an overlay style box, similar to this quick mockup: http://grab.by/eR2C. I tried to style it after the existing tooltips.
  - Mel Choyce 7:58 pm on July 19, 2012
    
    The only problem with keeping a modal window is that users aren’t able to work & upload images at the same time. The less we interrupt our users’ workflows the better.
    - MartyThornley 8:03 pm on July 19, 2012
      
      How is this any less disruptive than thickbox? It covers the whole screen while you upload.
    - MartyThornley 8:04 pm on July 19, 2012
      
      Or you mean thickbox, modal, etc. vs in-page, where in-page could be working while you write?
      - Mel Choyce 8:15 pm on July 19, 2012
        
        Modal vs. in-page, so you can write your post as images are uploading. I personally like your modal window so far better than thickbox.
    - MartyThornley 8:23 pm on July 19, 2012
      
      Gotcha. Hadn’t thought of it that way. But there is talk of maybe processing it all in the background, so maybe it wouldn’t make a difference?
      - Mel Choyce 9:12 pm on July 19, 2012
        
        Didn’t know that! Definitely interested in seeing how that pans out. Thanks for the info.
Isaac Keyet 11:55 am on July 19, 2012

Talking about low-hanging fruit outside the modal view itself, I think something like this would be huge for new users:

http://f.cl.ly/items/3A1U0W0o221z3X1k0R0k/media-insert-button-sketch.png

If we’re going to tamper with TinyMCE in 3.5 though, it may make sense to instead group it with the other tools somehow.
Ben Huson 12:06 pm on July 19, 2012

A tiny little thing but something I have already semi-written a patch for…
When you launch the image edit popup from an image in the editor, it would be nice if you enter image dimensions if you could choose to lock the width/height aspect ratio.

Example: http://imgur.com/zZZOd
Andrea Rennick 3:08 pm on July 19, 2012

One thing that isn;t clear to users is that the action of uploading media while composing a post does create a relationship between that post and media, the “attachment” as you will.

No idea how to relay this to users – just thought it deserved a mention.
- Mel Choyce 9:23 pm on July 19, 2012
  
  I’ve seen this, too. I wonder if this can be changed by using better copy?
Cliff Seal 3:33 pm on July 19, 2012

I’d love to see multi-image insert and the general flow discussed and improved (i.e., https://core.trac.wordpress.org/ticket/7013). It’s a consistent snag for newer users who expect to be able to select and insert multiple images immediately after upload or from the Gallery/Media Library. Perhaps even more frustrating than this is that the modal window closes after insert. That’s unexpected, then they open the window again, only to be confused about where the images actually are now (because there’s no sign of them in the ‘From Computer’ tab for obvious reasons).

Some of these ideas have been addressed in the ‘Faster Image Insert’ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: https://wordpress.org/extend/plugins/faster-image-insert/screenshots/

I’m going to mock a couple of views up, but I’m thinking a combination of better tab labeling, good feedback while keeping the modal open (i.e. “Image was inserted.”), and multi-upload (gallery use notwithstanding) would make the flow and usability much better.

Isaac’s and Ben’s suggestions are much needed as well.
- MartyThornley 5:54 pm on July 19, 2012
  
  Definitely agree about the multi image insert. I actually wrote a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party for it that we use on PhotographyBlogSites. It has been working since before the new uploader and to my surprise worked just as well with the new drag and drop uploads. I never got around to adding it to the repository but I have attached it to that ticket (https://core.trac.wordpress.org/ticket/7013#comment:21). It was based, at least at the start on that Faster Image Insert plugin.
- Mel Choyce 8:13 pm on July 19, 2012
  
  +1. Re: multiple image insertion, I like the idea of checkboxes and an “insert all selected” button.
ovedmo 6:35 am on July 20, 2012

I think media files must group under media-categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.!!
- MartyThornley 8:55 pm on July 20, 2012
  
  Big +1 fro grouping of media. It fits into the process of how things are uploaded, attached, etc. Ideally you could upload images, use different ways of grouping ( tags, categories, etc. ) to group them. Then as you browse media, you could sort based on those. This could even be a way to approach galleries. If galleries were just a taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. or metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. info attached to images, you could add images to any number of “galleries” and then add galleries to any number of posts/pages.
lessbloat 2:27 am on July 24, 2012

Here are a couple of wireframes that I’ve been working on: http://davemart.in/?p=28

I’d love to hear your thoughts.
- MartyThornley 8:07 pm on July 24, 2012
  
  I had a couple initial thoughts and did some quick hackups of your mockups to help illustrate.
  
  1) Love the separation of upload/select workflows but I think it could add confusion by making the first step be a choice between those two and having the buttons trigger separate windows. If a user thinks Select is the right one but decides to upload, you would have to close the window and start again it looks like? I think a better way would be to keep the idea of one “Insert Media” button, then in the window, you can decide where it is coming from.
  
  2) Along the same lines, if the upload/select/remove buttons could all be similar wording and look, then it would help in a few areas – save space, save time/effort of design and coding (all would just say “Upload” not “Upload Background Image” or “Upload HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.” for example. ( see linked mockup of background image )
  
  3) The black boxes in the select workflow look too big if you ever have to scroll through lots of images. Maybe a much smaller grid so we can see at least 20-something images at a time and maybe a choice to expand to a larger view?
  
  4) The addition of seeing both select new and remove for the featured images is a great idea. Users tend to get confused about adding a new one right now when the only link visible is “Remove Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.”. I added a couple ideas towards making it more consistent and easy to use.
  
  Featured Images and background image mockups
  http://grab.by/eXda
  
  Media library
  http://grab.by/eXfm
GrahamArmfield 5:41 am on July 24, 2012

One key requirement for this moving forward would surely be to make the whole process keyboard accessible – for those users who don’t or can’t use a mouse. It’s an interesting challenge to be able to allow keyboard users to upload media and add title, alt text, choose size etc whilst at the same time saying “I want to insert the image here” ie at a point inside the TinyMCE editor. I’m trying to think of solutions but wanted to place the thought in people’s minds.