riptano / docs-ui

The UI and theme for DataStax Docs.
https://riptano.github.io/docs-ui/
Mozilla Public License 2.0
2 stars 0 forks source link

Lightbox for block images #68

Closed eric-schneider closed 4 months ago

eric-schneider commented 7 months ago

By default, images are constrained by the width of the article body. Users should have the ability to enlarge an image if they so choose. Our old UI has rudimentary lightbox library that allows the user to click an image to open a larger version in a lightbox. We should consider adding a similar feature to the new UI.

My preference would be to work with the Antora community on implementing Issue-140 (MR-126). Based on the conversation in the aforementioned merge request, it seems that there are still a few additional enhancements that need to be made.

NOTE: This enhancement is currently a dependency of https://github.com/riptano/docs-ui/issues/73. The lightbox library we choose should probably be used to power the interactive graphic in addition to the other images on the site.

johnsmartco commented 5 months ago

Thanks @eric-schneider for highlighting the existing functionality from the prior ui in this new docs-ui issue.

Example on:

https://docs.datastax.com/en/astra-serverless/docs/migrate/migrate-and-validate-data.html

Click the "squished" graphic ... opens a 100% view ... click again, returns user to the topic.

eric-schneider commented 5 months ago

@colegoldsmith I'm re-opening this issue because I think we overlooked a couple things.

  1. The lightbox doesn't appear to work for images that use the svg:: macro. a. Note: If/when we enable this, we need to make sure that it's not enabled on images like the ones on the landing page: image

  2. We should probably add a background that's the same size as the image, otherwise images with transparent backgrounds look funky overlaid on top of the page content. image

eric-schneider commented 4 months ago

Decided to create a new issue to capture these enhancements/fixes. See https://github.com/riptano/docs-ui/issues/120