D1. Imágenes - Funcionamiento de las imágenes
Sistema de gestión de imágenes subidas por el administrador
El sistema de imágenes de la aplicación emplea un mecanismo centralizado para facilitar la gestión de todas las imágenes relacionadas con los productos.
De esta forma, la configuración de las imágenes para productos, características y valores es común y unificada, garantizando coherencia visual y simplificando la administración.
Cuando se sube una imagen al sistema, esta se almacena en su tamaño original en el servidor.
A partir de esa imagen original, la aplicación genera automáticamente las versiones necesarias para mostrarse en los diferentes lugares de la página (por ejemplo, miniaturas, listados o sliders).
Las dimensiones de cada tipo se definen en la pestaña “Tamaños de imágenes”, dentro del menú Apariencia.
Si la imagen original llegara a faltar en el sistema, es posible que las versiones generadas sigan mostrándose temporalmente.
Sin embargo, al solicitar una regeneración de imágenes, estas copias se perderán al no disponer de un archivo de origen desde el que reconstruirse.
Configuración general
En la sección de Gestor → Ajustes → Imágenes, se definen los diferentes tipos de imagen, indicando sus dimensiones (ancho y alto), si se rellena el espacio, si lleva marca de agua, y cuál de ellas está marcada por defecto.
La imagen de tipo “list” debe estar establecida como por defecto.
Ejemplo de tipos configurados:
| Nombre |
Ancho en px | Alto en px | Por defecto | Llenar | Marca de agua |
|---|---|---|---|---|---|
| thumb | 80 | 80 | No | ✔️ | ❌ |
| list | 300 | 200 | Sí | ✔️ | ❌ |
| preview | 550 | 350 | No | ✔️ | ❌ |
| slider | 872 | 403 | No | ✔️ | ❌ |
El tamaño de ancho y alto se especifica en pixeles.
Identificación del tipo de imagen que se está mostrando
Para reconocer qué tipo de visualización se está utilizando en una página, puedes inspeccionar la imagen con las herramientas de desarrollador del navegador.
El nombre del tipo aparece en la clase del elemento, por ejemplo:
div.image.gallery-image-thumb
Tipos de presentación de imágenes existentes
1. Thumb. Se usa para los listados o secciones del gestor en las que las imágenes se muestran en tamaño pequeño.
2. List. Se utiliza en las vistas públicas donde las imágenes se muestran en tamaño medio, como en los editores de imágenes de las características o en miniaturas visuales de productos.
3. Preview. Se aplica en las imágenes asociadas a valores de características u otros elementos que requieren una vista previa intermedia.
4. Slider. Corresponde al carrusel de imágenes de la ficha de producto, donde se muestran imágenes grandes y de mayor calidad.
Recomendaciones
-
Evitar eliminar tipos de imagen si ya están en uso.
-
Si se modifican las dimensiones de los tipos, es necesario regenerar las imágenes para aplicar los nuevos tamaños.
-
Conservar siempre la imagen original, ya que es la base para regenerar el resto de formatos.
El maquetador Builder dispone de un gestor de imágenes. Mediante este sistema se pueden subir imágenes para luego ser mostradas en otras secciones de la tienda mediante la url absoluta de la imagen. Como por ejemplo; la publicidad del Kit Digital.
