Themes: add support for multiple screenshots in themes

[matveb]

We left this out from the THX merge due to priorities. Let's bring them back.

Previously: #20546.

• Method to get an array with all the screenshots with a maximum of 5.
• Pass this data to wp_prepare_themes_for_js.
• Adjust template to loop through all the screenshots (if available) and render them.
• Set up a simple JS gallery with thumbnails on the detailed view of a theme.

Array begins with screenshot.png as the first item, then continues with screenshot-2.png.

[matveb]

To-do: support all standard file types for screenshots, not just PNGs; and use the caching system.

[SergeyBiryukov]

Related: #19816

[nacin]

Some thoughts:

• Why five? Design reasons? Or is this arbitrary? Could we allow 10 if we wanted? Or an arbitrary number?
• Screenshots are not tiny, and are getting bigger due to responsive and retina adjustments. We may be better off keeping these out of the zip and serving them from the WP.org CDN. (matveb actually suggested this.)
• Why non-PNGs? Core will detect any screenshot type currently, but wordpress.org's themes directory will only allow PNG. Supporting only PNG for screenshot-2+ seems like no loss of functionality, if that was the concern. On the other hand: JPGs of course compress better and maybe it's time to allow those so authors can use them when they see fit?

[matveb]

Thanks for the feedback!

• Mostly a design constrain, but pretty much an arbitrary one at that. Is it worth having such a constrain? Displaying 10 screenshots will probably not look that great. Still, themes do a lot of different stuff, and some come with crazy amounts of color schemes... What would be a sensible thing to present to people choosing one, though? It's also easier to add more than to remove in the future. (Also slightly connected with loading stuff from the CDN or bundling with the theme.)
• Yes. Downloading a bunch of retina screenshots that are not critical to a theme functionality could become too much of a burden. If we can figure out a way to elegantly load them from .org it'll probably help, and give us more flexibility in the long run to try more things (like header-to-footer screenshots).
• If we can go PNG only for screenshot-2+ I'd say great :)

[ocean90]

#19816 was marked as a duplicate.

[ader]

Added: cache, most popular extensions, screenshot directory with directory listing, effects on click event

[ader]

Hi,
I've extended submitted patch and fixed some bugs. Now it supports multiple images read from screenshots directory. Screenshots must follow "screenshot-{number}.{extension}" naming convention. I've also added support for all standard file extensions, added caching, fading effect when clicking on thumbnails. I didn't touch css because in my opinion it looks good. Diff was made on trunk version.

To do:

1. Test caching.
2. Perhaps limit the number of screenshots.
3. I've just noticed that clicking on thumbs doesn't work when there is only one theme.

[SergeyBiryukov]

Version field indicates when the enhancement was initially suggested.

[celloexpressions]

Would be nice to bring this back at some point, possibly in 4.4 alongside theme-install in the Customizer. Shouldn't be too difficult to implement within the theme details modal, but we'd definitely want to load them from the .org API if possible rather than bundling with the theme.

[westonruter]

Just ran across this in the context of the AMP plugin. The plugin's setup lets users pick from a list of core themes to use for serving AMP pages. A theme chosen for this purpose is called a “Reader theme“ which lives alongside the active theme. Given this theme is almost exclusively used to serve pages to mobile users, it doesn't make sense to show the landscape desktop screenshot.png that comes with the theme, and so we've created portrait mobile screenshots for each core theme. If themes included a mobile screenshot in addition to a desktop screenshot, we'd be able to more easily expand the list of themes available in the UI. But irrespective of the AMP plugin's use case, it seems generally useful for core to depict mobile screenshots of themes given the increasing importance of mobile devices on the web.