Media Grid: Thumbnail Resizing

Outside of a grid layout, there are a few other features that the Media Grid team has been discussing. Lets talk about one of these feature: Thumbnail Resizing.

Recap: Why a grid?
The entire purpose of moving towards a grid layout for the Media Library is to make it easier for you to manage your media — images, videos, audio, documents, and more. The library currently uses a standard “wp-list-table” view. (This actually could use some love, too.)

The Media Grid plugin currently replaces the tableview with the existing Media Manager grid, commonly seen while adding an image to your post.

Images and videos are visual files, and lend themselves to a thumbnail grid. Its easy to find an image by scrolling through a grid. There’s a lot of potential for extending previews to other types (like audio, pdf’s, etc), which would also benefit from the grid 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..

Resizing

While working on the Media Grid 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, I often found myself reference other file management tools. Programs like OS X’s Finder, Windows’ Explorer, Apple’s iPhone (Mac and iOSiOS The operating system used on iPhones and iPads.), and a few others. One pattern I noticed was that most of these applications offers some way to change the way you view “things” (files, images, documents, whatev’s) in your list. In my own experience, I find myself changing the thumbnail size while browsing a bunch of images on my computer:

Finder’s default thumbnail size.

Just move this little slider…

…and boom, larger icons!

The larger grid view really shines when browsing more details images, or lots of similar images. Its also a great way to just look through your images in more detail, without having to jump to a full size view for each one.

The Media Grid plugin currently has some thumbnail size options. The first iteration used a slider and animated the thumbnails as they changed size, right in front of your eyes! It was cool… at first. Then it quickly got annoying.

A few more iterations

The animation was jumpy, and more distracting than anything else. I nixed the animation, but the slider still felt unnatural — there aren’t any other sliders in wp-admin. I decided to keep things simple, and replaced the slider with a three buttons: Small, Medium, Large. After another few weeks of using this, I found myself using Small and Medium often; Large was rarely used. So I trimmed the options down to simply: Small and Large. This is where’re at in the current plugin:

(I wrote about some of the above earlier, over on the Media Grid team blog.)

Now what?

What do you think about the size options? Are the helpful, or unnecessary bloat? Or somewhere in between?

What do you think about the two (Small, Large) options?

Is the straight-forward label toggle a good UI? What about icons, like this:

#media-grid