Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Let spotlight images open full-size, like gallery images

Open
#184 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
html, javascript, scss
Domain
accessibility, frontend, web-dev

Research direction

Start with the gallery lightbox in assets/js/main.js, then inspect the spotlight markup and _spotlight.scss, including the absolute-positioned image rules. Decide how the spotlight link and affordance should work across pointer, keyboard, and touch input. Done means every intended spotlight opens and closes at full frame, and check-render passes at desktop and 375px.

Written by the indexing model from the issue text.

Description

design

Spotlight photos are cropped by object-fit: cover to whatever ratio the viewport gives the .image pane, and there is no way to see the whole frame. Gallery thumbnails already open their full image in the lightbox (.gallery.lightbox in assets/js/main.js). Spotlights could do the same.

Raised while adding William's own kit photos to coffee.html (#181/#182). The Hoffmann book shot in particular crops tightly at some ratios.

Open questions

  • Affordance. Galleries show a caption with an "Expand" button on hover. A spotlight has no caption, so how does a reader know the image is clickable? Options: a cursor change alone, a hover zoom or overlay, a small expand icon in a corner. Hover does nothing on touch, so whatever we pick shouldn't rely on it.
  • Mechanism. Reuse the gallery lightbox code in main.js by wrapping the spotlight <img> in an <a href> to the full image, or write a separate handler. Reusing it probably means generalising its selector away from .gallery.
  • Scope. Every spotlight on every page, or opt-in per section with a class? Unsplash hero/stock photos may not be worth expanding.
  • Full image source. The spotlight already serves the master (resized to 1600px at deploy), so the link target could be the same file, unless we want a larger fulls/-style variant.
  • The .spotlight.style1 .image img is position: absolute, so the wrapping <a> needs to fill the pane without breaking the orientation rules in _spotlight.scss.

Acceptance criteria

  • A spotlight image can be opened at full frame, uncropped, and closed again with keyboard as well as pointer.
  • Touch devices get the same behaviour, with no hover-only affordance.
  • check-render still passes at desktop and 375px.
Dominant language
HTML
Stars
0
Forks
0
Avg merge
8h 17m
Merged PRs (30d)
58

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from laywill/laywill.github.io

All issues in laywill/laywill.github.io

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.