Usando PhotoSwipe en Astro para crear una galería de imágenes

Using PhotoSwipe in Astro to Build an Image Gallery

En esta guía, aprenderá cómo usar PhotoSwipe en una aplicación Astro. Pasará por el proceso de configurar un nuevo proyecto Astro, instalar el módulo PhotoSwipe y convertir su colección de imágenes en una galería de imágenes.

Requisitos previos

Necesitará lo siguiente:

Nodejs 18 o posterior

Tabla de contenido

Crear una nueva aplicación Astro
Integra PhotoSwipe en tu proyecto Astro
[Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)
Código fuente
Conclusión

Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

npm create astro@latest my-app

npm create astro es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

Empty cuando se le pregunta cómo iniciar el nuevo proyecto
Sí cuando se le pregunte si planea escribir Typecript
Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
Sí cuando se le solicita instalar dependencias
Sí cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321

Ahora, pasemos a integrar PhotoSwipe en tu aplicación Astro.

Integra PhotoSwipe en tu proyecto Astro

Instalar el SDK de PhotoSwipe

Ejecute el siguiente comando para instalar el paquete necesario para usar PhotoSwipe:

npm install photoswipe
npm install -D @types/photoswipe

El comando instala la siguiente biblioteca:

photoswipe: una biblioteca de galería de imágenes de JavaScript independiente del marco
@types/photoswipe: definiciones de tipos para la biblioteca photoswipe

Crear una colección de imágenes

Usar PhotoSwipe (con la configuración predeterminada) requiere dos cosas:

Un elemento HTML principal (más comúnmente, un <div>) que contiene todas las imágenes.
Cada imagen debe incluirse en una etiqueta <a> que contiene los atributos alto y ancho de la imagen.

[[HTML_TAG] ] Puedes usar paquetes como

image-size para calcular las dimensiones de imágenes remotas fácilmente

Para asegurarse de que el elemento </aside> no se haga cargo del estilo de sus elementos <a>, puede usar el siguiente CSS para representar solo sus elementos secundarios: display:contents; En el siguiente ejemplo, utilizará la clase contents de Tailwind CSS

---
// File: src/pages/index.astro // [!code focus]
import { ViewTransitions } from "astro:transitions";
---
// [!code focus]
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <ViewTransitions />
  </head>
  <body>
    <div id="my-gallery" class="grid grid-cols-1 py-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow"
        />
      </a>
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow"
        />
      </a>
    </div>
  </body>
</html>

Convierte tu colección de imágenes en una galería de imágenes

En líneas mínimas de código con PhotoSwipe, puedes convertir tu colección de imágenes en una galería de imágenes interactiva. Puedes hacerlo fácilmente en 3 pasos:

Importar el CSS PhotoSwipe
Importar el módulo PhotoSwipe
Crea una caja de luz usando PhotoSwipe

Consulte el script a continuación para realizar los pasos anteriores en este ejemplo:

---
// File: src/pages/index.astro // [!code focus]
import { ViewTransitions } from "astro:transitions";
---
// [!code focus]
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <ViewTransitions />
  </head>
  <body>
    <div id="my-gallery" class="grid grid-cols-1 py-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow"
        />
      </a>
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow"
        />
      </a>
    </div>
    <script>
      import 'photoswipe/style.css'
      import pswpModule from 'photoswipe'
      import PhotoSwipeLightbox from 'photoswipe/lightbox'

      const lightbox = new PhotoSwipeLightbox({
        pswpModule,
        children: 'a',
        gallery: '#my-gallery',
      })

      document.addEventListener(
        'astro:page-load',
        () => { if (lightbox) lightbox.init() },
        { once: false },
      )
    </script>
  </body>
</html>

En el código anterior has hecho lo siguiente:

Importado el CSS PhotoSwipe
Creé una caja de luz que escucha los clics en todos los elementos <img>, presentes de forma periódica en el elemento HTML que tiene my-gallery como atributo de identificación.
Adjunta un detector de carga de página de Astro y activa la caja de luz Esta forma de crear una instancia de la caja de luz es útil ya que este script también se puede usar con Ver transiciones habilitadas en su aplicación Astro

Cree y pruebe su aplicación Astro localmente

Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:

npm run build && npm run preview

Código fuente

Para obtener todo lo prediseñado como en esta guía, visite https://githubes/rishi-raj-jain/astro-photoswipe-starter

Conclusión

En esta guía, aprendió cómo usar PhotoSwipe en una aplicación Astro para crear una galería de imágenes.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter