Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Let spotlight images open full-size, like gallery images

Abierto
  • ¿Algo no está bien?
#184 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
html, javascript, scss
Área
accessibility, frontend, web-dev

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
HTML
Estrellas
0
Forks
0
Merge medio
10 h 2 min
PR fusionados (30 d)
41

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de laywill/laywill.github.io

Todos los issues de laywill/laywill.github.io

Issues similares

Más issues de Accessibility

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.