Seleccione su idioma

Documentación de Isotope Gallery

Isotope Gallery es un módulo de Joomla para galerías de imágenes y vídeos adaptables que incluye filtros, redimensionamiento opcional de imágenes, diseños y un visor emergente de LightGallery.

1. Requisitos

  • Joomla 3.6 o posterior, PHP 8 o superior.
  • El módulo debe instalarse en modules/mod_mx_isotopegallery.
  • Para el redimensionamiento de imágenes, se recomienda que PHP sea compatible con GD y que el directorio de caché de Joomla sea de escritura.
  • Para los elementos de YouTube y Vimeo, el navegador del visitante debe poder cargar los archivos multimedia externos.

2. Instalación y publicación

  1. En el panel de administración de Joomla, abre Sistema > Instalar > Extensiones.
  2. Sube mod_mx_isotopegallery.zip y completa la instalación.
  3. Abre Extensiones > Módulos y crea o edita un módulo Isotope Gallery.
  4. Elige una posición de plantilla, configura el módulo como «Publicado» y configura la asignación al menú.
  5. Guarda el módulo y abre una página de la interfaz de usuario a la que se haya asignado.

El paquete utiliza archivos de su assets, core, field, elements, y tmpl directorios. Mantén estos directorios al mover o actualizar el módulo.

3. Inicio rápido

  1. Selecciona «Artículos», «Elementos personalizados» o «Carpeta» en «Fuente».
  2. Configure los campos que se muestran para esa fuente y añada al menos un elemento o artículo válido.
  3. Seleccione «Galería» o «Isotope» en «Diseño» y, a continuación, seleccione el número de columnas.
  4. Elija si desea habilitar la galería emergente y configure sus controles en «Configuración de la galería».
  5. Publica el módulo en una posición generada por la plantilla activa.

4. Opciones de la fuente

Artículos

Los artículos se cargan desde el com_content y se limitan a los artículos publicados y accesibles, así como al idioma activo.

  • La opción «Seleccionar categoría» permite elegir las categorías de los artículos.
  • La opción «Artículos de categorías secundarias» incluye las categorías secundarias cuando está activada.
  • «Profundidad de la categoría» limita el número de niveles secundarios que se incluyen.
  • «Artículos destacados» muestra todos, oculta o muestra solo los artículos destacados.
  • «Campo del artículo por el que ordenar» admite el orden del administrador, el orden de los artículos destacados, las visitas, el título, el ID, el alias y las fechas de publicación.
  • «Dirección de ordenación» permite elegir entre orden ascendente o descendente.
  • «Recuento» establece el número máximo de artículos. Un valor de 0 significa que no hay límite.
  • «Abrir enlace» abre el artículo en la misma ventana, en una nueva ventana o en una ventana emergente.

Texto y metadatos del artículo

  • Se pueden mostrar u ocultar el título de la categoría, el título del artículo, la descripción, la fecha, el autor y el enlace «Leer más».
  • «Longitud máxima del título» y «Longitud máxima de la descripción» recortan el texto mostrado. Utiliza 0 para mostrar todo el texto.
  • El «Formato de fecha» admite los formatos de fecha de PHP enumerados, como Y-m-d y l, d F Y.
  • El «Texto de “Leer más”» cambia la etiqueta utilizada para el enlace del artículo.

Elementos personalizados

Los elementos personalizados se introducen en el subformulario «Elementos». Añade una fila por cada elemento de la galería.

Campo Cómo utilizarlo
Tipo Selecciona image, youtube, o vimeo.
Imagen Selecciona una imagen multimedia de Joomla cuando el tipo sea image.
YouTube / Vimeo Pega la URL completa del vídeo para el tipo de vídeo seleccionado.
Nombre del filtro Introduce uno o más nombres de clases de filtro separados por espacios; por ejemplo nature featured.
Título, Autor, Información Texto opcional que se muestra junto al elemento.
Enlace «Leer más» URL opcional asociada al título del elemento.
Abrir enlace en una nueva ventana Elige entre la ventana actual o una nueva ventana para el enlace «Leer más».
Altura del elemento para el estilo «Galería» Utiliza «Normal» o «Doble». Esto se aplica al diseño de galería, no al diseño Isotope.

Para utilizar el filtrado personalizado, activa «Usar filtrado», crea nombres de filtro en el subformulario «Filtro(s)» y utiliza los mismos nombres en el campo «Nombre del filtro» de cada elemento.

Carpeta

