#gallery-43 {
margin: auto;
}
#gallery-43 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-43 img {
border: 2px solid #cfcfcf;
}
#gallery-43 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Media modal with sidebar exposed, iPhone 5
-
- Media modal with sidebar exposed, Nexus 5
Killing the sidebar in the mobile media modal seems the key to opening up a good design. Start there and ask questions about selection, particularly multi-select, and access to image detail views that feature full-width, easy-to-discern images. Selection and image views are the two most important things. They need to be readily accessible, and they must flow. Do we use a selection toggle like the media library’s grid view does? Are image views accessible during multi-select? The media library’s grid view does not make image views accessible during bulk selection, but interfaces like G+ make them accessible with a tap. Should the default action be selection or image detail view? Does this change in different flows? The primary multi-select flow is uploading images from the camera roll, which will likely use the selection mechanism provided by the Android and iOS file choosers. How does this affect our multi-select approach within the media modal?Gallery/camera roll interfaces are not the same as a modal inserting images and galleries into a post. How much can we borrow from these interfaces? Mobile, multi-select, access to big images. These must be solved in a flowful way.
The media library grid view avoids a sidebar via an attachment details modal.
#gallery-44 {
margin: auto;
}
#gallery-44 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-44 img {
border: 2px solid #cfcfcf;
}
#gallery-44 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Decently sized image on top.
-
- Swipe up to scroll down to the details.
Grid view handles multi-select via a toggle button.
#gallery-45 {
margin: auto;
}
#gallery-45 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-45 img {
border: 2px solid #cfcfcf;
}
#gallery-45 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
During multi-select, image detail views are unavailable. The G+ app on Kitkat handles this with an overlay on the image thumbnails.
#gallery-46 {
margin: auto;
}
#gallery-46 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-46 img {
border: 2px solid #cfcfcf;
}
#gallery-46 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- The multi-select toggle requires digging in a menu.
-
- Tap the overlays to see a big image.
-
- Selection is preserved in image view with the top-left overlay.
A mockup of the media modal with sidebar eliminated.