Screenshot UI for plugin directory

[hlashbrooke]

The screenshot UI in the new plugin directory is good, but it could do with a couple of tweaks to make it more streamlined.

I'll refer to this plugin of mine as an example as it has a lot (too many!) screenshots: ​https://wordpress.org/plugins-wp/seriously-simple-podcasting/

1. The number of screenshots should be limited. I believe this has been discussed before, but a limit of 4-6 images would be best I think. Once that is done, then the thumbnail carousel images should be resized to fit exactly the maximum number of screenshots under the displayed image.

2. When the displayed image changes, the image height should be changed with an animated slide (even if it's a fast one) to prevent jarring UI changes when images of vastly different heights are used.

3. We should add a lightbox to the displayed image so people can see it more clearly in cases where the image contains small text. Something like the Featherlight lightbox library might be good as it has a very minimal UI that won't look out of place in the new directory.

Those updates would make the screenshot UI a whole lot smoother and easier to use.

[chriscct7]

Replying to hlashbrooke:

1. The number of screenshots should be limited. I believe this has been discussed before, but a limit of 4-6 images would be best I think. Once that is done, then the thumbnail carousel images should be resized to fit exactly the maximum number of screenshots under the displayed image.

I think your plugin shows the usecase as to why there shouldn't be a limit. Screenshots are supposed to provide users context to a plugin, like being able to see what options do and don't exist, and how things will be output. Limiting screenshots seems counterintuitive to a goal of making the directory better for the end users, who by definition are on the directory trying to find a plugin that meets their needs. If the number of screenshots is limited, on certain plugins, particularly ones with more settings than others (WooCommerce, EDD, any caching plugin, etc), it will be significantly harder for users to gauge if they've found the right plugin without needing to install it to see.

[chriscct7]

A good example is the plugins page for Easy Digital Downloads. It demonstrates the types of screenshots users expect to see for an eCommerce plugin:

• What does the checkout screen look like
• What does the reporting look like
• What does the edit order screen look like
• What does the edit product screen look like (and what options are there)
• What settings does the plugin offer
• How flexible are coupons
• etc etc

There's a lot more than 6 screenshots needed for a user to answer these relatively basic questions about a plugin.

[hlashbrooke]

@chriscct7: Yeah fair point - allowing a ton of screenshots isn't a huge issue really, just so long as the UI for viewing them can handle it. Right now, they all stick off the right of the viewport, which really isn't ideal at all. We would need to work out a better way to display them.

[chriscct7]

Instead of having 1 large image + tons of tiny images in a row underneath it, perhaps have a grid of images 3 - 5 columns wide per row, with the ability to click to expand on an overlay. This would allow for tons of images to be handled.

[chriscct7]

Now that I think of it, the issue that will run into is the images can be different ratios. Perhaps a masonry style grid?

[hlashbrooke]

Something that I thought of that could work nicely is larger thumbnails in 3 columns using a masonry layout (so the ratios don't matter) and then clicking on them pops up a lightbox. That would give you a way to see all of the screenshots at a glance without even having to click on anything, but it would also allow for viewing them in greater detail.

So screenshots of a widget UI would be pretty easy to see without expanding, but if it's a screenshot of a longer settings screen then the user could click on it.

[tellyworth]

Here's an example of screenshots that would benefit from some way to zoom, as suggested in (3):

​https://wordpress.org/plugins-wp/string-locator/

[Goran87]

Clicking on the image has same effect as a lightbox, except that its not lightbox. Its pretty confusing, i tried to hit escape, then was looking for close button untill I hit back. I definitely agree that there should be some kind of simple lightbox, or to have it open as standard image in browser, current solution is very confusing to the end user.

[brianhogg]

I also ran into this yesterday, hitting escape and clicking around thinking I was still on the plugin page. Should either be in a lightbox or remove the link to the full image for the time being?

[lukecavanagh]

Using something like this would be a lightweight option for a lightbox.

​https://github.com/noelboss/featherlight/
​https://github.com/nicolas-t/Chocolat

[kevinwhoffman]

I feel we need a real lightbox solution to improve the experience. I'd like to suggest Magnific which does several things really well to solve some of the issues mentioned above:

• Elegant lightbox UI
• Keyboard-accessible (focuses correctly on popup, arrow navigation, escape to close)
• Touch-enabled
• Supports captions
• Supports galleries
• Keeps the gallery experience on one page (current implementation launches an entirely new page per image)
• Allows user to navigate from one zoomed-in image to the next without having to exit back to the main page in between

Check out the Lightbox gallery example on this page: ​http://dimsemenov.com/plugins/magnific-popup/

[lukecavanagh]

Magnific Popup does look very solid, the JS is a bit bigger than the two other previous examples, around 19kb, but it does handle a lot.

Replying to kevinwhoffman:

I feel we need a real lightbox solution to improve the experience. I'd like to suggest Magnific which does several things really well to solve some of the issues mentioned above:

• Elegant lightbox UI
• Keyboard-accessible (focuses correctly on popup, arrow navigation, escape to close)
• Touch-enabled
• Supports captions
• Supports galleries
• Keeps the gallery experience on one page (current implementation launches an entirely new page per image)
• Allows user to navigate from one zoomed-in image to the next without having to exit back to the main page in between

Check out the Lightbox gallery example on this page: ​http://dimsemenov.com/plugins/magnific-popup/

[ck3lee]

Attached a patch attachment:2273-1.diff​ with screen capture. I hope to get some dev and UI feedback first before working on final patch.

• Still a WIP.
• Fix the bouncing height issue. The drawback of this is a smaller.
• Add lightbox for fullscreen view. There is still CSS work to do for the fullscreen view
• Improve on accessibility with keyboard nav for previous and next buttons - without hover.
• Looks like existing code is in React and was a fork of this package ​https://www.npmjs.com/package/react-image-gallery. So, I kept try to keep it the same by using this library.

[SergeyBiryukov]

#4743 was marked as a duplicate.

[MarcosAlexandre]

@ck3lee Thanks for your patch! As the ticket has been open for some time, there have been updates to the react-image-gallery package, so I made some minor adjustments:

I changed the version in the package.json file to 1.0.7 and also made some adjustments to the image-gallery-lightbox / style.scss file name. If you can test that everything is still right on your side, I will be happy ;)

@SergeyBiryukov Although this ticket is not a priority, it has been open for 4 years to correct the usability of the plugins page. How can we move this ticket forward?

This PR uses the previous work done in 2273 + react-image-gallery to improve the screenshot UI.

The improvements:

• The screenshots are now a consistent height, which prevents content jump.
• This library also provides a "lightbox" view for viewing larger images at full-size.
• The keyboard navigation experience is also improved: next, previous, and full-screen buttons all have focus states.

Unfortunately, there are issues too. The transition CSS on RTL pages is a little janky, and the labels used in the library are also not available for translation, so non-English screen reader users will still hear English labels.

Screenshot UI:

The thumbnail nav on RTL + many screenshots ends up veering offscreen somehow, I think the offset logic must be wrong in react-image-gallery, or the CSS here conflicts with it somehow.

Fullscreen (lightbox) view:

---

https://meta.trac.wordpress.org/ticket/2273

[ryelle]

I've attached a PR which updates the react-image-gallery approach — I almost committed it, but you can see in the PR, there are some issues with RTL and translations that make me think we should revisit this library. Maybe there are some gutenberg components we can use instead?

[dd32]

#6896 was marked as a duplicate.