Upload Image button still too subtle in Editor

[parisvega]

Why not make the upload image text/icon button look like an actual button. I commonly get asked by clients who are staring at the editor, "How do I upload images?". Let's make it obvious. Some simple button styling would do the trick. See more of my reasoning here:
​http://www.parisvega.com/if-ya-wanna-click-it-ya-better-put-a-button-it/

Add button class to the upload link

Attached a simple patch to add the button class to that link, making it into a button. May need more styling.

The problem is that many plugins add other buttons there that are styled like the (old) upload buttons, i.e. link with 16x16px image. Perhaps the way to make these more noticeable is to style them more like the editor buttons (20x20px squares with border shadow, etc.).

There are currently two major UI overhauls on the roadmap of 3.5:

• #21390: the Upload/Insert media revamp driven by koopersmith.
• #21598: a new set of buttons coming from the UI team.

I believe it would make sense to update the Upload/Insert button at this occasion.

Btw, koopersmith has styled this link as a button in the first pages of the wireframes at ​http://make.wordpress.org/ui/2012/07/30/media-wireframes/

The question remains: what happens to other icons that appear in that location? For example, Grunion via Jetpack.

Replying to helenyhou:

The question remains: what happens to other icons that appear in that location? For example, Grunion via Jetpack.

They can be placed next to our big button. We should be able to do this pretty gracefully thanks to the media_buttons hooks.

The button itself looks good. But the layout poses a couple of design challenges:

• Overall, it's looking pretty cluttered.
• Top of the button is higher than the top of the tabs on the right
• Additional plugin buttons look out of place. We could force them all to show up with the class of button, but that looks kind of strange.
• Using the button-small class looks too squished.

Here's a screen using button-small:

and with new TinyMCE button styles:

Worst-case scenario with line-breaking URL

Another example where the interface gets really crowded, as it happens when the URL string is long and the window width narrow.

I think that the larger button works better in such a case. Anyway, I would say that the worst offenders in terms of visual bloat are the URL preview, and the TinyMCE buttons.

The Upload/Insert button doesn't make things worse IMO, quite the opposite: having one large item here offers a stable anchor for the eye, it makes the interface more readable.

I think it would be more consistent with the rest of the UI to have the icon on the left of the "Upload/Insert" text rather than the right.

Make media link a button, and puts icon on the left

Attached patch that makes Upload/Insert a button and puts the icon to the left side of the text. I also added a bit more white space so the button isn't as cramped.

Replying to downstairsdev:

Attached patch that makes Upload/Insert a button and puts the icon to the left side of the text. I also added a bit more white space so the button isn't as cramped.

Definitely looks/feels a lot better with the icon on the left.

I hope this is the appropriate place to raise my question. Is it even necessary to have "Upload/Insert" there? Space could be saved with "Add Media", "Media", "Add", or just nothing but the image. I personally think "Add Media" would make more sense than the current text, given the main (left) nav label, and would help shrink this button a bit.

+1 to both icon on the left and a change to "Add Media"

Replying to krogsgard:

Space could be saved with "Add Media", "Media", "Add", or just nothing but the image...

Agreed. I think the wording "Add Media" makes really good sense here; saves space while supporting the goal of making it more obvious what the button does. Good point re: relating to the lefthand nav labels.

Food for thought ...

Add Media: ​http://cl.ly/image/0Y0U0A3F2n0b

vs

Upload/Insert: ​http://cl.ly/image/3P2S430b3Z3S

I seem to recall it used to say Add Media a few versions ago, but I agree that it ties better with "Media Library", "Add Media" et al.

Replying to DrewAPicture:

Food for thought ...

Add Media: ​http://cl.ly/image/0Y0U0A3F2n0b

vs

Upload/Insert: ​http://cl.ly/image/3P2S430b3Z3S

I seem to recall it used to say Add Media a few versions ago, but I agree that it ties better with "Media Library", "Add Media" et al.

I thought more about this last night. Would it be too bold to use a plus ( + ) sign next to the icon instead of words? I personally think it could work. Otherwise, I still think "Add Media" is better than "Upload/Insert"

Replying to krogsgard:

Otherwise, I still think "Add Media" is better than "Upload/Insert"

The problem is that that label needs to apply to whatever icon is showing on the right hand side for third parties, can't guarantee "add" is going to make sense for all of them - and even if it did, it would be a lot of screen space.

I think it'd be better to keep it simple and only turn the icon into something that looks more like a button in this iteration, more can be done in 3.6.

As an update, here's the existing style (with a few minor tweaks in firebug):

Are we happy with this design? Anything else we can do to improve it?

I like this one - and I'd love to see something get committed while we're finishing up with buttons!

I like it. Maybe the icon could go a tiny bit down to align it with the U?

Replying to toscho:

Maybe the icon could go a tiny bit down to align it with the U?

I thought that too, but I just tried moving it down 1px and then the musical notes felt too low.

I prefer as is.

19956.2.diff is an attempt at a cross browser solution. Here's what it looks like in various browsers:

Line-wrap issue

With the current beta at [22252], I notice that when the permalink wraps, there's an overlap of buttons (the "Get Shortlink" is hidden). This also occurs with 19956.2.diff applied. Tested in OSX/Firefox 16.

Replying to tar.gz:

With the current beta at [22252], I notice that when the permalink wraps, there's an overlap of buttons (the "Get Shortlink" is hidden).

I think this has actually always happened, it just wasn't as noticeable before, and definitely isn't related to the upload image link. Probably worth a new ticket. Related: #22184

Replying to helenyhou:

I think this has actually always happened, it just wasn't as noticeable before, and definitely isn't related to the upload image link. Probably worth a new ticket. Related: #22184

This didn't happen with previous versions, see my earlier screen capture at comment:11. You can see that at that earlier stage, the wrapped permalink was pushing the button down.

Sometimes I'm wrong - don't have a 3.4.2 install handy at the moment (your screenshot was from trunk), so I definitely could be. Still, new ticket material, because it is not related to the upload image link at all.

Replying to helenyhou:

Actually, you are totally correct, it always happened - I forgot that my picture above was just a mockup, not an actual screenshot.

The only reason it works better in 3.4.2 is that there's a lot of whitespace under the permalink, so the wrapping doesn't cover the media button. So I opened a new ticket, #22298.

In 22485:

Media: Rename the "Beta Media" button to "Add Media". fixes #19956, see #21390.

Translations. Oops.

In 22486:

Translate. see #19956.