Wp-calypso: Media Section: can't edit images at small preview sizes

[gwwar]

In the media section, there's currently no clear way to edit a media item if the preview image is too small for the edit button to be rendered on it.

[rralian]

This same issue is present in the media modal... the pencil "edit" icon does not appear in the upper-right when preview sizes are too small.

[gwwar]

@rralian you can still select a media item and click "Edit" at the bottom of the modal. We can't do that in this section

[rralian]

@rralian you can still select a media item and click "Edit" at the bottom of the modal. We can't do that in this section

Agreed, but if you're used to that pencil icon in the modal and you change your preview sizes so it no longer shows up, it's also easy to get lost there. I think the UX for both sections could be re-thought.

[iamtakashi]

It seems to be intentional to hide the button for the small preview size in the media modal.

Regardless, the button needs to go completely. The editing experience shouldn't be different depending on the size of preview. Also it's hover dependent — doesn't work very well with touch devices. We would need to discuss about this in a separate issue.

Anyway, I think the media section needs to have a persistent (sticky) bottom action bar like the media modal. The primary purpose of the section is to allow users to maintain and organise their all media. Therefore, the section should have bulk edit & delete capabilities. We also can display Plan Storage there, which is another thing the section should have.

A rough mockup of the section:

[iamtakashi]

Anyway, I think the media section needs to have a persistent (sticky) bottom action bar like the media modal.

I'd like to have feedback on this UI approach since I believe we don't have this pattern in Calypso yet. (Other than the similar action bar in the media modal)

cc: @mtias @folletto

[folletto]

I'd like to have feedback on this UI approach since I believe we don't have this pattern in Calypso yet. (Other than the similar action bar in the media modal)

In general I'd agree with you, that's the "right" placement of the bar. However given the context I assume the following:

1. We don't have that bottom pattern anywhere in Calypso.
2. We don't have that kind of "UI" edge-to-edge anywhere on the main page.

So I think that it would be "ignored" as it's at the bottom there.

I think that once we introduce the tab-bar at the top to be edge to edge, then we can do the same at the bottom, but until then might be hard.

Notice that everywhere we tend to have a "top" approach, so it's everything in the top bar. I'd suggest to rethink the top bar to allow that too.

---

Also, in the section (non-modal version) of this page, what does "selecting" do? There seems to be a bit of an overlap there as clicking shows a marker, that doesn't... do anything?

So a solution could be that, since we don't have the multiple selector in the section, ANY click simply opens the edit panel.

That might clash however to the Media Modal UI, and it has instead to be consistent. So we need to evaluate both in coordination. It might be totally fine to have tap here to open the modal, and instead in the modal to be a selection (as they work in two different context) but I'd like to have some review here. :)

[iamtakashi]

Also, in the section (non-modal version) of this page, what does "selecting" do? There seems to be a bit of an overlap there as clicking shows a marker, that doesn't... do anything?

So a solution could be that, since we don't have the multiple selector in the section, ANY click simply opens the edit panel.

I find the marker is nonsense at this moment. And the solution (click to open the edit modal) makes sense for the issue this thread is about. I think we should remove the hover dependent, the preview size dependent, pencil edit icon.

However, the lack of multiple selector in media section is also an issue in my mind (#10851) because bulk editing /deletion makes a lot, even more than in the media modal, sense to be here, so you can organise and maintain your all media.

What could be the better way to select more than one media than just clicking each like the modal currently does? I'm not sure. This is why I hesitate to suggest to opens the edit modal when each is clicked.

[folletto]

What could be the better way to select more than one media than just clicking each like the modal currently does? I'm not sure. This is why I hesitate to suggest to opens the edit modal when each is clicked.

That's fine, it's mostly that we don't have a solution right now so click-to-edit a single item seems appropriate.

If you can look for a few designs that include selection and that are aligned for both Modal and Section, I think that would be the ideal scenario overall.

Brainstorming about that:

1. Refactor action bars across modal and section so the content on the "bottom bar" can be moved "as-is" on the top bar in some way.
2. Selecting changes the content of the top bar in the Media Section only, keeping it in the bottom bar on the Modal.
3. Either way, edit will appear on the bar, not on the icon, thus solving this very issue.
4. Other?

[iamtakashi]

That's fine, it's mostly that we don't have a solution right now so click-to-edit a single item seems appropriate.

We're fully agree on removing the pencil edit icon, but I'm favour of keeping "click-to-select" because, as you mentioned, it should work consistently in both the Modal and the Section. Yes, they work in two different context, but ideally, what happens should be the same when you click a media.

Obviously, we need to figure out the design for the action bar at the top, but with your brainstorming ideas, I can see the light at the end of tunnel :)

