Add UI for gallery include/exclude

[bobbravo2]

Tired of manually adding include/exclude ID's to gallery shortcodes? - I am!

I have made a patch that adds an intuitive interface to the gallery options tab of media.php.
Patch adds a field to choose the image size, and also a drop down interface to select the attachments to include/exclude.

In short

• Select Image Size
• Select all/exclude/include
• On exclude/include, a multi select box to choose the media items by title appears

These options get added to the shortcode that is returned to TinyMCE, resulting in a much better user experience for those that don't know how to find an attachment ID to exclude from a gallery.

This is definitely an improvement. Thanks for stepping up!

However, multi-select boxes are... not so user friendly. We should use checkboxes instead.

Screenshot of what it looks like: Screen Shot 2012-03-18 at 9.07.54 PM.png​

Multi-selects are pretty terrible UI/UX, but definitely agreed that whatever direction any media gallery enhancements take should account for an actual include/exclude UI. +1 to scribu's suggestion of checkboxes for this direction.

There are several plugins to solve this problem (with checkboxes):

​http://wordpress.org/extend/plugins/faster-image-insert/screenshots/

​http://wordpress.org/extend/plugins/multiple-galleries/screenshots/

Replying to scribu:

This is definitely an improvement. Thanks for stepping up!

However, multi-select boxes are... not so user friendly. We should use checkboxes instead.

Agreed, I was on the fence with this one.The one thought I had was adding a description after the mult-select that says "Press CTRL to select multiple." But checkboxes eliminate the problem entirely. I'll make the next patch use checkboxes instead!

Replying to pavelevap:
Thanks for these references. I'll definitely use these suggestions for the next patch.

Checkboxes for include/exclude

Won't having the checkboxes in a single row get messy when you have 30+ images in the gallery?

They float left, and the titles are the <label> for the checkbox:

Added float wrapper

Preview of gallery with 30+ images

I think that screenshot might actually explain why it doesn't currently work this way. That kind of workflow and UI doesn't seem to work out well with many images and variable titles.

Also, changing title to be a little more specific.

Adding those checkboxes to the left of each image would fix the problem of identifying images, but it would be disconnected from the other Gallery Settings UI.

Replying to helenyhou:

I think that screenshot might actually explain why it doesn't currently work this way. That kind of workflow and UI doesn't seem to work out well with many images and variable titles.

This was to show how the UI handles 60+ images, the default view is to have it set to all, and the checkboxes hidden.

Also, changing title to be a little more specific.

Thx!

Replying to scribu:
I'm worried that it disconnects the core focus of this component of the UI, modifying the display of the gallery. Having checkboxes per-image implies a bulk management action on the image set.

Replying to scribu:

Adding those checkboxes to the left of each image would fix the problem of identifying images, but it would be disconnected from the other Gallery Settings UI.

My thoughts exactly. This solution only shows the checkboxes when the user wants to show/hide specific images.

Instead of single checkboxes we could use a thumbnail of the image with a checkbox on it.

But then you would have two thumbnails for each image.

Plus, it's still using Thickbox. Iteration is what we want and all, but wouldn't it be nice not to shove more stuff in there? Seems like a thumbnail + checkbox for include/exclude could work as a general concept, though.

Then my question becomes - what happens if/when there are multiple galleries in a post? And what would happen to a user wanting to later edit that particular gallery but the shortcode is just numbers, so they don't know what to remove or add?

Example: Somebody has a single lengthy post with multiple gallery areas interspersed between the paragraphs, each one containing images attached to that post but a different subset (as in each one using include). They upload a new photo and want to add it to one of the galleries. Shouldn't they be able to go back and edit that particular insertion of the gallery shortcode and use this UI?

Replying to helenyhou:

Then my question becomes - what happens if/when there are multiple galleries in a post? And what would happen to a user wanting to later edit that particular gallery but the shortcode is just numbers, so they don't know what to remove or add?

Example: Somebody has a single lengthy post with multiple gallery areas interspersed between the paragraphs, each one containing images attached to that post but a different subset (as in each one using include). They upload a new photo and want to add it to one of the galleries. Shouldn't they be able to go back and edit that particular insertion of the gallery shortcode and use this UI?

Yes, they can!

Replying to scribu:

But then you would have two thumbnails for each image.

How about having a jquery.tooltip that shows the thumbnail on hovering the <label>?

Replying to helenyhou:

Then my question becomes - what happens if/when there are multiple galleries in a post? And what would happen to a user wanting to later edit that particular gallery but the shortcode is just numbers, so they don't know what to remove or add?

That is a problem that I think should be addressed, but it's separate from this ticket. The problem you described already exists for anyone using multiple galleries with includes/excludes. I don't think bobbravo2 is trying to solve that issue with this patch, but instead is just solving the problem of not being able to include/exclude images *at all* without digging to find the IDs.

I'd love to tackle that problem in a second ticket - I think forcing one-gallery-per-post really hampers the experience of posting galleries.

I feel that the checkboxes for inclusion / exclusion in the current (single) gallery actually belongs in the media list as a new column. The context is clear - we're in the "Gallery" tab, after all - the list of images being shown corresponds to the list of images that would be displayed with the [gallery] shortcode with no further options. I would not automatically infer some kind of "batch" operation upon the checked items, particularly if some care were taken about the nomenclature in the column heading, for example "Include in Gallery".

Currently there's tons of room in the UI for such a column. See screenshot.

I have long had an issue with the "Show" link, because it sounds like it has something to do with the Gallery. It ought to be changed to "details" anyway, even if we don't move forward with this additional column.

