Gallery Revolution: configuración y ayuda

Sube e instala mprgalleryrevolution y haz clic en "Configure". Abre Galería > Ajustes > Configuración. Elige un producto de prueba con varias imágenes nativas de PrestaShop.

Deja Activar galería de productos activado. Abre el producto y confirma que aparece exactamente una galería utilizable. El módulo lee las imágenes nativas del producto y también admite medios adjuntos a su galería. No necesitas crear un registro de galería solo para mostrar las imágenes nativas del producto.

El hook del producto es displayAfterProductThumbs desde PrestaShop 1.7 y displayLeftColumnProduct en 1.6.1. El módulo también se integra con las plantillas nativas de galería y los proveedores compartidos de galería. Si tu tema personalizado modifica esa zona, prueba su integración antes de ocultar la galería existente.

En Galería > Ajustes > Configuración:

• Activar galería de productos. Sustituye la galería de productos nativa por Gallery Revolution en las páginas de producto; valor predeterminado: true.
• Diseño de la galería. Selecciona el diseño de la galería de productos: carousel, grid o filmstrip; valor predeterminado: carousel.
• Posición de las miniaturas. Coloca las miniaturas en bottom, left, right, dots o none; valor predeterminado: bottom.
• Disposición de miniaturas. Elige una sola fila desplazable de miniaturas o una cuadrícula de varias filas; valor predeterminado: swiper.
• Columnas de miniaturas. Establece el número de columnas en el modo de cuadrícula inferior de miniaturas; valor predeterminado: 6.
• Filas máximas de miniaturas. Limita las filas de la cuadrícula antes del desplazamiento, donde 0 significa sin límite; valor predeterminado: 0.
• Espacio entre miniaturas. Establece la separación entre miniaturas de la cuadrícula en píxeles; valor predeterminado: 8.
• Opacidad de miniaturas inactivas. Establece la opacidad de las miniaturas no activas de 0 a 1; valor predeterminado: 0.6.
• Fondo de la galería. Activa un color de fondo detrás de la imagen principal de la galería; valor predeterminado: false.
• Color de fondo de la galería. Establece el color de fondo cuando el fondo de la galería está activado; valor predeterminado: transparent.
• Activar zoom. Activa los controles de zoom en la lightbox de imágenes del producto; valor predeterminado: true.
• Reproducción automática. Inicia automáticamente el carrusel de la galería de productos; valor predeterminado: false.
• Retraso de reproducción automática. Establece el retraso de reproducción automática en milisegundos; valor predeterminado: 5000.
• Ocultar galería nativa. Añade CSS del módulo que oculta la galería de productos nativa de PrestaShop; valor predeterminado: true.

Usa las miniaturas en cuadrícula inferior cuando necesites varias filas visibles. Cambia Columnas de miniaturas, Filas máximas de miniaturas y Espacio entre miniaturas conjuntamente. 0 filas máximas significa sin límite de filas. Usa Opacidad de miniaturas inactivas para ajustar el contraste de las miniaturas no seleccionadas.

Sincronizar imágenes nativas no es un campo visible en esta configuración. Las imágenes nativas del producto se leen directamente; sus registros originales de PrestaShop siguen siendo la fuente.

