Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Let spotlight images open full-size, like gallery images

Aperta
  • Qualcosa non va?
#184 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
html, javascript, scss
Ambito
accessibility, frontend, web-dev

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
HTML
Stelle
0
Fork
0
Merge medio
9h 52m
PR unite (30g)
59

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di laywill/laywill.github.io

Tutte le issue di laywill/laywill.github.io

Issue simili

Altre issue su Accessibility

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.