marvin8/yunjin
Watch
1
0
Fork
You've already forked yunjin
 0
Code Issues 7 Pull requests Releases Activity Actions

Reader: wider article images with configurable card space #22

New issue
Closed
opened 2026-09-11 22:28:36 +00:00 by agent-pi · 3 comments
agent-pi commented 2026-09-11 22:28:36 +00:00
Collaborator
Copy link

Problem

Article images use only a fraction of the card width in the reader, wasting horizontal space.

Goal

  • Make images at least twice as wide to use more of the horizontal space within the card
  • The amount of horizontal space the image uses should be configurable as well
## Problem Article images use only a fraction of the card width in the reader, wasting horizontal space. ## Goal - Make images at least twice as wide to use more of the horizontal space within the card - The amount of horizontal space the image uses should be configurable as well
agent-pi commented 2026-09-11 22:29:22 +00:00
Author
Collaborator
Copy link

Findings

  • Pure CSS work in style.css, which is already variable-driven — the image width should become a variable rather than a hardcoded value so the configurable part is trivial.
  • Sequencing: after #21 (local persistence), since what the card renders changes.

Plan of attack

  1. Introduce an image/card-width variable; default to the widened layout.
  2. Expose configurability (follows whatever settings mechanism #20/#8 settle on — or a simple variable override via #8 custom CSS).
  3. Screenshot before/after in the PR (same practice as #6).
## Findings - Pure CSS work in `style.css`, which is already variable-driven — the image width should become a variable rather than a hardcoded value so the configurable part is trivial. - Sequencing: after #21 (local persistence), since what the card renders changes. ## Plan of attack 1. Introduce an image/card-width variable; default to the widened layout. 2. Expose configurability (follows whatever settings mechanism #20/#8 settle on — or a simple variable override via #8 custom CSS). 3. Screenshot before/after in the PR (same practice as #6).
agent-pi commented 2026-09-12 19:36:05 +00:00
Author
Collaborator
Copy link

Updated plan

The display-settings mechanism from #8 has landed, so configurability follows that pattern directly.

Approach

  1. CSS: :root gains --aggregate-image-width: 100% and .aggregate-image uses width: var(--aggregate-image-width) instead of the hardcoded 100px square. Height becomes aspect-ratio: 3 / 2 with a max-height cap so any configured width keeps a sensible shape (object-fit: cover crops). Default 100% satisfies "at least twice as wide" — cards are ~half the main column, so the old 100px was under 20% of the card width. The mobile override already forces full width and needs no change.
  2. Setting: new image_width display setting — text input in the Display section of the settings page, validated with the same CSS-size pattern as font size (px|rem|%, case-insensitive), empty = default. base.html emits :root { --aggregate-image-width: <value>; } when set, exactly like font size.
  3. Screenshot before/after in the PR (same practice as #6).

Branch

feat/issue-22-wider-card-images

Commits

  1. :sparkles: Widen card images via an --aggregate-image-width variable
  2. :sparkles: Add card image width display setting

TDD: failing tests first (setting save/reject/case-insensitive units, form persistence, default leaves the inline override absent, stylesheet uses the variable), then implementation, then full nox before push.

## Updated plan The display-settings mechanism from #8 has landed, so configurability follows that pattern directly. ### Approach 1. **CSS**: `:root` gains `--aggregate-image-width: 100%` and `.aggregate-image` uses `width: var(--aggregate-image-width)` instead of the hardcoded `100px` square. Height becomes `aspect-ratio: 3 / 2` with a `max-height` cap so any configured width keeps a sensible shape (`object-fit: cover` crops). Default `100%` satisfies "at least twice as wide" — cards are ~half the main column, so the old 100px was under 20% of the card width. The mobile override already forces full width and needs no change. 2. **Setting**: new `image_width` display setting — text input in the Display section of the settings page, validated with the same CSS-size pattern as font size (`px|rem|%`, case-insensitive), empty = default. `base.html` emits `:root { --aggregate-image-width: <value>; }` when set, exactly like font size. 3. **Screenshot** before/after in the PR (same practice as #6). ### Branch `feat/issue-22-wider-card-images` ### Commits 1. `:sparkles: Widen card images via an --aggregate-image-width variable` 2. `:sparkles: Add card image width display setting` TDD: failing tests first (setting save/reject/case-insensitive units, form persistence, default leaves the inline override absent, stylesheet uses the variable), then implementation, then full `nox` before push.
agent-pi commented 2026-09-12 20:06:41 +00:00
Author
Collaborator
Copy link

Implemented in PR #30 (merged as 2c0e562): card images render via --aggregate-image-width (default 100%, 3/2 aspect, 240px cap), configurable through Settings → Display → Card image width.

Implemented in PR #30 (merged as 2c0e562): card images render via `--aggregate-image-width` (default `100%`, `3/2` aspect, 240px cap), configurable through Settings → Display → Card image width.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
0.4.0
0.3.0
0.2.0
0.1.0
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Assignees
Clear assignees
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.

Reference
marvin8/yunjin#22
No description provided.