• Activar lightbox. Abre las imágenes de la galería de productos en PhotoSwipe al hacer clic; valor predeterminado: true.
• Color de superposición del lightbox. Establece el color de fondo de la superposición de PhotoSwipe; valor predeterminado: #ffffff.
• Opacidad de la superposición del lightbox. Establece la opacidad de la superposición de 0 a 1; valor predeterminado: 0.95.
• Mostrar leyendas en el lightbox. Permite leyendas en el visor PhotoSwipe; valor predeterminado: true.
• Color de la leyenda del lightbox. Establece el color del texto de las leyendas en la lightbox; valor predeterminado: #ffffff.
• Color de los controles del lightbox. Establece el color de los controles de la lightbox, como cerrar, flechas y botones de la barra de herramientas; valor predeterminado: #ffffff.
• Tira de miniaturas del lightbox. Muestra una tira de miniaturas dentro de la lightbox; valor predeterminado: true.
• Posición de la tira de miniaturas (escritorio). Coloca la tira de miniaturas de la lightbox en left, right, top o bottom; valor predeterminado: left.
• Posición de la tira de miniaturas (móvil). Coloca la tira de miniaturas móvil en top o bottom; valor predeterminado: top.
• Activar leyendas de imágenes. Muestra leyendas de las imágenes de PrestaShop o de los medios personalizados; valor predeterminado: false.
• Visualización de leyendas. Muestra las leyendas bajo la galería, en la lightbox o en ambos lugares; valor predeterminado: both.
• Nombre del parámetro de URL de foto. Establece el parámetro de consulta traducido usado en los enlaces de imágenes, por ejemplo ?photo=2; valor predeterminado: photo.
• Acción de enlace profundo. Decide si un enlace de imagen selecciona la diapositiva o abre la lightbox; valor predeterminado: lightbox.
• Mostrar botón de compartir/copiar enlace. Añade un botón que copia un enlace directo a la imagen actual; valor predeterminado: true.

Los valores predeterminados actuales son una superposición blanca con opacidad 0.95 y una tira de miniaturas visible en la lightbox. Comprueba el contraste de los controles y las leyendas cuando cambies el fondo.

Usa Activar leyendas de imágenes y Visualización de leyendas junto con los controles de leyendas de la lightbox. Las leyendas proceden de las imágenes nativas o de los medios adjuntos. Una imagen sin leyenda no recibe un texto significativo solo por activar las leyendas.

Configura Nombre del parámetro de URL de foto para cada idioma. Con el valor predeterminado photo, un enlace puede ser https://example.com/product-name.html?photo=2. Acción de enlace profundo tiene como valor predeterminado lightbox; también puedes seleccionar una diapositiva o usar la opción de desactivación disponible. Comparte/copia el enlace y pruébalo en una pestaña nueva del navegador.

• Activar lightbox de imágenes de contenido. Aplica PhotoSwipe a las imágenes configuradas dentro del contenido de las páginas; valor predeterminado: true.
• Selectores de imágenes de contenido. Define qué imágenes de contenido se incluyen mediante selectores CSS; valor predeterminado: .rte img, .cms-content img, .page-content.page-cms img, .category-description img, .product-description img, .product-description-short img, .mce-content-body img, .mpr-seo-row__img img, figure img.
• Selectores de imagen excluidos. Excluye las imágenes que coincidan con estos selectores. Valor predeterminado: .mprgallery img, .pswp img, img[data-mprgallery-ignore], img[data-no-lightbox], img.mprgallery-content-lightbox-ignore, footer img, #footer img. Añade exclusiones específicas del tema cuando sea necesario.
• Mostrar miniaturas en la lightbox de contenido. Muestra un navegador de miniaturas para las imágenes de contenido; valor predeterminado: true.
• Posición de miniaturas. Coloca las miniaturas de la lightbox de contenido en bottom, top, left o right; valor predeterminado: bottom.
• Anchura mínima de la imagen. Ignora imágenes de contenido más estrechas para que los iconos e insignias no se abran en la lightbox; valor predeterminado: 120.
• Altura mínima de la imagen. Ignora imágenes de contenido más bajas para que los iconos e insignias no se abran en la lightbox; valor predeterminado: 80.

Los selectores predeterminados cubren texto enriquecido, CMS, descripciones de categorías/productos, contenido del editor, filas de imágenes SEO y figuras. Adapta los selectores a tu tema. Las exclusiones predeterminadas incluyen imágenes del pie de página, de galería/lightbox y exclusiones explícitas.

Para indicar explícitamente la imagen a tamaño completo y la miniatura:

