Distinguish between media types (photo/video/audio etc) in thumbnails

[Blaise Alleyne]

When viewing thumbnails of media, it's not clear whether any given
thumbnail is from a video clip or a still image until you click
through. It would be nice to signal the media type to users, in a
subtle way.

For example, on Flickr, a little play button appears in the corner
of thumbnails for video clips.
`https://secure.flickr.com/photos/balleyne/sets/72157607569123053/ <https://secure.flickr.com/photos/balleyne/sets/72157607569123053/>`_

Adding a small play icon of sorts to the corner of video thumbnails
seems like a pretty good idea to signal the difference between
photos and videos.

[Jef van Schendel]

Totally.

I think Joar talked about this once.

I've always liked Nautilus' movie reel thumbnails myself:
`http://imgur.com/40UWD <http://imgur.com/40UWD>`_ (random
screenshot from the web).

[Christopher Allan Webber]

The nautilus reel option looks nicer, but the play button option is
maybe more generic? One way we could do either is to allow the
thumbnails to optionally provide an SVG overlay, that way either is
possible?

[Will Kahn-Greene]

The original url for this bug was ​http://bugs.foocorp.net/issues/723 .

[Boris Bobrov]

How do you think, would this be ok for video icon? (see screen6.png in attachments for the same image)

[Aleksej]

Can you make them stick out of the thumbnails? Or, even better, not cover the image?

[Boris Bobrov]

Replying to Aleksej:

Can you make them stick out of the thumbnails? Or, even better, not cover the image?

Frankly I can't imagine how it should look. Could you draw it somehow?

[Aleksej]

a drawing, inspired by something like NoScript

[Aleksej]

I don't remember now how I imagined it, but here is a drawing inspired by something like NoScript or AdBlock.

[Aleksej]

Maybe putting it on a side of the caption (beginning? left? depending on the direction of the instance's main language?) would make the table easier to scan. Then alt text like "[Video]" could be a part of the caption, which is good for some ltr languages.

Another choice is whether the main type of an instance should have an icon or just a space (a configuration table would solve it).

Depends on the distinguishability of the icons.

[Aleksej]

With anything that does not stick out of the thumbnail, the thumbnail can contain it or something similar.

With a Nautilus-like reel, that allows images to look like videos
With an icon, the thumbnail can obscure it with only color, so the item can't be noticed by quickly scanning the table.

[Aleksej]

As for sticking out, maybe I meant this way.

[Matt Molyneaux]

If we're worried about images masquerading as video thumbnails, what about making the icon visually separate from the thumbnail? E.g. inline with the title as a "badge"

[Christopher Allan Webber]

I think the badge is a good option. Would someone be interested in making a mockup?

Aleksej: I think that functionally, the icon sticking out is a great route, though aesthetically it might give some inconsistent jaggediness to the interface.

Here's another suggestion: a light and mostly transparent play icon over the thumbnail that css transitions to more opaque when the mouse does a hover over. What do people think of that?