Since we're incorporating the action bar in the header of the Section, it's probably better to move design review and discussion for it to #10805. How does that sound?

[folletto]

Ok then, let's review that first. :)

[iamtakashi]

[...] but I'm favour of keeping "click-to-select" [...]

Actually, I'm now not sure... :) I still think that it should work in the same way in both the section and the modal, but I wonder if we should change to "click-to-edit" in both places.

It's mainly because users can make sure images in full size (non-cropped) before selecting. This is specially important when they're on mobile and have similar images in the library that they can't tell the difference with the cropped thumbnails.

So it's more like "click-to-preview", and you can edit and select from there if you need to. The disadvantage with this approach is that selecting/deselecting is going to be a two-click process if they need to select it from the modal. But it might not be too bad because newly uploaded media is auto-selected.

[folletto]

It seems to me it wouldn't just add a click to the main action (insert) but also would require extra work to make select work. How would it work if clicking is edit?

[iamtakashi]

What I'm wondering is if we add a "Select" button in the modal.

The "Select" button closes the modal after it's clicked, and the image will be selected in the library view.

it wouldn't just add a click to the main action (insert) [...]

Since we have "Insert" button in the modal, you can just do that from there if you're adding a, single image. So, the number of clicks to insert is the same.

I'm probably not seeing flaws with this idea yet though...

I've started wonder if this might be a good idea after reading this: https://test.wordpress.com/2016/05/13/full-width-media-views-during-selection/

[folletto]

Ok I think there are three different discussion threads now here... let's split.

"Select" button.

I'm not sure I'm understanding this properly...

The "Select" button closes the modal after it's clicked, and the image will be selected in the library view.
So, the number of clicks to insert is the same.

If you are adding multiple images from the library, the effect is that after the first you'd get the "Select" button, so you then go back to the library, instead of simply seeing and selecting all the images without interruption.

The elegance and intuitiveness of the current approach is that doesn't matter if you want just one image, many images, upload or pick from library, it's always one click to select one or many images, and then Calypso is smart and know which screen to show next: if to continue with a gallery or just insert.

Accessibility with Full View Images

I've started wonder if this might be a good idea after reading this:

This is a good feedback, but I don't think that changing the flow by introducing an extra step for everyone helps. Good solutions are improvements all across. :)

I'd try to fix the above in a different way, for example changing the way we show images in the gallery swapping out the slider (which btw isn't very usable) with a pill toggle between not just multiple sizes, but could even switch between a normalized list of square to a masonry kind of layout or even a image-my-image browser:

This specific issue

Back to this issue.... there are two things we can do that are fairly simple:

1. we could also just avoid the images to become that small.
2. the button actually fits even at our smaller size. We can just fix it and show it as needed:

[iamtakashi]

Thanks for considered response as always!

Good solutions are improvements all across.

Yes, you’re right. “Select” button idea would introduce an extra step to _everyone_, and it would break the elegance of the current approach. It wasn’t a well considered idea.

Instead, taking your approach of changing the way and the size we show images makes a lot sense, because the cropped thumbnail is kind of the source of the accessibility issue. They look neat and can be handy in small sizes if you have a lot of images to go through, but providing uncropped images would be a balanced solution. Let’s discuss in a separate, new thread.

Regarding the edit button issue, one part of the issue is that it’s hover dependant that can cause unpleasant experience with touch devices. I get the convenience of it, but I think it needs go regardless of the minimum size we’d allow thumbnails to be.

[folletto]

Agreed on all the points. 💯

[iamtakashi]

I think the UX for both sections could be re-thought.

I think a summery of the design decision would be helpful at this point.

After the new design of the section and the modal is implemented, we should remove the pencil edit button entirely. Some users will probably miss the convenience of the button (contextual and single click to edit), but the issue like this, and the one with touch devices outweigh the convenience, thus we're going to change the edit flow with the sticky action bar introduced in the new design.

[rralian]

Given the resolution is to remove the pencil icon, can we close this issue? If we want a placeholder for the issue of removing the pencil icon, can we create a new issue that can refer to this closed issue for context? These issues can be long and somewhat difficult to review for concrete actions/decisions.

[iamtakashi]

OK. Opened a new issue #11498.