Skip to main content

D2. Imágenes - Subida de imágenes por administrador

El sistema de subida de imágenes, a excepción del maquetador Builder, es reconocible por presentar esta interfaz.

image.png

Presenta un botón de tipo texto llamado "Editar imágenes".
Y previsualización de las imágenes subidas.

Al hacer clic en el botón se accede a la interfaz de edición de subida y gestión de imágenes por el administrador para presentar en la tienda.

image.png

Elemento

Función
botón con icono

image.png

Abre el explorador del dispositivo para seleccionar y cargar la imagen. No requiere guardado. 
Visualización de imágenes subidas
Espacio en el que se visualiza miniatura de la imagen subida. Al poner el cursor encima de una de las miniaturas mostrará en el espacio izquierdo la imagen en mayor tamaño.
image.png
Imagen con marco azul turquesa Destaca la imagen definida como por defecto. Es la que se mostrará en diferentes tamaños de visualización. Como por ejemplo; en el listado del producto del gestor (thumb), en la vista de los productos en la categoría, (list) entre otros.

Para definir la imagen por defecto se presenta un icono de estrella. Este icono aparece al poner el cursor sobre la miniatura de la visualización de la imagen. Al hacer clic en él se establece la imagen como por defecto.

Para eliminar la imagen aparece un icono de cubo de basura que actúa como botón para la acción.

image.png

Previsualización de imágenes Además de permitir previsualizar las imágenes subidas permite ordenar la posición en la que aparecen. Con clic en la imagen, mantener y arrastrar se puede cambiar la posición de las imágenes. En el orden en el que están será en el orden que se verán. Salvo la definida como por defecto que en otros modos de presentación será la que se muestre independientemente de la posición en la que esté.




La aplicación muestra las imágenes en estos tipos. Los tipos serán utilizados para mostrar las imágenes en diferentes modos en la vista del cliente.


image-1666090391450.png



Uno de los tipos de imagen ha de estar definida como por defecto. Se recomienda poner por defecto la de tipo "list".

image.png



Para reconocer que tipo de visualización se está utilizando inspeccionar la imagen con el inspector de código del navegador.


image-1666089959347.png


Thumb

Este tipo se usa para los listados o secciones de la vista pública o gestor en las que se muestran en pequeño tamaño como por ejemplo; en el listado de productos del gestor. 


image.png


List

Este tipo se usa para visualizar las imágenes los listados o secciones de la vista pública en las que se muestran en tamaño medio como por ejemplo; en las imágenes subidas en el editor de imágenes de la característica en la vista pública entre otros.

image.png


image-1666090256252.png



Preview

Este tipo se usa por ejemplo; en las imágenes de los valores de algunos tipos de características entre otros.



image-1666090721837.png

 image-1666090768083.png

     


Slider

Este tipo se usa por ejemplo; en el slider de la ficha de producto.


image.png

     


image-1666091329038.png

 image-1666091366644.png