[GH-ISSUE #2028] Image focus mode #1263

Open
opened 2026-03-02 11:56:08 +03:00 by kerem · 4 comments
Owner

Originally created by @jannisheinzmann on GitHub (Oct 11, 2025).
Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/2028

Describe the feature you'd like

I have been looking for an app that is able to show me a catalog of images with all of the great benefits that Karakeep already has. I think it would be great to be able to hide all of the text sections below an image but still be able to retain all of the tags of the image. This would also of course hide all of the text only items.

Describe the benefits this would bring to existing Karakeep users

This toggle would work great for designers/artists that are looking for a self hosted inspiration board (kinda like Pinterest or Allusion with the benefit of mobile and a nice interface).

This feature would work great hand in hand with #1960 so that the whole image will be displayed.

Can the goal of this request already be achieved via other means?

No, not that I know of. Additionally their are no alternatives that do this well.

Have you searched for an existing open/closed issue?

  • I have searched for existing issues and none cover my fundamental request

Additional context

No response

Originally created by @jannisheinzmann on GitHub (Oct 11, 2025). Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/2028 ### Describe the feature you'd like I have been looking for an app that is able to show me a catalog of images with all of the great benefits that Karakeep already has. I think it would be great to be able to hide all of the text sections below an image but still be able to retain all of the tags of the image. This would also of course hide all of the text only items. ### Describe the benefits this would bring to existing Karakeep users This toggle would work great for designers/artists that are looking for a self hosted inspiration board (kinda like Pinterest or Allusion with the benefit of mobile and a nice interface). This feature would work great hand in hand with #1960 so that the whole image will be displayed. ### Can the goal of this request already be achieved via other means? No, not that I know of. Additionally their are no alternatives that do this well. ### Have you searched for an existing open/closed issue? - [x] I have searched for existing issues and none cover my fundamental request ### Additional context _No response_
Author
Owner

@MohamedBassem commented on GitHub (Oct 12, 2025):

@claude Let's add a coupe more customization points to the existing view options:

  1. Allow users to hide/show different things from the bookmark card (e.g. images, text, tags).
  2. Allow users to decide whether they want to restrict the height of the card or not (#261) (only in the mansory layout though).
  3. Allow users to configure how the image is displayed (be it object-fit: contain or cover) (#1960)
<!-- gh-comment-id:3394550266 --> @MohamedBassem commented on GitHub (Oct 12, 2025): @claude Let's add a coupe more customization points to the existing view options: 1. Allow users to hide/show different things from the bookmark card (e.g. images, text, tags). 2. Allow users to decide whether they want to restrict the height of the card or not ([#261](https://github.com/karakeep-app/karakeep/issues/261)) (only in the mansory layout though). 3. Allow users to configure how the image is displayed (be it object-fit: contain or cover) ([#1960](https://github.com/karakeep-app/karakeep/issues/1960))
Author
Owner

@claude[bot] commented on GitHub (Oct 12, 2025):

Claude finished @MohamedBassem's task —— View jobclaude/issue-2028-20251012-1429Create PR ➔


View customization options implemented

  • Read CLAUDE.md and understand project structure
  • Explore existing view options implementation
  • Design data structure for new settings
  • Implement bookmark card element visibility toggles (images, text, tags)
  • Implement card height restriction toggle (masonry layout only)
  • Implement image fit mode option (contain/cover)
  • Update UI to add controls for new options
  • Commit and push changes
  • Provide PR creation link

Summary

I've successfully implemented all three customization features requested:

1. Element Visibility Toggles

Added show/hide controls for:

  • Images: Toggle visibility of bookmark images
  • Text: Toggle visibility of text content/descriptions
  • Tags: Toggle visibility of bookmark tags

2. Card Height Restriction (Masonry layout only)

Added a toggle to restrict or allow unlimited card height. When disabled, cards in masonry layout can expand beyond the default max-h-96 constraint.

3. Image Fit Mode

Added selection between:

  • Cover: Images fill the container (default, may crop)
  • Contain: Images fit within the container (full image visible)

Technical Details

All settings are stored in the user's local settings cookie and persist across sessions. The controls are accessible via the View Options dropdown (gear icon) in the bookmark grid.

Modified files:

  • apps/web/lib/userLocalSettings/types.ts - Added new setting types
  • apps/web/lib/userLocalSettings/bookmarksLayout.tsx - Added hooks for new settings
  • apps/web/lib/userLocalSettings/userLocalSettings.ts - Added update functions
  • apps/web/components/dashboard/ViewOptions.tsx - Added UI controls
  • apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx - Applied settings to card rendering

Job RunBranch

<!-- gh-comment-id:3394551093 --> @claude[bot] commented on GitHub (Oct 12, 2025): **Claude finished @MohamedBassem's task** —— [View job](https://github.com/karakeep-app/karakeep/actions/runs/18445282671) • [`claude/issue-2028-20251012-1429`](https://github.com/karakeep-app/karakeep/tree/claude/issue-2028-20251012-1429) • [Create PR ➔](https://github.com/karakeep-app/karakeep/compare/main...claude/issue-2028-20251012-1429?quick_pull=1&title=feat%3A%20Add%20bookmark%20card%20display%20customization%20options&body=%23%23%23%20Summary%0A%0AAdds%20new%20display%20customization%20options%20to%20the%20bookmark%20view%20settings%3A%0A%0A1.%20**Element%20Visibility%20Toggles**%20-%20Show%2Fhide%20images%2C%20text%2C%20and%20tags%20on%20bookmark%20cards%0A2.%20**Card%20Height%20Restriction**%20-%20Toggle%20to%20restrict%20or%20allow%20unlimited%20card%20height%20(masonry%20layout%20only)%0A3.%20**Image%20Fit%20Mode**%20-%20Choose%20between%20%27cover%27%20and%20%27contain%27%20for%20image%20display%0A%0AAll%20settings%20are%20stored%20in%20local%20user%20settings%20and%20persist%20across%20sessions.%0A%0ACloses%20%232028%0ARelated%20to%20%23261%2C%20%231960%0A%0A---%0A%0AGenerated%20with%20%5BClaude%20Code%5D(https%3A%2F%2Fclaude.ai%2Fcode)) --- ### ✅ View customization options implemented - [x] Read CLAUDE.md and understand project structure - [x] Explore existing view options implementation - [x] Design data structure for new settings - [x] Implement bookmark card element visibility toggles (images, text, tags) - [x] Implement card height restriction toggle (masonry layout only) - [x] Implement image fit mode option (contain/cover) - [x] Update UI to add controls for new options - [x] Commit and push changes - [x] Provide PR creation link ### Summary I've successfully implemented all three customization features requested: #### 1. **Element Visibility Toggles** Added show/hide controls for: - **Images**: Toggle visibility of bookmark images - **Text**: Toggle visibility of text content/descriptions - **Tags**: Toggle visibility of bookmark tags #### 2. **Card Height Restriction** (Masonry layout only) Added a toggle to restrict or allow unlimited card height. When disabled, cards in masonry layout can expand beyond the default `max-h-96` constraint. #### 3. **Image Fit Mode** Added selection between: - **Cover**: Images fill the container (default, may crop) - **Contain**: Images fit within the container (full image visible) ### Technical Details All settings are stored in the user's local settings cookie and persist across sessions. The controls are accessible via the View Options dropdown (gear icon) in the bookmark grid. **Modified files:** - `apps/web/lib/userLocalSettings/types.ts` - Added new setting types - `apps/web/lib/userLocalSettings/bookmarksLayout.tsx` - Added hooks for new settings - `apps/web/lib/userLocalSettings/userLocalSettings.ts` - Added update functions - `apps/web/components/dashboard/ViewOptions.tsx` - Added UI controls - `apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx` - Applied settings to card rendering --- [Job Run](https://github.com/karakeep-app/karakeep/actions/runs/) • [Branch](https://github.com/karakeep-app/karakeep/tree/claude/issue-2028-20251012-1429)
Author
Owner

@zorghere commented on GitHub (Oct 20, 2025):

It would be helpful if this setting also affected the list display when shared publicly (not just for the user) -- for instance, to allow public access to a moodboard (ala Pinterest).

<!-- gh-comment-id:3424005649 --> @zorghere commented on GitHub (Oct 20, 2025): It would be helpful if this setting also affected the list display when shared publicly (not just for the user) -- for instance, to allow public access to a moodboard (ala Pinterest).
Author
Owner

@jannisheinzmann commented on GitHub (Nov 23, 2025):

This looks great. It would be great to get the images to fill the space horizontally and then scale the frame to fit vertically. Also the tags and text are hidden but the frame remains the same size.

Thanks for all your work on this.

Image
<!-- gh-comment-id:3567613706 --> @jannisheinzmann commented on GitHub (Nov 23, 2025): This looks great. It would be great to get the images to fill the space horizontally and then scale the frame to fit vertically. Also the tags and text are hidden but the frame remains the same size. Thanks for all your work on this. <img width="833" height="402" alt="Image" src="https://github.com/user-attachments/assets/3035a94a-7017-4dc1-b4bc-467b76366ef9" />
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#1263
No description provided.