<img src="/img/cms/example-small.jpg"
     data-mprgallery-full="/img/cms/example-large.jpg"
     data-mprgallery-thumb="/img/cms/example-thumb.jpg"
     data-pswp-width="1600" data-pswp-height="1200"
     alt="Your image description">

Usa las dimensiones reales a tamaño completo. Para excluir un icono, una insignia o una imagen decorativa, añade un atributo o una clase:

<img src="/img/cms/badge.png" alt="Badge" data-no-lightbox>
<img src="/img/cms/logo.png" alt="Logo" data-mprgallery-ignore>
<img src="/img/cms/icon.png" alt="Icon" class="mprgallery-content-lightbox-ignore">

Si una imagen no se incluye, comprueba su selector, las exclusiones y el tamaño mínimo antes de cambiar JavaScript.

• Activar subidas de clientes. Activa la función de fotos de clientes; valor predeterminado: true.
• Compra requerida. Acepta subidas solo de clientes que hayan iniciado sesión y tengan un pedido válido del producto; valor predeterminado: true.
• Archivos máx. por carga. Limita el número de fotos que el formulario de subida acepta a la vez; valor predeterminado: 5.
• Tamaño máx. del archivo. Establece el tamaño máximo de las fotos de clientes en MB; valor predeterminado: 5.
• Aprobar automáticamente las cargas. Publica las fotos de clientes sin moderación manual; valor predeterminado: false.

Los clientes deben iniciar sesión para subir un archivo, incluso cuando Compra requerida está desactivado. Con el requisito de compra activado por defecto, necesitan un pedido válido de ese producto. Las subidas aceptan archivos de imagen JPEG, PNG y WebP dentro del tamaño configurado por archivo. También se aplican los límites de subida del servidor.

Con Activar subidas de clientes activado, la sección Fotos de clientes aparece cuando hay fotos aprobadas o el cliente que ha iniciado sesión puede subirlas. Los clientes que cumplen los requisitos pueden enviar la primera foto de un producto sin fotos aprobadas. Desde PrestaShop 1.7 utiliza una pestaña de contenido adicional del producto; en 1.6.1 utiliza displayProductTabContent.

Abre Galería > Fotos de clientes para aprobar, rechazar o eliminar los envíos existentes. Las fotos pendientes no son públicas. Aprobar automáticamente las cargas está desactivado por defecto. La ubicación depende de que tu tema muestre el hook del producto correspondiente.

• Detectar automáticamente tipos de imagen. Permite al módulo elegir tipos de imagen PrestaShop adecuados para las imágenes principales, las miniaturas y la lightbox; valor predeterminado: true.
• Tipo de imagen del lightbox. Establece el tipo de imagen PrestaShop para la lightbox cuando la detección automática está desactivada; valor predeterminado: thickbox_default.
• Tipo de imagen de visualización principal. Establece el tipo de imagen PrestaShop para la imagen principal de la galería cuando la detección automática está desactivada; valor predeterminado: medium_default.
• Tipo de imagen en miniatura. Establece el tipo de imagen PrestaShop para las miniaturas cuando la detección automática está desactivada; valor predeterminado: small_default.
• Calidad JPEG. Establece la calidad JPEG de las variantes de imágenes de galería subidas; valor predeterminado: 85.
• Generar WebP. Crea variantes WebP de las imágenes de galería subidas si el servidor lo admite; valor predeterminado: true.
• Generar AVIF. Crea variantes AVIF de las imágenes de galería subidas si el servidor lo admite; valor predeterminado: false.
• Ancho de imagen grande. Establece el ancho de la variante grande generada en píxeles; valor predeterminado: 1200.
• Ancho de imagen mediana. Establece el ancho de la variante mediana generada en píxeles; valor predeterminado: 600.
• Ancho de miniatura. Establece el ancho de la miniatura generada en píxeles; valor predeterminado: 120.
• Carga diferida. Carga de forma diferida las imágenes secundarias de la galería de productos; valor predeterminado: true.
• Marcadores de posición con desenfoque. Crea y usa pequeñas imágenes de marcador de posición mientras cargan las imágenes más grandes de la galería; valor predeterminado: true.

