En este tutorial aprenderás a gestionar el contenido de tu sitio en OctoberCMS utilizando Tailor de forma flexible y poderosa. Crearemos una sección para mostrar el equipo de AlfamediaWEB, empezando por definir un blueprint llamado Staff. Este blueprint se creará con el tipo stream, lo que nos permitirá gestionar de forma dinámica la información del equipo. ¡Comencemos con el primer paso!

Paso 1: Definir el Blueprint "Staff"

En este primer paso crearemos el blueprint que gestionará los datos del equipo. Usaremos el tipo stream para facilitar la administración del contenido y configuraremos la navegación en el panel de administración. Cada línea del código se comenta a la derecha para facilitar la comprensión.

handle: Staff                # Identificador único del blueprint
type: stream               
name: Staff                  # Nombre legible del blueprint que se mostrará en el backend
drafts: true                 # Permite trabajar con borradores de contenido

primaryNavigation:           # Configuración de la navegación primaria en el panel de administración
   label: Staff              # Etiqueta que se mostrará en el menú principal
   icon: icon-users          # Ícono que representa esta sección
   order: 130                # Orden de aparición en el menú (valor numérico para posicionamiento)

navigation:                  # Configuración de la navegación secundaria para el blueprint
   icon: icon-user           # Ícono que representa la sección en el menú secundario
   parent: Staff             # Define el elemento padre de esta navegación (relación jerárquica)
   order: 10                 # Orden de aparición dentro del menú secundario

groups:                      # Definición de grupos de campos para organizar el contenido en secciones o pestañas
   regular_staff:            # Primer grupo denominado "regular_staff"
      name: Regular Staff    # Nombre del grupo que se mostrará
      fields:                # Definición de campos dentro del grupo
    content:             # Campo "content" para el grupo regular_post
       tab: Edit          # Asigna este campo a la pestaña "Edit"
       label: Content     # Etiqueta que se mostrará para este campo
       type: richeditor   # Tipo de campo: editor enriquecido de texto
       span: adaptive     # El campo se adapta al tamaño del contenedor

   markdown_staff:            # Segundo grupo denominado "markdown_staff"
      name: Markdown Staff    # Nombre del grupo que se mostrará
      fields:                 # Definición de campos dentro del grupo
    content:              # Campo "content" para el grupo markdown_post
       tab: Edit          # Asigna este campo a la pestaña "Edit"
       label: Content     # Etiqueta que se mostrará para este campo
       type: markdown     # Tipo de campo: editor de Markdown
       span: adaptive     # El campo se adapta al tamaño del contenedor 
    

Paso 2: Crear el Mixin "StaffFields"

En este paso creamos un blueprint de tipo mixin llamado StaffFields. Este mixin nos permitirá definir atributos adicionales para los miembros del equipo, en este caso los campos banner y position. Al separar estos atributos en un mixin, podemos reutilizarlos fácilmente en otros blueprints o secciones de tu proyecto.

A continuación, se muestra el código del mixin con comentarios a la derecha de cada línea:

 handle: StaffFields          # Identificador único del mixin
type: mixin                  # Define el blueprint como un mixin
name: Staff Fileds           # Nombre legible del mixin en el backend (Nota: "Staff Fileds" parece un error tipográfico, lo correcto sería "Staff Fields")

fields:                      # Definición de los campos que conforman el mixin
  banner:                    # Campo para gestionar la imagen de banner
    tab: Manage              # Asigna este campo a la pestaña "Manage"
    label: Banner            # Etiqueta que se mostrará para este campo
    type: fileupload         # Tipo de campo para subir archivos
    mode: image              # Modo de carga, restringido a imágenes
    maxFiles: 1              # Permite subir como máximo 1 archivo

  position:                  # Campo para definir la posición o cargo del miembro del equipo
    tab: Manage              # Asigna este campo a la pestaña "Manage"
    label: Position          # Etiqueta que se mostrará para este campo
    type: text               # Tipo de campo: entrada de texto
    size: small              # Tamaño del campo, en este caso pequeño       
    

Paso 3: Agregar el Mixin al Blueprint "Staff"

En este paso, incorporamos el mixin StaffFields en el blueprint Staff para que los campos definidos en el mixin (banner y position) se integren en ambos grupos del blueprint. Esto permite reutilizar de manera modular los atributos del contenido en diferentes formatos (regular y Markdown).

groups:                                       # Definición de los grupos de campos del blueprint
  regular_post:                               # Primer grupo denominado "regular_post"
    name: Regular Post                        # Nombre que se mostrará para este grupo
    fields:                                   # Definición de los campos dentro del grupo
      content:                                # Campo "content" para el grupo regular_post
        tab: Edit                             # Asigna este campo a la pestaña "Edit"
        label: Content                        # Etiqueta que se mostrará para este campo
        type: richeditor                      # Tipo de campo: editor enriquecido de texto
        span: adaptive                        # El campo se adapta al tamaño del contenedor
      staff_fields:                           # Inclusión del mixin en el grupo
        type: mixin                           # Se indica que se está utilizando un mixin
        source: StaffFields                   # Se especifica la fuente del mixin (StaffFields)

  markdown_post:                              # Segundo grupo denominado "markdown_post"
    name: Markdown Post                       # Nombre que se mostrará para este grupo
    fields:                                   # Definición de los campos dentro del grupo
      content:                                # Campo "content" para el grupo markdown_post
        tab: Edit                             # Asigna este campo a la pestaña "Edit"
        label: Content                        # Etiqueta que se mostrará para este campo
        type: markdown                        # Tipo de campo: editor de Markdown
        span: adaptive                        # El campo se adapta al tamaño del contenedor
      staff_fields:                           # Inclusión del mixin en el grupo
        type: mixin                           # Se indica que se está utilizando un mixin
        source: StaffFields                   # Se especifica la fuente del mixin (StaffFields)

Paso 4: Guardar, Migrar y Verificar los Blueprints

En este último paso, es fundamental asegurarse de que los archivos YAML que definen el blueprint Staff y el mixin StaffFields se guarden correctamente. Haz clic en "Save & Migrate" en cada uno de los blueprints que acabas de creas, al hacer clic, se guardan tus cambios y se ejecuta la migración necesaria para que el sistema reconozca y aplique la nueva configuración.

Después de realizar la migración, verifica en el panel de administración que los menús correspondientes se hayan creado con los nombres e íconos que configuraste. Con esto, ya estarás listo para comenzar a añadir los miembros del equipo directamente desde el administrador, completando así la estructura necesaria para mostrar el contenido en tu página.

Nota: En algunas ocasiones, la migración puede no ejecutarse correctamente y aparecer un error de "tabla desconocida". Si esto sucede, puedes ejecutar la migración manualmente desde la consola. Simplemente abre una terminal en la raíz de la instalación de OctoberCMS y ejecuta el siguiente comando:

php artisan tailor:migrate

Este comando forzará la migración de los blueprints y solucionará posibles inconvenientes.

Este proceso garantiza que tu proyecto cuente con una herramienta modular y flexible para gestionar el contenido del equipo en OctoberCMS. ¡Ya puedes empezar a crear los perfiles de los miembros del equipo según las necesidades de tu página!

Conclusión

Tailor te permite crear y gestionar contenido estructurado de manera flexible con una combinación de blueprints, campos personalizados.