Crea una galería de imágenes.

Aprende DXPR BuilderCrear páginasSigue un tutorial

Aquí creas una galería de fotos: un encabezado centrado, tres fotos lado a lado con texto alternativo, y una presentación en una banda gris. Úsala para mostrar un lugar o un evento en imágenes. Para mostrar proyectos cada uno con su descripción, sigue Crea una galería de portafolio en su lugar.

El vídeo crea una galería de pinturas de estudiantes para una universidad.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda al menos seis fotos, recortadas a las mismas proporciones.
  • La página está abierta en el constructor. Para una nueva, ve a Contenido > Añadir contenido > Página de destino (/node/add/landing_page) y haz clic en Guardar.

Paso 1: añade el encabezado

  1. Haz clic en Añadir elementos en la página vacía y elige Sección en la pestaña Diseño.
  2. Pasa el cursor sobre la sección y abre Más > Ajustes. En Clases HTML elige Centrar texto, y haz clic en Guardar.
  3. Haz clic en + en la sección y elige Texto en la pestaña Contenido.
  4. Escribe «Galería de arte estudiantil» como Encabezado 2, añade una línea de presentación y haz clic en Guardar. El tema imprime el título de página como Encabezado 1 de la página. Para que este encabezado sea el Encabezado 1 en su lugar, lee Crea páginas amables con el SEO.

Paso 2: añade la cuadrícula de fotos

  1. Pasa el cursor sobre la sección y haz clic en Añadir sección debajo. Haz clic en + en la sección nueva y elige Fila; llega con dos columnas iguales.
  2. Haz clic en el icono de cuadrícula de la fila (Diseño de columnas), elige el ajuste 1/3 + 1/3 + 1/3 y haz clic en Guardar.
  3. Haz clic en + en la primera columna y elige Imagen.
  4. Haz clic en Seleccionar imagen, busca en la biblioteca de medios con Aplicar filtros, haz clic en una foto y haz clic en Insertar selección.
  5. Abre el panel SEO y escribe el atributo Alt: lo que debería saber quien no puede ver la foto. Haz clic en Guardar.
  6. Repite para la segunda y la tercera columna.

Las fotos recortadas a las mismas proporciones mantienen la fila pareja.

Paso 3: añade la presentación

  1. Añade una tercera sección con Añadir sección debajo y abre Más > Ajustes. Elige Centrar texto en Clases HTML y un Fondo gris claro en el panel Estilo. Haz clic en Guardar.
  2. Haz clic en + en la sección y elige Carrusel de imágenes.
  3. Haz clic en Seleccionar imagen, busca en la biblioteca, haz clic en tres fotos y haz clic en Insertar selección, y haz clic en Guardar.
  4. Haz clic en + en la sección de nuevo y elige Texto; cae encima del carrusel. Escribe «Presentación» como Encabezado 2 y haz clic en Guardar.

Paso 4: guarda y muestra la vista previa

  1. Haz clic en Guardar en la barra de herramientas del constructor.
  2. Abre el menú de vista (el icono de ojo) y elige Vista previa.

Ve más allá

No sale en el vídeo:

  • Pies de foto: pon una Tarjeta en la columna y añade un elemento Texto con el pie dentro. Luego añade la Imagen dentro de la tarjeta; cae encima del pie.
  • Fotos a tamaño completo: pon Enlace de imagen en el archivo a tamaño completo y Destino del enlace de imagen en Ventana nueva.
  • Estilo: en cada imagen, pon Radio de bordes en 4 y Sombra paralela en 1 en el panel Estilo para un relieve suave.
  • Ritmo de presentación: fija el Intervalo del carrusel, en milisegundos. En Esconder, marca Esconder control de paginación o Esconder botones anterior/siguiente para quitar esos controles.
  • Galería que se llena sola: en Estructura > Vistas > Añadir vista, crea una vista de medios de Imagen con una pantalla de bloque en formato Cuadrícula. Insértala desde la pestaña Vistas de Drupal, y las subidas nuevas aparecen solas.

Lo que ves

El encabezado centrado abre la página, seguido de tres fotos lado a lado. En la banda gris de abajo, la presentación muestra una foto cada vez y avanza a la siguiente cada cinco segundos.

Si no ves las fotos como se muestra

  • Insertar selección no añade foto. La biblioteca aún recargaba tras Aplicar filtros, así que tu clic no marcó la foto. Espera a que la cuadrícula se asiente, comprueba que la foto muestra una marca, y haz clic en Insertar selección de nuevo.
  • La biblioteca de medios está vacía. Aún no hay imágenes subidas, o el navegador de medios no está configurado. Lee Las imágenes no se suben o desaparecen.
  • Las tres fotos tienen distintos altos. Sus proporciones difieren. Recórtalas a las mismas proporciones, súbelas de nuevo y elige las copias nuevas.
  • Tus cambios desaparecieron tras recargar. Saliste de la página antes de hacer clic en Guardar en la barra de herramientas del constructor. Si Guardar muestra un error, lee Los cambios no se guardan.

¿Qué sigue?