Deja Detectar automáticamente tipos de imagen activado durante la primera prueba. Si lo desactivas, usa tipos de imagen existentes en tu tienda. Por ejemplo, establece Tipo de imagen del lightbox en thickbox_default, Tipo de imagen de visualización principal en large_default y Tipo de imagen en miniatura en small_default solo si esos tipos existen.

Los anchos de redimensionado y los controles JPEG/WebP/AVIF se aplican a las variantes de medios de galería subidos. No regeneran todas las imágenes nativas de los productos. La generación WebP y AVIF necesita las funciones PHP/GD correspondientes. Comprueba los archivos generados al cambiar los formatos.

Los ajustes Media incluyen Activar RA en modelos 3D (activado), Inercia de giro 360 (activado) y Rotación automática 360 (desactivado). La RA está disponible en dispositivos y navegadores compatibles. El visor 360 admite arrastrar, las teclas de flecha y botones para cambiar de fotograma; la rotación automática tiene un control de pausa e inicio. Las preferencias de movimiento reducido desactivan la rotación automática inicial y la inercia.

Reproducción automática de vídeos está desactivado por defecto y se guarda, pero no controla la reproducción en la tienda incluida. Los vídeos se inician al hacer clic en el botón de reproducción.

• Activar analíticas de visualización de imágenes. Registra visualizaciones de imágenes, aperturas de lightbox y acciones de compartir; valor predeterminado: false.
• Retención de eventos. Elimina eventos analíticos detallados después de este número de días y conserva las estadísticas agregadas; valor predeterminado: 90.
• Activar botón de descarga de imagen. Muestra un botón de descarga en la barra de herramientas de la lightbox; valor predeterminado: true.
• Patrón de nombre de archivo de descarga. Controla los nombres de archivo de las imágenes descargadas con variables como {shop}, {product} e {index}; valor predeterminado: {shop}-{product}-{index}.

Activa las analíticas para registrar visualizaciones de imágenes, aperturas de lightbox y acciones de compartir. Revisa Galería > Analítica después de las acciones. Estos informes miden las interacciones registradas con las imágenes en lugar del número exacto de visitantes.

Para el nombre de una descarga puedes usar {shop}-{product}-{index}-of-{total}. Las variables admitidas incluyen {shop}, {product}, {index}, {total}, {id} y {original}. Prueba el nombre resultante en tu navegador.

Abre Galería > Galerías para crear o editar un registro:

• Título. Almacena el título traducible de la galería; valor predeterminado: empty.
• Descripción. Almacena la descripción traducible de la galería; valor predeterminado: empty.
• Tipo. Asigna el registro de galería a custom, product, category o cms; valor predeterminado: custom.
• ID de entidad. Almacena el ID del producto, categoría o página CMS relacionado cuando el tipo lo requiere; valor predeterminado: empty.
• Diseño. Establece el diseño del registro de galería, incluidos carousel, grid, masonry, slider o filmstrip; valor predeterminado: carousel.
• Posición de las miniaturas. Almacena la posición de las miniaturas de ese registro de galería; valor predeterminado: bottom.
• Lightbox. Activa o desactiva la lightbox de ese registro de galería; valor predeterminado: true.
• Reproducción automática. Activa o desactiva la reproducción automática de ese registro de galería; valor predeterminado: false.
• Retraso de reproducción automática. Establece el retraso de reproducción automática de ese registro en milisegundos; valor predeterminado: 5000.
• Activo. Activa o desactiva el registro de galería; valor predeterminado: true.

Elige Tipo y el ID de entidad correspondiente de forma deliberada. El diseño del registro tiene más opciones que el formulario global de producto, como masonry y slider. La galería nativa del producto usa los ajustes globales de producto; no supongas que el diseño almacenado en un registro sustituye esa configuración global.

