Skip to content

feat: Add support for lightboxes#740

Open
MoritzWeber0 wants to merge 7 commits intomainfrom
feat/lightbox
Open

feat: Add support for lightboxes#740
MoritzWeber0 wants to merge 7 commits intomainfrom
feat/lightbox

Conversation

@MoritzWeber0
Copy link
Member

@MoritzWeber0 MoritzWeber0 commented Mar 7, 2026

Add support for lightboxes to view images in a full-screen mode.

There are three different ways to open a lightbox:

  1. Via markdown image. To enable lightbox mode for images, just pass an alt text. Images with alt are considered decorative and therefore don't have a lightbox.
    !["Image caption"]("/path/to/image.webp" "Here is the alt text")
    
  2. Via float-image. Same as via markdown image, but the alt text is passed as parameter.
    {{% float-image
        src="image.webp"
        alt="Here is the alt text"
        caption="Image caption"
        width="50%"
        position="right"
    %}}
    
  3. Via markdown link. Just pass the reference to the image like you would do with markdown images:
    ["Link text"]("/path/to/image.webp")
    

All of this is done without additional library, just using what we have. A combination of pan & zoom from the country map and the new dialog.

TODO:

  • Some parts of the image are cut off
  • When dragging out of the screen, the dialog closes
  • Use grab / grabbing for pan & zoom

@netlify
Copy link

netlify bot commented Mar 7, 2026

Deploy Preview for fipguide ready!

Name Link
🔨 Latest commit afd01aa
🔍 Latest deploy log https://app.netlify.com/projects/fipguide/deploys/69b561374b2ff700084e9a50
😎 Deploy Preview https://deploy-preview-740--fipguide.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link

github-actions bot commented Mar 7, 2026

Hi there! 👋

Thank you for your contribution to the FIP Guide! 🚀
We appreciate your effort in making rail staff travel information more accessible. 🚄

Checklist before merging:

  • Added a description to the Pull Request
  • Checked the License of new pictures (non-commercial use without attribution)
  • Modified content in English
  • Modified content in German
  • Modified content in French

@MoritzWeber0 MoritzWeber0 linked an issue Mar 7, 2026 that may be closed by this pull request
@MoritzWeber0 MoritzWeber0 changed the title feat: Add support for lightbox feat: Add support for lightboxes Mar 7, 2026
@MoritzWeber0 MoritzWeber0 added the technical Technical issues, e.g. related to Hugo, HTML, CSS, deployment, etc. label Mar 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

technical Technical issues, e.g. related to Hugo, HTML, CSS, deployment, etc.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add lightbox for internal images

1 participant