Current Media Gallery screen, showing lots of room in the columns for an additional Inclusion/Exclusion checkbox

Replying to TomAuger:

I feel that the checkboxes for inclusion / exclusion in the current (single) gallery actually belongs in the media list as a new column. The context is clear - we're in the "Gallery" tab, after all - the list of images being shown corresponds to the list of images that would be displayed with the [gallery] shortcode with no further options. I would not automatically infer some kind of "batch" operation upon the checked items, particularly if some care were taken about the nomenclature in the column heading, for example "Include in Gallery".

Currently there's tons of room in the UI for such a column. See screenshot.

I have long had an issue with the "Show" link, because it sounds like it has something to do with the Gallery. It ought to be changed to "details" anyway, even if we don't move forward with this additional column.

Tom — great suggestions! I agree with you, and appreciate you're perspective. It makes much more sense for this patch to streamline the UX of the Gallery tab.

I have a couple of questions:

Does the gallery settings page trigger the checkboxes to appear?

Or, are the checkboxes always present, and we just make the interface a radio button that selects wether the checkboxes are an include or exclude?

In either case - how do you handle labeling what the checkboxes do?

This functionality is exactly what I'm looking for. I hope it gets added. (following)
I think "galleries" could even be its own sub-menu item under Media (i.e. disconnected from any post). We could create galleries and then use the media button to pick which pre-created gallery we want to insert.
In the gallery manager sub-menu item, it could tell you which posts each gallery is added to so you know if you want to edit/delete it without doing something you regret.

Thinking what's happening with media in 3.5 (#21390) takes care of the include part, and exclude may not be as relevant anymore.

Yes, 3.5's media uploader and gallery checkboxes are cool, but 3.5 doesn't include a "gallery creator" outside of a post. I added a comment on the ticket you linked to, expanding this thought.

Replying to cliffpaulick:

Yes, 3.5's media uploader and gallery checkboxes are cool, but 3.5 doesn't include a "gallery creator" outside of a post.

That sounds like something outside of both this ticket and the work for 3.5, which is focused on the overlay workflow when editing a post. Not saying that it's not an idea for the future, but I don't know that they're really all that related.

Replying to helenyhou:

Thinking what's happening with media in 3.5 (#21390) takes care of the include part, and exclude may not be as relevant anymore.

Agreed. Closing this ticket.

I have to reopen this ticket, because exclude part is also relevant in this case. Examples:

1) Many users upload several photos + featured image to one post. They set up featured image and then they want to show all other uploaded pictures in the end of post. But current modal window does not allow exclude one image from the whole gallery.

2) When somebody uploads 15 photos to one post, there is no "Gallery" tab which could diplay all images uploaded (attached) to this post. To display all these images in post I have to select (and click) every uploaded image? Clicking 15 times is not a good user experience, in WP 3.4.x they could only simply select the whole Gallery (and all relevant images)...

3) Upload 10 photos, select all of them and insert them into post. Come back after two months and several other posts. Upload another new relevant photo which you want to add to this old post. This new image is not automatically associated with current gallery in post and you have to add it manually.

I do not understand why there is no "Gallery" tab in current modal window and relationships between posts and uploaded images are degraded? We have "Attached to" column in Media library, but it is not possible to see somewhere which media are attached?

We had several questions from our users which tested 3.5. They like new modal window, but it is not possible to work as usual and removing "Gallery" tab is a pain and MAJOR user experince problem, I guess...

Related: #22439

pavelevap, I think your concerns can be answered with

• A UI filter, similar to "Show only images" or "Show audio files", that would be "Show uploads to this post". (None of these are in core at the moment.)
• Some kind of indication that an image was chosen as the featured image for the current post, perhaps only when viewing the this-post-only filter. As 3.5's goal was to separate distinct workflows, this will not happen now. But if featured images get some kind of play in the future in the main media modal (something DrewAPicture has been pushing; he may have some ticket references), I believe this makes solid sense.
• When you upload 15 images, all of them immediately become selected by default. Of course, there is no way to revive such a multi-select later without individual clicks. Some kind of "Select all" and/or shift+click and/or drag-to-select functionality. This was discussed but won't make v1.

Assigning to koopersmith to answer/address further.

pavelevap, regarding the "Gallery" tab that would display the attached media, I believe that this is now "plugin territory".

Having direct access to attached media is essential for my workflow as well, so I ​drafted a mockup here for a plugin, and I'm now looking for people willing to help implement it.

Related: #22488

Nacin and tar.gz's comments are both accurate. The core gallery UI is now focused on editing galleries with explicitly added images (rather than using all the images uploaded to the post). The UI will successfully read a gallery with include/exclude parameters, but will always print a gallery shortcode with the ids parameter when updated.

• A UI filter, similar to "Show only images" or "Show audio files", that would be "Show uploads to this post". (None of these are in core at the moment.)

See #22514.

• Some kind of indication that an image was chosen as the featured image for the current post, perhaps only when viewing the this-post-only filter. As 3.5's goal was to separate distinct workflows, this will not happen now. But if featured images get some kind of play in the future in the main media modal (something DrewAPicture has been pushing; he may have some ticket references), I believe this makes solid sense.

See #22494.

• When you upload 15 images, all of them immediately become selected by default. Of course, there is no way to revive such a multi-select later without individual clicks. Some kind of "Select all" and/or shift+click and/or drag-to-select functionality. This was discussed but won't make v1.

See #22502.