Selecciona un directorio situado bajo el images con la opción «Directorio de la carpeta». El módulo escanea ese directorio y sus subdirectorios.

  • El orden de las imágenes admite el orden alfabético, de más reciente a más antiguo y el orden aleatorio.
  • Las extensiones de archivos multimedia locales compatibles incluyen jpg, jpeg, png, gif, bmp, webp, mp4, webm, ogg, ogv, mov, y m4v.
  • El «Título de la imagen» muestra el nombre del archivo sin su extensión. Los guiones bajos, los guiones y los números se convierten en espacios.
  • Cuando se activa la opción «Usar filtrado», los nombres de las subcarpetas de primer nivel se convierten en botones de filtro.
images/gallery/landscape/sunrise.jpg
images/gallery/portrait/person.jpg

Con images/gallery seleccionada, landscape y portrait se pueden utilizar como filtros de carpetas.

5. Filtrado

Filtros de artículos

Para los artículos, activa los filtros de categoría y/o los filtros de etiquetas. Los botones de filtro se generan a partir de las categorías y etiquetas presentes en los resultados de artículos cargados. Activa «Mostrar etiquetas de filtro» para mostrar las etiquetas configuradas, y activa «Mostrar botón Todos» para mostrar el botón de todos los elementos con el texto de «Texto del botón Todos».

Filtros de elementos personalizados

Los nombres de los filtros personalizados son nombres de clases CSS. Mantén los nombres sencillos y utiliza la misma ortografía en la definición del filtro y en las filas de elementos. Si un elemento contiene varios nombres, aparecerá en cada filtro que coincida.

Filtros de carpetas

Los filtros de carpetas utilizan el primer nivel de directorios por debajo de la carpeta seleccionada. Los archivos que se encuentran directamente dentro de la carpeta seleccionada no pertenecen a ningún filtro de carpeta con nombre, pero siguen siendo visibles a través de «Todos».

6. Imágenes y cambio de tamaño

Fuentes de imágenes de los artículos

Activa las fuentes de imágenes deseadas y define su prioridad en «Orden de obtención». El orden predeterminado es:

image_intro, image_fulltext, inline_introtext, inline_fulltext
  • «Desde la imagen de introducción» lee la imagen de introducción del artículo.
  • «Desde imagen del texto completo» lee la imagen del texto completo del artículo.
  • «Desde el texto de introducción en línea» busca imágenes dentro del texto de introducción.
  • «Desde el texto completo en línea» busca imágenes dentro del texto completo.

Se utiliza la primera imagen disponible según el orden configurado. «Ruta del marcador de posición» proporciona la imagen de reserva cuando no hay ninguna imagen del artículo disponible.

Configuración de redimensionamiento

Establece el «Modo de redimensionamiento» en una opción de redimensionamiento para crear versiones en caché de las imágenes locales. La opción «Ninguna» deja la imagen original sin cambios.

  • «Centrar» redimensiona y centra el resultado.
  • «Rellenar» redimensiona la imagen para que ocupe las dimensiones solicitadas y puede recortar los bordes.
  • «Ajustar» mantiene la imagen dentro de las dimensiones solicitadas.
  • «Estirar» impone el ancho y la altura solicitados y puede modificar la relación de aspecto.
  • La compresión de calidad admite valores del 1 al 100.
  • El «Formato de salida» puede mantener el formato original o generar GIF, JPEG, PNG o WEBP.
  • La opción «Mantener transparencia» se aplica a los archivos de salida GIF y PNG.
  • «Ancho de la imagen» y «Altura de la imagen» definen las dimensiones de destino. Los valores deben ser mayores que cero cuando el redimensionamiento está habilitado.

Los archivos generados se almacenan en el directorio «resize» de la caché de Joomla. Asegúrate de que PHP pueda crear y escribir en ese directorio. Las imágenes externas y los archivos de vídeo no son procesados por la herramienta de redimensionamiento de imágenes.

7. Diseño y apariencia

  • Diseño: «Galería» utiliza el tratamiento de elementos de galería; «Isotope» utiliza el tratamiento de cuadrícula Isotope.
  • Efecto de paralaje: habilita las imágenes con efecto de paralaje para el diseño de Isotope.
  • Columnas: selecciona de una a seis columnas.
  • Estilo: elige la hoja de estilo «Claro» o «Oscuro».
  • Detalles: muestra los detalles al pasar el cursor por encima o los muestra de forma predeterminada.
  • Color: establece el color de acento para fondos, enlaces y filtros activos.
  • Espacio entre elementos: selecciona el espacio entre los elementos.
  • Font Awesome: carga Font Awesome 4 o 5 solo cuando es necesario para garantizar la compatibilidad de los iconos.
  • Correcciones SEO: activa esta opción cuando la plantilla requiera que se añada la ruta raíz del sitio a las miniaturas de las imágenes de la galería.
  • Cargar jQuery: actívalo solo si la plantilla aún no incluye jQuery.
  • CSS personalizado: añade declaraciones CSS a la página. Limita los selectores al módulo para evitar modificar otros componentes.

