[PR #159] [MERGED] feature(web): Clicking an image in the preview modal will open it in a new tab #1538

Closed
opened 2026-03-02 11:58:05 +03:00 by kerem · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/159
Author: @lilacpixel
Created: 5/16/2024
Status: Merged
Merged: 5/16/2024
Merged by: @MohamedBassem

Base: mainHead: image-popout


📝 Commits (1)

  • 63cd8b3 feature(web): Clicking an image in the preview modal will open it in a new tab

📊 Changes

1 file changed (+12 additions, -6 deletions)

View changed files

📝 apps/web/components/dashboard/preview/AssetContentSection.tsx (+12 -6)

📄 Description

My husband gave me the idea for this PR 😉 As part of his illustration work, he saves a lot of images for drawing reference, and it's helpful to be able to open them in a split view on his iPad so he can have his reference right next to the canvas. Unfortunately, the pinch-to-zoom gesture doesn't work on images when Hoarder is added to the Home Screen as a web app. This tweak just links the image in the preview modal to the original file, so clicking it will open it in a new tab that can be zoomed, panned, etc.

(Side note: I originally had a much more complicated implementation for this, with a toggle for fullscreen mode and a pinch-pan-zoom library for manipulating the image when fullscreened. But, as it turns out, Apple hasn't made the Fullscreen API available for browsers other than iPad Safari. I couldn't figure out an alternative solution for unsupported browsers, so I ended up scrapping the whole thing. Opening the original image into a new tab is what Raindrop.io does, and that's what we're aiming to replace with Hoarder, so that's the change I ended up making. Hopefully it works well enough, but I'd be curious to hear your thoughts!)


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/karakeep-app/karakeep/pull/159 **Author:** [@lilacpixel](https://github.com/lilacpixel) **Created:** 5/16/2024 **Status:** ✅ Merged **Merged:** 5/16/2024 **Merged by:** [@MohamedBassem](https://github.com/MohamedBassem) **Base:** `main` ← **Head:** `image-popout` --- ### 📝 Commits (1) - [`63cd8b3`](https://github.com/karakeep-app/karakeep/commit/63cd8b30d34fcc9608b1dd08bb4ffe967ce3d4a3) feature(web): Clicking an image in the preview modal will open it in a new tab ### 📊 Changes **1 file changed** (+12 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `apps/web/components/dashboard/preview/AssetContentSection.tsx` (+12 -6) </details> ### 📄 Description My husband gave me the idea for this PR 😉 As part of his illustration work, he saves a lot of images for drawing reference, and it's helpful to be able to open them in a split view on his iPad so he can have his reference right next to the canvas. Unfortunately, the pinch-to-zoom gesture doesn't work on images when Hoarder is added to the Home Screen as a web app. This tweak just links the image in the preview modal to the original file, so clicking it will open it in a new tab that can be zoomed, panned, etc. (Side note: I originally had a much more complicated implementation for this, with a toggle for fullscreen mode and a pinch-pan-zoom library for manipulating the image when fullscreened. But, as it turns out, Apple hasn't made the Fullscreen API available for browsers other than iPad Safari. I couldn't figure out an alternative solution for unsupported browsers, so I ended up scrapping the whole thing. Opening the original image into a new tab is what Raindrop.io does, and that's what we're aiming to replace with Hoarder, so that's the change I ended up making. Hopefully it works well enough, but I'd be curious to hear your thoughts!) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
kerem 2026-03-02 11:58:05 +03:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/karakeep#1538
No description provided.