Plugin Directory: Improve screenshot lightbox captions#697
Conversation
Remove the Photon srcset for Plugin Directory screenshots so replaced assets keep using the ps.w.org URL with its revision query. Keep the Gallery block, lightbox, layout detection, captions, and reveal behavior unchanged.
Render screenshot captions in an overlay-level bar beneath the active image so long captions no longer cover screenshot content. Reserve viewport space before revealing captions and keep the core lightbox scale unitless so zoom in and zoom out remain stable for vertical screenshots. Reduce thumbnail hover repaint work by removing the frosted trigger backdrop in screenshot galleries.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
- Moved captions into a separate area below the image - Removed the dark gradient caption overlay from images - Changed caption text to the standard dark page color - Reserved caption space before final image sizing - Kept tall screenshots and long captions within the viewport - Added a subtle caption reveal animation on lightbox open - Reduced extra layout recalculations during the opening transition - Preserved Gallery block output, navigation, image sources, dimensions, layout detection, and cache behavior Affected: wordpress.org/public_html/wp-content/plugins/gallery-lightbox-enhancements/assets/lightbox-captions.css, wordpress.org/public_html/wp-content/plugins/gallery-lightbox-enhancements/assets/lightbox-captions.js
dan-zakirov
force-pushed
the
dan/meta-8289-lightbox-caption-animation
branch
from
925afa1 to
164c0cf
Compare
bor0
left a comment
bor0
left a comment
There was a problem hiding this comment.
This tested well!
Tested with some screenshots on https://wordpress.org/plugins/accessibility-checker/#screenshots and https://wordpress.org/plugins/wordpress-seo/#screenshots
Thanks for your work @dan-zakirov! 🙌
I added some comments, looking forward to your thoughts/suggestions
| if ( isOverlayActive( overlay ) ) { | ||
| requestSettledSync( overlay ); | ||
| return; | ||
| } | ||
|
|
||
| requestSettledSync( overlay ); |
There was a problem hiding this comment.
This seems incorrect? Perhaps just
| if ( isOverlayActive( overlay ) ) { | |
| requestSettledSync( overlay ); | |
| return; | |
| } | |
| requestSettledSync( overlay ); | |
| requestSettledSync( overlay ); |
| ) | ||
| ); | ||
|
|
||
| $srcset = self::photon_srcset( $src ); |
There was a problem hiding this comment.
The old code served 300/600/900px srcset candidates via i0.wp.com for the grid thumbnails.
The new code loads full-resolution ps.w.org images directly in the gallery grid.
While I understand you wanted to simplify some things, this simplification could also cause performance issues.
| var CAPTION_REVEAL_DELAY = 430; | ||
| var SCREENSHOT_ID_OFFSET = 9000000; |
2 participants
As part of https://meta.trac.wordpress.org/ticket/8289, this updates screenshot gallery lightbox captions in the Plugin Directory.
Long captions should not cover the image, tall screenshots should stay within the viewport, and short captions should keep the clean centered presentation that works well for most plugins.
Overall, the opened gallery view is improved while keeping the existing Gallery block output, navigation, and image behavior intact.
Captions stay centered to avoid breaking the presentation for other plugins.