Estos ajustes configuran la ventana emergente de LightGallery. Solo surten efecto cuando está activada la opción «Usar galería emergente».

Configuración Efecto
Tema blanco Utiliza el tema blanco de LightGallery.
Tipo de transición Utiliza una transición de fundido o deslizamiento.
Bucle Permite navegar desde el último elemento hasta el primero.
Botón de descarga Muestra u oculta el control de descarga.
Miniatura Muestra u oculta las miniaturas.
Animación de miniaturas Utiliza miniaturas animadas o estáticas.
Reproducción automática / Controles de reproducción automática Inicia la reproducción automática y controla si los controles de reproducción están visibles.
Tiempo entre transiciones Establece la pausa de la reproducción automática en milisegundos.
Duración de la transición Establece la duración de la animación en milisegundos.
Pantalla completa, Zoom, Rueda del ratón, Compartir Activa o desactiva la función correspondiente del visor.
Controles de rotación Activa las herramientas de rotación y volteo, con interruptores independientes para cada control.
Velocidad de rotación Establece la duración de la animación de rotación en milisegundos.

Los vídeos de carpetas locales y los elementos personalizados de YouTube o Vimeo utilizan la compatibilidad con vídeo de la galería cuando la ventana emergente está activada. Las políticas de reproducción automática del navegador pueden requerir la reproducción sin sonido o la interacción del usuario.

9. Ajustes avanzados

  • El sufijo de clase del módulo añade un sufijo de clase al contenedor del módulo para aplicar estilos específicos de la plantilla.
  • «Diseño alternativo» selecciona una sustitución de diseño de módulo disponible.
  • El almacenamiento en caché puede utilizar la configuración global de Joomla o desactivar el almacenamiento en caché del módulo.
  • «Tiempo de caché» establece la duración de la caché cuando está habilitada.

10. Solución de problemas

No aparece ningún elemento

  • Comprueba que el módulo esté publicado, asignado a la entrada de menú actual y colocado en una posición de la plantilla que se muestre.
  • En el caso de los artículos, comprueba el estado de publicación, el nivel de acceso, el idioma, las categorías, la configuración de destacados y el recuento.
  • En el caso de los elementos personalizados, comprueba que el subformulario contenga elementos y que las URL de las imágenes o los vídeos sean válidas.
  • En el caso de las carpetas, comprueba que la ruta seleccionada exista en images y contiene archivos compatibles.

Faltan filtros

Los filtros de artículos se crean únicamente a partir del resultado del artículo actual. Los filtros personalizados requieren que los nombres coincidan tanto en la lista de filtros como en las filas de elementos. Los filtros de carpetas requieren subdirectorios de primer nivel.

No se cambia el tamaño de las imágenes

Elige un modo de redimensionamiento, introduce dimensiones positivas, confirma que PHP GD está compatible y comprueba que el directorio de caché de Joomla sea escribible. El procesamiento de redimensionamiento se aplica a imágenes locales, no a URL remotas ni a vídeos.

La ventana emergente no se abre

Activa la opción «Usar galería emergente», comprueba si hay errores de JavaScript o conflictos entre bibliotecas y evita cargar una segunda copia incompatible de jQuery. Vacía las cachés de Joomla y del navegador tras modificar scripts o estilos.

El vídeo no se reproduce

Comprueba la URL del archivo multimedia, los permisos del archivo, el tipo MIME, la compatibilidad del navegador y la configuración de privacidad o de incrustación del proveedor externo. El navegador puede bloquear la reproducción automática hasta que el visitante interactúe con la página.

11. Actualización

Haz una copia de seguridad de la configuración del módulo y de los archivos del sitio antes de actualizar. Instala el archivo ZIP más reciente a través del instalador de extensiones de Joomla. El manifiesto de la extensión indica un servidor de actualizaciones, por lo que Joomla también puede ofrecer actualizaciones cuando se pueda acceder al servidor.

Artículos relacionados

Suscríbase a nuestro boletín

Manténgase al día con ventas, promociones, actualizaciones de productos y lanzamientos de nuevos productos.