icon: LiBoxColecciones (Collection-Types)
En esta sección nos ocuparemos de explicar el funcionamiento general de Strapi para administrar los datos a mostrar.
Antes de empezar esta sección, recomiendo familiarizarse con los conceptos de Content-Type Builder y Content Manager
Este tipo de dato se correspondería a todos aquellos contenidos "coleccionables" que vamos a mostrar en nuestro frontend.
Todos los contenidos que aparecen en la web, a excepción quizá de un par de elementos, se pueden gestionar desde el backend.
Cabe destacar que este proyecto web está localizado, esto significa que hemos aplicado internacionalización, es decir, multi-lenguaje. Por lo que de cada elemento que creemos, sea colección o simple, hay que crear una versión en inglés y otra en castellano, pero eso lo veremos más adelante.
Añadir elementos a estas colecciones no implica que aparezcan automáticamente en la web, para ello, hay que seguir más procedimientos. VER EL TUTORIAL DE SINGLE TYPES
A continuación presento una lista de los tipos de colecciones que existen.
Message
Los mensajes que llegarán a través de la sección contacto de la web. No debemos añadir ni editar estos mismos, tan solo leerlos.
Product
Los productos visibles en la (sección de productos)[https://www.calsens.es/es/productos]
Cada uno de estos productos tiene los siguientes elementos (por orden de aparición)
| Campo | Función |
|---|---|
| Image | Imagen a mostrar en el producto (png, jpg o webp) |
| Title | Titulo del sensor a mostrar |
| Descripción | Descripción amostrar del producto |
| Datasheet | Archivo PDF |
Demostración de creación de productos
Project
Vista de proyectos general
Vista de proyecto individual
Vista de slug
Esta colección se corresponde con cada uno de los proyectos en la sección con el mismo nombre. Tanto los "thumbnails" como las "vistas individuales" dependen de este elemento.
| Campo | Función |
|---|---|
| Name | Nombre del proyecto en sí, tanto para la visión detalle como para la sección de proyectos |
| Subtitle | Subtítulo / categoría del proyecto. |
| Slug❓👀 | Este campo no es visible directamente. Es la slug que tendrá el proyecto en la url. |
| Date | Fecha del proyecto |
| Location | Ubicación |
| Client | Cliente del mismo |
| Gallery | Este componente permite subir las imagenes que se desee para que luego sean visibles en la vista detalle del proyecto. La portada del mismo será la primera imagen subida. |
| Description | Descripción del proyecto. |
| InvertSelectión❓👀 | Switch que permite invertir la presentación de imagenes/texto de cada proyecto. |
R&D Project
Vista de proyectos general
Vistas de proyecto individual
Este tipo de proyectos es un poco mas abstacto y dificil de "generalizar", por lo que he intentado simplificar la estructura para dar un poco más de libertad a la hora de maquetar cada uno.
Puesto que hay diferentes maquetaciones, he optado por intentar generalizarla de la siguiente forma:
| Campo | Función |
|---|---|
| Title | Titulo general del proyecto R&D |
| OverviewImage | Imagen que se verá tanto en la vista general como en la vista del proyecto detalle. Debe ser GRANDE y sin texto, puesto que el título aparecerá por encima |
| Slug❓👀 | Este campo no es visible directamente. Es la slug que tendrá el proyecto en la url. Igual que los proyectos. |
| GeneralTitle | Titulo que aparecerá dentro de la página (por si es necesaria alguna variante o acortamiento en el titulo principal) |
| Subtitle | Posible subtitulo que tenga el proyecto |
| DescriptionBlockA | Descripción del proyecto en el bloque A (permite formateo) |
| SeparatorImages | Galería con 3 imágenes que hará las veces de separador. |
| FundedByImage | Imagenes de "financiado por", en caso de necesitar colocarlo de forma visible. |
| DescriptionBlockB | Descripción del proyecto en el bloque B (permite formateo) |
Team Member
Miembro del equipo que será mostrado en la sección "Team"
| Campo | Función |
|---|---|
| Name | Nombre del miembro del equipo |
| Position | Cargo del miembro del equipo |
| Description | Texto de descripción del miembro |
| FirstElement...SixthElement | Elementos que irán en la base del miembro (títulos e información destacada) |
| Photo | Foto del miembro del equipo |
Importante!!!
La fotografía de éste componente DEBE ser 430px x 430px, y por supuesto blanco y negro.