#26650 closed task (blessed) (fixed)
Replace media file type icons with Dashicons
Reported by: | wonderboymusic | Owned by: | nacin |
---|---|---|---|
Milestone: | 3.9 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Media | Keywords: | |
Focuses: | ui | Cc: |
Description
wp-includes/images/crystal/audio.png - attached. It's pretty sad and not as good-looking as the rest of the admin.
Attachments (9)
Change History (64)
#1
@
11 years ago
- Summary changed from MP6ify the Audio icon/image to MP6ify the Audio icon/image [Dashicons]
#2
@
11 years ago
kitchin — I've just replied to the links you've posted. As an FYI, this trac ticket is specifically for wonderboymusic's icon request. For additional icon requests, please create new trac tickets.
wonderboymusic — would we be able to use .dashicons-format-audio for this? https://cloudup.com/cLDPEOhFL2R
#3
@
11 years ago
Shouldn't we replace all of the "crystal" icons with Dashicons in one go? These are all used as thumbnails for various non-image file types in the media library. Complete list:
- archive.png (.zip, etc.)
- audio.png
- code.png
- default.png (blank page, for unknown types)
- document.png (.pdf, .doc, etc.)
- interactive.png (.ppt, etc.)
- spreadsheet.png
- text.png
- video.png
Seems pretty silly to change one but not the rest since these are a set. Might be better to create these as a distinct sub-set within Dashicons instead of double-using the audio post format icon.
It might make sense to do this as part of a media library refresh project, potentially with the Media Library Grid View feature plugin.
#4
@
11 years ago
Yes - Audio just caught my eye first. I would love for someone to take the wheels here.
#5
@
11 years ago
Ah, couldn't quite remember the context for these. Since it's a suite of filetypes, it makes sense to do another round of dashicons for them. I'll take a look at them. (cc empireoflight)
#6
@
11 years ago
- Summary changed from MP6ify the Audio icon/image [Dashicons] to Replace media file type icons with Dashicons
#8
@
11 years ago
First shot at designing these icons:
From left to right: Archive, Audio, Code, Default, Document, Interactive (option 1), Interactive (option 2), Spreadsheet, Text, Video.
#9
@
11 years ago
These look great! The code brackets may need to be a little thicker when compared to the other icons.
Archive doesn't scream archive to me. Maybe a zipper concept? Interactive is also a bit weird, I can't place it. Charts seem to be pretty common for spreadsheet software, and I presume a table of "text" was tried? Otherwise the chart could be interactive.
Then again, I'm mot even sure what interactive means. Just put a question mark on the box in the archive icon and you have your Flash. :-)
#10
@
11 years ago
I agree, these are great! They maintain the character of the current icons in a good way while flattening out and modernizing.
I think the pie chart would work better for interactive (considering it's used for powerpoints - not sure if it's used for anything else). As nacin said, maybe a table or grid. All spreadsheets have that type of content/layout, but not all spreadsheets have graphs, so it works more universally that way.
The default icon feels heavy and maybe even broken alongside the others (as in, users might think that part of the graphic didn't load or something, since it's the same outline as the others), I wonder if adding question mark might work? It could be fine blank, though, it's just very solid, while the others have a lot of void space.
#11
follow-up:
↓ 12
@
11 years ago
The code brackets may need to be a little thicker when compared to the other icons.
Good call — they do look a little fragile.
Archive doesn't scream archive to me. Maybe a zipper concept?
Sure, I'll give it a try.
Interactive is also a bit weird, I can't place it.
Yeah, it was definitely the one I struggled with most. The "hand" version is trying to indicate tough or interactivity via physical manipulation, but it ended up just looking like an awkward pointer. The starburst was trying to make the whole thing a little more abstract, but that also wasn't super successful.
I didn't realize it was specifically used for powerpoint presentations, so that helps.
Otherwise the chart could be interactive.
I think the pie chart would work better for interactive
Unsure about using a chart as interactive, since to me it's so tied to math and calculations (which I tend to associate with spreadsheets), so how about something more like this for interactive? https://cloudup.com/c9aJrDOnaVb
I presume a table of "text" was tried?
As nacin said, maybe a table or grid.
Yeah, the problem I had with using a table/grid was trying to get even spacing while keeping whole pixel increments. See this, for example: https://cloudup.com/iTnvFAJld9d
This one's not so bad, though: https://cloudup.com/i75e2XkR3br
The default icon feels heavy and maybe even broken alongside the others (as in, users might think that part of the graphic didn't load or something, since it's the same outline as the others) I wonder if adding question mark might work?
I'm not sure how often people will be seeing all of these icons at once in their media libraries, so I'm not super worried about it looking broken, especially since the current "crystal" icon is also a blank piece of paper.
Do we know what kinds of files show up with the "default" icon? I don't actually think I've ever encountered it.
Related — why do we differentiate between text and document formats?
Just put a question mark on the box in the archive icon and you have your Flash. :-)
Hah!
#12
in reply to:
↑ 11
;
follow-up:
↓ 14
@
11 years ago
Replying to melchoyce:
Unsure about using a chart as interactive, since to me it's so tied to math and calculations (which I tend to associate with spreadsheets), so how about something more like this for interactive? https://cloudup.com/c9aJrDOnaVb
The one on the right is awesome. Also looks like a face, not sure it that's intentional but it adds some character.
Yeah, the problem I had with using a table/grid was trying to get even spacing while keeping whole pixel increments. See this, for example: https://cloudup.com/iTnvFAJld9d
This one's not so bad, though: https://cloudup.com/i75e2XkR3br
I was going to suggest numbers or something also, but that second one looks kind of like a calculator anyway, so I think that works (can maybe be interpreted as table or calculator).
Do we know what kinds of files show up with the "default" icon? I don't actually think I've ever encountered it.
Everything not covered by another icon. Different sites will have different things, but they will definitely come up. Blank is probably fine, but maybe it would help to just put a big void square in the middle? It just feels out of place with the others, and being so solid it's different from the old icons.
Related — why do we differentiate between text and document formats?
I don't know why you'd ever upload a text file (.txt) instead of just putting that in the content (actually, I just found a couple text files I uploaded to a P2, but random use-case). But they're fundamentally different file formats in terms of being plaintext, versus binary formats that have to be downloaded to be opened.
#13
@
11 years ago
Agreed with the one on the right for https://cloudup.com/c9aJrDOnaVb.
https://cloudup.com/i75e2XkR3br works, though to make it feel less like a calculator, what if the table kept going up to the top, like Document and Text ones?
#14
in reply to:
↑ 12
@
11 years ago
Replying to celloexpressions:
The one on the right is awesome. Also looks like a face, not sure it that's intentional but it adds some character.
Hah! It totally does.
Blank is probably fine, but maybe it would help to just put a big void square in the middle? It just feels out of place with the others, and being so solid it's different from the old icons.
I'll play around with some generic shapes inside the paper to make it feel less stark.
But they're fundamentally different file formats in terms of being plaintext, versus binary formats that have to be downloaded to be opened.
Gotcha, thanks.
Replying to nacin:
https://cloudup.com/i75e2XkR3br works, though to make it feel less like a calculator, what if the table kept going up to the top, like Document and Text ones?
Sure, I'll give that a try.
#15
follow-up:
↓ 16
@
11 years ago
other icon considerations: "playlist" and "video playlist-like thing" - do they use the same icons as audio/video?
#16
in reply to:
↑ 15
@
11 years ago
Replying to wonderboymusic:
other icon considerations: "playlist" and "video playlist-like thing" - do they use the same icons as audio/video?
This ticket was mentioned in IRC in #wordpress-dev by ocean90. View the logs.
11 years ago
#18
@
11 years ago
In the media uploader/manager gallery-edit state, the Remove button is still an image, rather than the appropriate dashicon. Is this the right place to mention it?
#19
@
11 years ago
Above I've attached options for the three troublesome icons — archive, interactive, and spreadsheet. Does one from each of these groups work?
#20
@
11 years ago
I like the first one for archive (it's close to what we have now, and I'm not sure a zipper concept is clear enough for international packages), the third one for interactive, and the third one for spreadsheet.
#21
@
11 years ago
Archive: Of them, I like the box best too, but it looks too much just like a square. Maybe a handle or open flaps would do? It might lose something when shrunken though.
Interactive: Fourth. I can see someone with a pointer standing beside it now :)
Spreadsheet: Third. (The pie chart I adore, but it'd make me thing WP learned how to do graphs!)
This ticket was mentioned in IRC in #wordpress-dev by melchoyce. View the logs.
11 years ago
#23
@
11 years ago
I'd vote: 1st archive, but could use some tweaking, 4th interactive, 3rd spreadsheet. The pie chart could reasonably mean interactive, not spreadsheet, since the PowerPoint 2013 icon mostly consists of a pie chart, so we should avoid using it.
#25
@
11 years ago
Alternately... we take the imagery from our new archive widget icon, and do the above, Shot 2014-03-06 at 12.15.38 AM.png. That would allow us to keep things consistent.
#26
@
11 years ago
media-icon-previews.png shows the most recent versions of the media icons, all together.
#27
follow-up:
↓ 29
@
11 years ago
Really like that last zipper, but the archive one is probably the best option overall.
Haha, was just about to ask for the full set. Looking at the whole collection, we should un-round or re-think the video icon, as most of these tend to have straight corners (only exception being audio).
#28
@
11 years ago
I really like the last zipper but not sure if everybody will understand what it means. Personally prefer the box but that's only because of growing up with the idea of 'packages' to store things into.
#29
in reply to:
↑ 27
@
11 years ago
Replying to celloexpressions:
Looking at the whole collection, we should un-round or re-think the video icon, as most of these tend to have straight corners (only exception being audio).
Do you think it really sticks out? I was hoping to keep these new icons true to their originals to keep the whole set a little more cohesive.
#31
@
11 years ago
Looking at the original icon set, I don't think most of these are similar to their original versions, and I think that's okay. Most important is making sure we keep the new icons looking cohesive with each other and WordPress more generally. Interestingly, the old icons aren't very cohesive.
(since those aren't in the same order, a good test would be to have a few people guess what each icon means with the original and new ones)
So I think the video icon could use some work, maybe make it more like the original one with the "film reel" concept? Or maybe un-rounding the corners is enough. Other than that, these are looking pretty solid. Other question is how they look in context; next step might be some mockups (or a patch) showing these alongside image thumbnails in the media modal.
#32
@
11 years ago
FWIW, the new archive icon looks more like a birdhouse than a box to me :) Could we perhaps reduce the top a bit? Or change the angle, like in https://i.cloudup.com/R7AGhXrWmz.png.
#33
@
11 years ago
I just showed the attachment media-icon-previews.png to two non-technie people to see if they could identify the icons' meanings.
These were their responses (in order that they appear in the attachment):
- Birdhouse,
- Music,
- Math, (less-than and greater-than)
- ????,
- Putting pictures into a document,
- Television,
- MS Excel,
- MS Word,
- Video Camera
I can see these confusing a lot of people.
#34
@
11 years ago
I also asked someone. I just told them they represented files on a computer.
- Not sure... A mailbox?
- Music
- No idea
- No idea
- A PDF
- Video
- Excel
- Text
- Video
So it looks like the archive and "interactive" icons are unclear. The one for code is okay of course, it just doesn't mean anything to people who're not used to it.
#35
@
11 years ago
What might be better though is </> or even bits. I think bits would be super clear.
#36
follow-up:
↓ 37
@
11 years ago
Looking at the original icon set, I don't think most of these are similar to their original versions, and I think that's okay.
Sorry, I was referring to the original dashicons some of these icons are being borrowed from: .dashicons-video-alt2
, .dashicons-format-audio
, .dashicons-archive
, and .dashicons-editor-code
. I've kept the icons largely the same when co-opting them for the media icons. The only icon that really changed was the code icon, which I made thicker so it's easier to see at a smaller size (since it's now being contained inside of a rectangle).
I'm not super concerned about mimicking the original crystal icon set, but I am concerned that if we're re-using the same concepts that we've established elsewhere in our iconography (like video, code, audio, and archives), we should keep that iconography consistent.
One thing to remember is these icons are acting as supplementary information. Testing the icons alone doesn't take context into account. You're never going to just see the icons by themselves and need to know what they mean — they act as a backdrop to the name and extension of the file that has been uploaded to your media library: https://cloudup.com/cVtNeKg8Ipw I would even say that right now, the crystal icons are too distracting and too prominent — we should tone down the new icons (maybe just drop the opacity?) so they don't conflict with the filename.
Another idea could be to remove the icons from the "document" container entirely and just use existing media classes for icons like audio, archive, code, and video. That would also allow us to use .dashicons-format-video
, which wasn't possible to use within the document container because of size constraints. We also have .dashicons-text
we could use for text files, and I could work off of that icon to create document and spreadsheet. Interactive could use something like .dashicons-slides
or .dashicons-analytics
, or I could just take the screen/presentation icon made earlier in this ticket and use that without the document container. (I still haven't figured out what kinds of files use the generic "document" icon.)
#37
in reply to:
↑ 36
@
11 years ago
Replying to melchoyce:
I still haven't figured out what kinds of files use the generic "document" icon.
'image' => array( 'jpg', 'jpeg', 'jpe', 'gif', 'png', 'bmp', 'tif', 'tiff', 'ico' ), 'audio' => array( 'aac', 'ac3', 'aif', 'aiff', 'm3a', 'm4a', 'm4b', 'mka', 'mp1', 'mp2', 'mp3', 'ogg', 'oga', 'ram', 'wav', 'wma' ), 'video' => array( 'asf', 'avi', 'divx', 'dv', 'flv', 'm4v', 'mkv', 'mov', 'mp4', 'mpeg', 'mpg', 'mpv', 'ogm', 'ogv', 'qt', 'rm', 'vob', 'wmv' ), 'document' => array( 'doc', 'docx', 'docm', 'dotm', 'odt', 'pages', 'pdf', 'rtf', 'wp', 'wpd' ), 'spreadsheet' => array( 'numbers', 'ods', 'xls', 'xlsx', 'xlsm', 'xlsb' ), 'interactive' => array( 'swf', 'key', 'ppt', 'pptx', 'pptm', 'pps', 'ppsx', 'ppsm', 'sldx', 'sldm', 'odp' ), 'text' => array( 'asc', 'csv', 'tsv', 'txt' ), 'archive' => array( 'bz2', 'cab', 'dmg', 'gz', 'rar', 'sea', 'sit', 'sqx', 'tar', 'tgz', 'zip', '7z' ), 'code' => array( 'css', 'htm', 'html', 'php', 'js' ),
#38
follow-up:
↓ 39
@
11 years ago
[Looks like 'default' isn't used.] Probably it is somewhere in an else statement.
#39
in reply to:
↑ 38
;
follow-ups:
↓ 40
↓ 43
@
11 years ago
Replying to avryl:
Looks like 'default' isn't used.
That's what I was wondering. Let's drop it entirely, then.
#40
in reply to:
↑ 39
@
11 years ago
Replying to melchoyce:
That's what I was wondering. Let's drop it entirely, then.
Hm, wait, maybe I'm overlooking it.
#41
@
11 years ago
It is used I think: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/post.php#L4452
#43
in reply to:
↑ 39
@
11 years ago
Replying to melchoyce:
Replying to avryl:
Looks like 'default' isn't used.
That's what I was wondering. Let's drop it entirely, then.
Default is used for any other filetype. There are tons of proprietary file types that you may need to upload depending on your field of work (especially when using WordPress for an internal site); some I use frequently include: .mus, .asv, .m, .sbd, .rvt, .dwg, .gx, .mx
, and others. Devs can tweak filters to allow any of these to be uploaded to WordPress, and the default icon gets used for them then. Though it's not super common, there are situations where it makes sense to upload these file formats to public or private sites (note that .psd
is another unspecified format).
These can be literally anything, so the icon needs to be generic, but it is basically a placeholder. Of the formats listed above, they range from music notation files to structural analysis files, to architectural design files. The old crystal icon looks like it's inspired by Windows' generic/unknown file format icon.
In terms of toning the icons down to fit within their context, I think tweaking the color/opacity would be good (I was assuming they weren't intended to stay black). One benefit to the document container is that it unifies these icons as a set, while potentially allowing them to be similar to other related Dashicons.
#44
@
11 years ago
- I agree about the current archive icon looking like a birdhouse or mailbox. Sergey's suggestion in comment:32 might be the way to go.
- Could we explore a more generic icon for audio? Not all audio is music, after all.
- Also, I like @avryl's idea in comment:35 about using
</>
instead of<>
.
This ticket was mentioned in IRC in #wordpress-dev by melchoyce. View the logs.
11 years ago
#46
@
11 years ago
- Owner set to nacin
- Status changed from new to assigned
This is yours until you say otherwise
This ticket was mentioned in IRC in #wordpress-dev by wonderboymusic. View the logs.
11 years ago
#50
follow-up:
↓ 51
@
11 years ago
Not sure we can use actual Dashicons via the font for these, since we can't use :before/:after on images. Still looking into it, but if not, will get the images in soon.
#51
in reply to:
↑ 50
@
11 years ago
Replying to helen:
Not sure we can use actual Dashicons via the font for these, since we can't use :before/:after on images. Still looking into it, but if not, will get the images in soon.
I haven't looked at the code (because I have no idea where it is), but can we target the container the image is inside instead of the image itself?
#52
follow-up:
↓ 53
@
11 years ago
- Keywords needs-patch removed
- Resolution set to fixed
- Status changed from assigned to closed
Fixed in [27726].
#53
in reply to:
↑ 52
;
follow-up:
↓ 54
@
11 years ago
Replying to helen:
Fixed in [27726].
Why PNGs and not SVG files? SVG would render at full resolution on retina displays and has pretty broad browser support (save ie8, of course).
http://caniuse.com/#feat=svg-img
In lieu of SVG, making the PNGs 2x the current size would be a workaround (sharp on retina, scaled down on non-retina).
Oddly enough I was solving the same issue, at about the same time, via a plugin:
http://wordpress.org/plugins/media-thumbnail-enlarger/
#54
in reply to:
↑ 53
@
11 years ago
Replying to nickciske:
Why PNGs and not SVG files?
Mostly to keep this as seamless as possible this late in the game. Icons can be shown in any number of contexts, including themes, and people may have existing size expectations. Width and height are determined by a file read, and searches through an enumerated list of extensions that does not include .svg. We *could* include SVG and do some magic around dimensions, but since it's just XML (and therefore not necessarily secure), and the path to mime type icons can be filtered, I don't feel good about opening that up right now.
Definitely open to continuing to make this better in future releases, though. In a new ticket. :)
Not sure where the Dashicons will be maintained, I guess here.
https://github.com/melchoyce/dashicons/issues/8
http://wordpress.org/support/topic/documentation-for-codexwordpressorg