images: wrap images in a lightbox #63
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Wrap images in a lightbox, increasing them to full-screen size when clicked. There are JavaScript solutions available (e.g. lightbox2)[^0], though I opted for a purely CSS-based approach.[^1] [^0]: https://lokeshdhakar.com/projects/lightbox2/ [^1]: https://codesalad.dev/blog/how-to-create-an-image-lightbox-in-pure-css-25 Signed-off-by: Luca Zeuch <l-zeuch@email.de>
|
Sidenote: Perhaps we should also explore lazy loading, because the implementation requires rendering the image in question twice. I will implement this in a future commit, potentially alongside the option to not wrap an image in a lightbox. |
The implementation of a lightbox requires that the image in question is rendered twice, once in the actual content and a second time as an off-screen image. Defer loading of that off-screen duplicate until it is needed. Signed-off-by: Luca Zeuch <l-zeuch@email.de>
Authors can now pass `lightbox=false` as a query parameter with their image URL to disable the lightbox effect; this is especially useful for smaller images that do not have a lot of detail. Signed-off-by: Luca Zeuch <l-zeuch@email.de>
Signed-off-by: Luca Zeuch <l-zeuch@email.de>
|
|
|
I'm going to deploy this now--if necessary, we can disable the lightbox on select images in a future commit. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Wrap images in a lightbox, increasing them to full-screen size when
clicked. There are JavaScript solutions available (e.g. lightbox2)1,
though I opted for a purely CSS-based approach.2
We can further modify the link render hook such that wrapping the image
in question is optional—perhaps this is sensible for rather small
images? What do you think?
Local testing reveals no issues; it may be worth testing on a mobile
device or viewport as well.
Signed-off-by: Luca Zeuch l-zeuch@email.de
Terms
Footnotes
https://lokeshdhakar.com/projects/lightbox2/ ↩
https://codesalad.dev/blog/how-to-create-an-image-lightbox-in-pure-css-25 ↩