Zum Inhalt springen

Galería de imágenes


Clave de extensión: gridgallery Desarrollador de la extensión: Philipp Mueller

TYPO3 Version:12 LTS11 LTS10 LTS9 LTS8 LTS

Esta extensión muestra cualquier número de imágenes en un sistema de cuadrícula.

La disposición de las imágenes se optimiza automáticamente mediante JavaScript según los formatos de las imágenes y el espacio disponible (similar al conocido efecto Masonry).

El enlace a la documentación de la extensión y más información se puede encontrar en el TYPO3 Extension Repository (TER).

Instalación

La extensión se puede instalar de la forma habitual, ya sea desde el backend a través del gestor de extensiones o a través de Composer.

La extensión vhs también se instala automáticamente como dependencia.

La plantilla estática de la extensión debe añadirse a su propia plantilla en la plantilla TypoScript.

A continuación, se pueden predefinir algunos valores por defecto en el editor de constantes.

Aquí también puede decidir si la extensión carga o no el framework de JavaScript jQuery.

El uso de esta opción depende de si jQuery ya está cargado en su sitio web o no. Si está utilizando nuestro proyecto de ejemplo, no necesita hacer nada más, ya que jQuery ya está incluido aquí.

En caso contrario, deberá comprobar si su sitio web ya carga jQuery. Esto puede aclararse rápidamente mirando el código fuente HTML del front-end.
En cualquier caso, debe evitar integrar jQuery más de una vez, ya que esto puede dar lugar a problemas y errores.

Crear galería

Para crear una galería de imágenes, cree un nuevo elemento de contenido en la página deseada.

En el asistente, encontrará el nuevo elemento de contenido "Galería de rejilla" en el área "Contenido de página típico".

A continuación, en las propiedades del elemento de contenido, puede añadir las imágenes deseadas mediante los botones correspondientes.

También puede activar "Hacer clic para ampliar" mediante un interruptor. Al hacer clic en una imagen en el frontend, se mostrará una versión ampliada de la misma con la ayuda del denominado efecto lightbox.

En el front-end, la salida podría tener este aspecto, por ejemplo:

La disposición de las imágenes se adapta automáticamente para aprovechar al máximo el espacio disponible, como puede verse en el siguiente vídeo.

Aktualisiert: 17.07.2024