Sube imágenes, cambia su orden y elige una portada en Galerías o Biblioteca de medios. Comprueba que la galería esté activa y que sus archivos existan. Una galería personalizada, de categoría o CMS solo aparece donde tu tema o una integración la muestra, así que prueba esa ubicación.

En el gestor de medios de una galería guardada, usa Add images or MP4/WebM videos para subir imágenes y vídeos. Para medios remotos, selecciona YouTube or Vimeo video o 3D model (HTTPS GLB URL), introduce la URL y elige Add media. En Add 360 spin frames, selecciona de 2 a 120 imágenes en una sola subida; los fotogramas se ordenan por nombre de archivo. Se aplican los límites del servidor sobre el número de archivos y el tamaño total de subida. Para mostrarlos en un producto, establece el Tipo de la galería en product y el ID de entidad en el ID del producto.

Para las versiones por idioma de las imágenes nativas del producto, abre el panel Gallery Revolution en la página de edición del producto. Selecciona una sola tienda y usa Upload or replace para cada imagen e idioma, o Remove language image para restaurar la imagen nativa. Se aceptan archivos JPEG, PNG, GIF y WebP dentro del límite de subida indicado.

Las plantillas del tema pueden sobrescribir:

themes/your-theme/modules/mprgalleryrevolution/views/templates/hook/product-gallery.tpl
themes/your-theme/modules/mprgalleryrevolution/views/templates/hook/customer-gallery.tpl

Los selectores CSS útiles incluyen #mprgallery-product, .mprgallery__img y .mprgallery-content-lightbox-trigger. Por ejemplo:

#mprgallery-product { --mprgallery-bg: #f8f8f8; --mprgallery-thumb-opacity: 0.55; }
#mprgallery-product .mprgallery__img { object-fit: contain; }
.mprgallery-content-lightbox-trigger { cursor: zoom-in; }

Ejecuta Galería > Configuración > Integridad. Prueba la navegación por miniaturas, táctil/deslizamiento, el zoom, las leyendas, los controles de pantalla completa/lightbox, el cierre, los enlaces para compartir y las descargas. Cambia las combinaciones del producto y comprueba la selección de imágenes. Prueba una imagen de contenido CMS y otra explícitamente excluida. Prueba el primer envío de un cliente en un producto sin fotos aprobadas, apruébalo y comprueba la visualización pública. Prueba los vídeos adjuntos, una vista de 360 grados y un modelo 3D si los usas.

Si ves dos galerías o ninguna, comprueba la integración del tema, Activar galería de productos, Ocultar galería nativa, displayAfterProductThumbs / displayLeftColumnProduct y las sobrescrituras de plantillas. Si fallan las imágenes grandes, comprueba los nombres de tipos de imagen, los archivos generados y las solicitudes del navegador. Si faltan lightbox de contenido, comprueba los selectores, las exclusiones y las dimensiones. Para las subidas, comprueba el inicio de sesión, el estado de compra, el tipo de archivo permitido, el tamaño de subida PHP y los permisos de escritura del almacenamiento.

Haz una copia de seguridad de los registros de galerías personalizadas, las fotos de clientes, los archivos multimedia y los ajustes. La desinstalación elimina los menús, las preferencias, la configuración y el esquema del módulo. También elimina la carpeta de variantes de idioma del almacenamiento externo de imágenes del módulo. Esta rutina no elimina los registros de imágenes de producto nativas de PrestaShop. No confíes en que se limpien automáticamente todos los demás archivos personalizados.

Vuelve a comprobar la galería de productos nativa restaurada y elimina las llamadas del tema o las sobrescrituras añadidas específicamente para este módulo. Conserva copias de seguridad de los medios de clientes y galerías antes de desinstalar.

Requiere PrestaShop 1.6.1 o posterior y PHP 7.1 o posterior.