Tutorial de Panels en Drupal 7

El módulo permite construir páginas compuestas por varias áreas o bien zonas, llamadas paneles, en las que podremos ubicar diferentes contenidos del lugar (nodos, vistas, bloques, menús, etcétera). Esto nos dejará crear páginas o bloques compuestos por diferentes elementos.

Es el módulo idóneo para construir la página principal del lugar o bien de las distintas secciones que pueda tener.

El módulo integra plantillas con diferentes diseños, de manera que podremos tener páginas con diferentes disposiciones de elementos de una forma sencilla.

Destacamos también la posibilidad de integración de vistas en los paneles, lo que sin duda aporta el toque final a un módulo muy completo.

Introducción al módulo Panels

El módulo Panels permite edificar páginas compuestas por "subregiones", que van a poder mostrarse como una página del sitio o, en cualquier zona del sitio tal y como si de un bloque se tratara.

Un ejemplo de uso del módulo Panels es la construcción de una página primordial del sitio con diferentes secciones dinámicas. En la Figura se muestra un caso de página estructurada en dos columnas con zonas variadas, tanto con contenidos estáticos como contenidos activos (vistas). Este tipo de contenidos compuestos de otros contenidos son los que construiremos con el módulo Panels.

A lo largo de esta primera una parte de esta unidad se desarrollará un ejercicio práctico con el objetivo de mostrar una página de bienvenida. Esta página va a ser diferente para los usuarios registrados en el sitio que para los que no, mostrando en este último caso un formulario para poderse registrar en el sitio:

En la próxima captura se puede ver los resultados. A la izquierda, la página de bienvenida para un usuario registrado y a la derecha para uno anónimo.

Con Panels podemos crear tres géneros de paneles:

• Panel de página: Es el tipo de panel más completo. Actúa como una página, pero a la que le vamos a poder pasar razonamientos para enseñar contenidos dinámicos en función de éstos. Vamos a ver que una característica que aporta enormes posibilidades en la construcción de paneles de página es el empleo de razonamientos y la posibilidad de relacionarlos con elementos internos de Drupal Trademark (identificadores de los nodos, de los usuarios, etc.).
• Mini panel: Los mini paneles son paneles que se convierten en bloques. Estos bloques van a poder emplearse como bloques normales, dentro de otras zonas, o aun en otros paneles más complejos.
• Panel de nodo: Es un género de contenido semejante al panel de página mas más limitado. El resultado es un nodo compuesto por diferentes regiones, pero al que no podemos pasarle razonamientos. Los paneles de nodo se comportan como nodos y se mostrarán en los resultados de las buscas.

El módulo Panels está formado por múltiples módulos, y el tipo de paneles libres dependerá de los que estén activados:

• Panels: Es el núcleo de este paquete de módulos y se hace cargo de administrar que el resto de módulos que trabajan con paneles puedan hacer su función. Este módulo no facilita ninguna herramienta de interfaz de usuario para poder crear los paneles, con lo que tendremos que activar además ciertos módulos adicionales.
• Mini Panels: Permite crear mini-paneles, que entonces pueden ser situados y configurados como bloques en las zonas de nuestro tema. Asimismo van a poder utilizarse en otros paneles.
• Panel nodes: Deja crear paneles en forma de nodos. Las funcionalidades se verán reducidas respecto a las páginas de panel, pero se podrán aplicar todas las opciones y funcionalidades de cualquier nodo, como realizar comentarios o dejar que se muestre en los resultados de las buscas. Para permitirnos esta función, el módulo añade a nuestro sitio un nuevo género de contenido que nos deja crear paneles como si de cualquier otro nodo se tratara.
• Panels In-Place Editor: Este módulo proporciona herramientas para permitir al desarrollador del sitio editar algunas opciones de manera directa cuando se está visualizando el resultado final de un panel, sin tener que acceder constantemente a la parte de administración.

El módulo Panels requiere el módulo (conocido como Ctools), que es un conjunto de librerías que pueden ser utilizadas para el desarrollo de otros módulos. El módulo Chaos tool suite también está formado por otros módulos, de los que destacamos los próximos, que van a ser necesarios para trabajar con Paneles:

• Chaos tools: Es el núcleo de Ctools y da las herramientas básicas que precisan muchos módulos, entre ellos el módulo Panels.
• Page Manager: Este módulo da las herramientas visuales a fin de que el desarrollador del sitio pueda construir y administrar paneles de página. En nuestro caso es indispensable.
• Views content panes: Deja que los paneles puedan mostrar vistas en su interior.

Paneles de página

El proceso de creación de un Panel de página es el más completo de todos, así que nos servirá para entender el proceso general de creación de paneles y las posibilidades que ofrece el empleo de éstos en Drupal.
La creación de un mini panel o un panel de nodo (panel node) es casi afín, aun más fácil por tratarse de géneros de panel más simplificados, como vamos a ver en los próximos apartados.

Para crear o editar paneles debemos acceder a:
Administración->Estructura->Paneles

Desde la página de administración de paneles podremos crear nuevos paneles y editar los existentes. Para comenzar crearemos un nuevo panel de página, haciendo clic en Create new... Panel de página.

Creación y configuración de un panel de página

Las opciones de configuración disponibles para el nuevo panel de página son:

• Título administrativo: El nombre que se va a mostrar en el listado de administración de páginas. Debemos emplear nombres breves pero gráficos, para facilitarnos el trabajo de localización de las páginas.
• Descripción administrativa: Es una breve descripción de la página, sólo para el área de administración.
• Ruta: Dirección URL para acceder a la nueva página. Se pueden definir argumentos (opcionales o bien obligatorios), que serán pasados a través de la URL, de la próxima forma:
  • mipanel/ por ciento argumento: El símbolo por ciento sirve para apuntar argumentos obligatorios, de manera que en la URL siempre debe estar presente el razonamiento. En caso de no aparecer el razonamiento, Drupal Trademark va a mostrar el fallo 404 de página no encontrada..
  • o mipanel/!argumento: El símbolo ! sirve para apuntar argumentos opcionales. En caso de no indicarse el argumento se muestra la configuración por defecto del panel. Por poner un ejemplo, podríamos emplear mipanel/ por ciento username en un panel en el que quisiéramos enseñar información sobre el usuario (imagen de usuario, información de contacto, últimos comentarios publicados en el sitio, etc.). La manera de que el panel sepa a qué usuario hace referencia se detallará a través del argumento nombre de usuario. En este caso el argumento sería obligatorio, de forma que si no se detalla, el sistema va a devolver un fallo de página no encontrada. En cambio, si usamos mipanel/!username, si no se detalla ningún usuario en el razonamiento username, el panel sencillamente no lo tendrá en cuenta. Veremos que existen opciones para apuntar al panel lo que debe hacer de forma predeterminada, si no se detalla un argumento de la URL.
• Hacer de ésta la página principal del sitio: Permite señalar si deseamos que esta página se convierta en la página de comienzo del sitio. Esta configuración asimismo la podemos efectuar por medio de la opción Página inicial predeterminada, en: Administración->Configuración->Información del sitio
• Utilizar esta página en sobreposición de administración: Hemos visto que el módulo Overlay permite cargar el área de administración en una capa sobrepuesta. Marcando esta característica la página se va a mostrar dentro la capa de configuración que introduce el módulo Overlay, siempre y cuando estemos haciendo uso de ella. Esta opción solamente debería marcarse cuando el panel sirva como herramienta a los administradores y esté ubicado en el área de herramientas de administración.
• Tipo de variante: Los tipos de variantes libres son Panel, que nos permite crear un Panel de página, y HTTP response code, que se trata de un género de panel que siempre y en todo momento devuelve el encabezado HTTP que le señalemos (cuatrocientos tres, 404 o redirección 301).
• Características opcionales: Deja configurar diferentes conjuntos de opciones durante el proceso de creación de la página:
  • Control de acceso: Configuración del control de acceso a la página (control por rol, permiso, etc.).
  • Elemento de menú visible: Nos permitirá asociar la página de panel con un link de menú.
  • Reglas de selección: Permite definir un conjunto de reglas o bien condiciones para determinar si se debe enseñar o bien no la página. Por poner un ejemplo, por medio de esta alternativa podríamos elegir que la página solo se cargue para un idioma determinado.
  • Contextos. Está relacionada con los razonamientos, podremos apuntar "qué significan" los argumentos que hayamos especificado en la Ruta.

• mipanel/ por cien argumento: El símbolo por ciento sirve para señalar argumentos obligatorios, de forma que en la URL siempre y en toda circunstancia debe estar presente el razonamiento. En caso de no aparecer el argumento, Drupal mostrará el fallo 404 de página no encontrada..
• o mipanel/!argumento: El símbolo ! sirve para indicar razonamientos opcionales. En caso de no indicarse el argumento se muestra la configuración por defecto del panel. Por poner un ejemplo, podríamos emplear mipanel/ por ciento username en un panel en el que quisiéramos mostrar información sobre el usuario (imagen de usuario, información de contacto, últimos comentarios publicados en el lugar, etc.). La manera de que el panel sepa a qué usuario hace referencia se detallará a través del argumento username. En este ejemplo el razonamiento sería obligatorio, de manera que si no se detalla, el sistema devolverá un fallo de página no encontrada. En cambio, si empleamos mipanel/!username, si no se especifica ningún usuario en el argumento nombre de usuario, el panel simplemente no lo tendrá presente. Vamos a ver que existen opciones para apuntar al panel lo que debe hacer de forma predeterminada, si no se especifica un argumento de la URL.

• Control de acceso: Configuración del control de acceso a la página (control por rol, permiso, etcétera).
• Elemento de menú visible: Nos permitirá asociar la página de panel con un link de menú.
• Reglas de selección: Deja delimitar un conjunto de reglas o condiciones para determinar si se debe mostrar o bien no la página. Por ejemplo, a través de esta opción podríamos seleccionar que la página sólo se cargue para un idioma determinado.
• Contextos. Está relacionada con los argumentos, vamos a poder indicar "qué significan" los razonamientos que hayamos concretado en la Ruta.

Aunque no escojamos ninguna de estas opciones, más tarde vamos a poder acceder a la configuración de cada una de ellas. Si marcamos alguna ya antes de continuar, la configuración de las opciones seleccionadas se mostrará en los siguientes pasos de la creación de la página.

Definición de argumentos (asignar contexto)

Haciendo clic en Continuar almacenamos los cambios y continuamos con el proceso de creación y configuración de la página. Si en la definición de la ruta hemos incluido razonamientos de URL, el siguiente paso consistirá en configurar el empleo de estos razonamientos.

Para asignar un contexto a cada razonamiento, haremos click en Cambiar. Según el significado que deseemos dar al argumento, escogeremos en valor adecuado. Ciertos significados que podemos elegir son:

• Nodo: ID. El razonamiento va a ser el identificador de un nodo (nid).
• Usuario: ID. El argumento será el identificador de un usuario (uid).
• Usuario: nombre. El razonamiento va a ser un nombre de usuario.
• Comentario: ID. El argumento será el identificador de un comentario.
• Término de taxonomía: ID. El razonamiento señala un identificador de un término de taxonomía.

Todos los elementos de Drupal tienen un identificador único asociado, que se corresponde con el índice utilizado en la base de datos. Si un nodo tiene la URL node/54, su identificador, conocido interiormente como nid, es el 54. Este identificador es el llamado ID del nodo. 

Los usuarios también tienen un identificador numérico único, del mismo modo que los comentarios y los términos de taxonomía. El nombre de usuario, si bien no es numérico, es único y también forma un identificador.

 De este modo, si en la ruta del panel queremos indicar un razonamiento que especifique un ID de nodo (usando sendas como mipanel/ por cien nid, node/ por cien nid o bien node/ por ciento nid/extra), elegiremos en la configuración del contexto Nodo: ID.

Si queremos un panel en el que se muestre información sobre un usuario, cuyo nombre se pasa como razonamiento en la URL (por servirnos de un ejemplo, mipanel/ por cien username), indicaremos que este argumento es el nombre de usuario, con Usuario: nombre.
Una vez escogido, escribiremos un identificador para el contexto. Este valor se utiliza en el área de administración y no se muestra al usuario.

Diseño del panel

Tras la asignación de contextos a los razonamientos, llegaremos a la selección del Diseño del panel haciendo clic en Terminar. Disponemos de diferentes plantillas, con diferente estructura de filas y columnas, dependiendo de la distribución que necesitemos para el panel.

El siguiente paso tras la elección del diseño dejará elegir ciertas opciones para configurar de qué manera se mostrará el panel integrado en la página. Entre ellas destacan:

• Desactivar bloques/regiones de Drupal: Marcando esta opción en la página no se van a mostrar el resto de bloques ni regiones del tema. Es una opción útil, por ejemplo, para hacer paneles para la página primordial del lugar.
• CSS ID: Podemos asignar un identificador que se va a aplicar al panel, para poder referirnos a él desde los archivos de estilo CSS y alterar su apariencia a conveniencia.
• Código CSS: Podemos redactar código CSS que se insertará de forma directa en la página. Esta opción no está orientada a introducir grandes bloques de CSS, sino que sirve para probar de forma ágil algunos cambios en el aspecto del panel. Luego vamos a poder pasar este código CSS al archivo CSS del tema.

Agregar contenido al panel

El último paso para la creación del Panel de página consiste en elegir los contenidos que se mostrarán en todos y cada área del panel, conforme la plantilla que hayamos escogido.

Desde la página de administración de contenidos del panel podremos configurar el título de la página, que va a poder componerse desde los patrones de substitución libres (desplegando el apartado Sustituciones).
Cada una de las regiones que conforman el panel tiene un icono de herramientas en el rincón superior izquierda . La opción principal es Agregar contenido, que abre una ventana con los contenidos disponibles para ser añadidos.

Podremos añadir muchos contenidos diferentes, que vamos a poder seleccionar de entre todos los generados en nuestro lugar. Estos contenidos pueden haber sido generados por nosotros o incorporados por los módulos instalados. Las categorías presentadas asimismo pueden variar, en función de las entidades referenciadas en el contexto del panel.

La ventana de Incorporar contenido se divide en las siguientes categorías:

• Actividad: Bloques relacionados con la actividad en el sitio: Temas activos, Comentarios recientes, Quién está conectado, etc. Depende
• Bloques personalizados: Podemos escoger entre los bloques que hayamos creado en nuestro sitio.
• Controles: Elegiremos distintos controles (widgets) como el formulario de búsqueda, el alternador de idioma o el comienzo de sesión.
• Elementos de página: Elementos relacionados con la página, como nombre del lugar, título de la página, logotipo del lugar, links de navegación primaria, etc.
• Formulario: Campos de formulario. Se muestran los campos relacionados con la entidad referenciada. Por servirnos de un ejemplo, si hemos definido como contexto el usuario (a través del nombre de usuario o identificador de usuario), los campos que se van a mostrar van a ser los creados para la entidad usuario.
• Menús: Podemos agregar cualquiera de los menús creados en el sitio.
• Misceláneo: Otros contenidos variados.
• Usuario: Campos relacionados con la entidad usuario. Esta categoría solo estará disponible cuando la entidad usuario esté referida en el contexto del panel.
• Users (tokens): Patrones de reemplazo relacionados con el usuario. Esta categoría solo estará libre cuando la entidad usuario esté referenciada en el contexto del panel.
• Nodo: Contenido relacionado con nodos, como el título, el cuerpo o la data de creación. Aparecen aquí todos y cada uno de los campos que tengamos definidos en nuestro lugar para los modelos de contenido. Esta categoría sólo va a estar disponible cuando la entidad nodo esté referenciada en el contexto del panel.
• Nodo (tokens): Patrones de reemplazo relacionados con los nodos. Esta categoría solo estará disponible cuando la entidad nodo esté referida en el contexto del panel.
• Vistas: Permite seleccionar cualquiera de las vistas activas en el sitio. Una vez elegida la vista, especificaremos asimismo la presentación de la misma que se incluirá en el contenido del panel. Para que esta categoría esté disponible, debemos activar el módulo Views content panes. Además tendrá que haber por lo menos una vista creada y activada.

Además de estas categorías encontraremos estas otras 2 opciones:

• Nodo existente: Deja incluir en el panel un nodo anteriormente creado. Si se han definido argumentos, el nodo puede ser referenciado por medio de ese razonamiento.
• Nuevo contenido personalizado: Deja añadir un contenido directo, tal y como si estuviésemos creando un nodo.

En función de elemento que añadamos, el sistema nos va a poder pedir información auxiliar para su configuración.

Una vez añadido el contenido y, volviendo a la presentación de áreas del panel, vamos a poder escoger el Estilo de panel para la región (Mudar).

Una vez incorporados contenidos a las regiones podemos acceder a la configuración individual de cada contenido haciendo click en su icono de herramientas , que se va a mostrar en el rincón superior derecha del elemento.

El menú desplegable que se muestra permite, para cada contenido:

• Desactivar este panel: Se refiere a desactivar ese contenido.
• Ajustes.
• Establecer propiedades CSS.
• Definir el estilo.
• Establecer criterios que permiten la visibilidad y acotar reglas de acceso: Deja definir el acceso al contenido dependiendo del rol, permiso, ruta, código PHP adaptado, etc.
• Bloquear contenido (Lock): Deja indicar si el contenido estará bloqueado (Immovable) o si al contrario se podrá mover entre diferentes zonas de la página (No lock o bien Regiones).
• Configurar la caché del contenido: Activar o desactivar la caché del contenido.
• Eliminar el contenido: Suprime el contenido del panel. Esta acción no elimina el elemento de contenido original, mas sí suprime los contenidos adaptados creados particularmente para este panel y añadidos a través de Nuevo contenido adaptado.

Tras incorporar los contenidos a cada región habremos finalizado el proceso de creación del panel, debiendo guardar los cambios efectuados.

Menú de configuración del panel

Cada panel tiene un menú de configuración desde el que podemos alterar cualquier factor o bien contenido.
En la barra superior encontraremos opciones generales distribuidas en pestañas, que nos permitirán efectuar las siguientes operaciones:

• Clonar: Podemos clonar este panel, pudiendo crear de esta manera uno con la misma configuración y contenidos en pocos pasos. Esta alternativa es útil cuando precisamos crear paneles con poquísimas diferencias.
• Exportar: Genera el código de exportación de un panel. Este código puede ser añadido en la implementación de un módulo o importado en otro panel desde la pestaña Importar variación. Esto nos permite tanto hacer copias de seguridad de un panel, guardando el código generado en un archivo de texto, como importarlo entre paneles o bien aun entre diferentes sitios elaborados con Drupal.
• Eliminar: Elimina el panel. Una vez eliminado el panel no puede ser recuperado.
• Desactivar: Si desactivamos el panel, la página no va a estar accesible para los usuarios del sitio, mas todos los datos de configuración permanecerán guardados, de manera que en cualquier momento vamos a poder volver a activarlo. Esta pestaña cambia a Activar si el panel está desactivado.
• Añadir variante: Una misma página puede contener diferentes variaciones o configuraciones de Panel, lo que permitirá disponer de múltiples "presentaciones" de la página. Para comprender este concepto podemos decir que las variaciones son en los paneles lo mismos que las presentaciones en las vistas. La selección de la variante que se mostrará al usuario cuando visite la página se determinará por medio de las reglas de selección. Por ejemplo, podemos tener una variación específica de la página para los usuarios con un determinado rol. Veremos más adelante cómo configurar las reglas de selección de cada variación.
• Importar variante: Podemos importar una variación que haya sido previamente exportada con la pestaña Exportar. Desde esta opción podemos importar variaciones de otros paneles o bien aun desde otros sitios web Drupal.

El menú izquierdo se compone de los próximos conjuntos de opciones, ciertos de ellos ya vistos a lo largo del proceso de creación del panel:

• Resumen: Se muestra un resumen de la configuración de la página. También encontraremos enlaces de acceso veloz para editar ciertos factores del panel (ruta, acceso, entrada de menú, diseño, etc.)
• Opciones: Opciones globales del panel. Se divide en:
  • Básico: Opciones básicas de la página (título administrativo, senda, etc.).
  • Argumentos. Configuración de los razonamientos que se pasan a la página por medio de la URL. Podemos establecer el contexto de cada argumento, tal y como vimos en pasos precedentes.
  • Acceso: Deja crear reglas de acceso a la página. Por servirnos de un ejemplo, podemos crear una regla a fin de que sólo puedan ver el panel los usuarios con un rol o bien permiso determinado.
  • Menú: Permite crear un enlace de menú a la página.
• Variantes: Agrupa las opciones de configuración concretas de cada variación del panel. Ten en cuenta que al crear el panel hemos definido ya la primera variante. Las opciones disponibles para las variaciones son:
  • Resumen: Muestra un resumen de la configuración de la variante.
  • General: Opciones generales de esta variante.
  • Reglas de selección: Permite crear reglas para señalarse cuándo debe mostrarse esta variación del panel. Al cargar la página se mostrará la primera variante que cumpla con los criterios establecidos.
  • Contextos: Permite incorporar contextos o bien elementos, en función de los razonamientos definidos. Un contexto puede ser un nodo, el formulario de edición de un género de contenido (crear o editar un nodo), un usuario, etc. Al añadir un contexto, los elementos relacionados van a estar libres para ser añadidos al contenido del panel, desde el apartado Contenido. Desde Relaciones podremos agregar vínculos a elementos relacionados con el contexto. Por servirnos de un ejemplo, para un contexto que hace referencia al usuario, vamos a poder acceder a otros elementos como ficheros, nodos o comentarios del usuario añadiendo la relación correspondiente. Si lo comparamos con las vistas, los contextos en los paneles se corresponden con los razonamientos en las vistas y las relaciones de los paneles serían equivalentes a las relaciones de las vistas.
  • Layout: Permite escoger el diseño o bien plantilla para esta variante del panel.
  • Contenido: Permite administrar el contenido asociado a la variación.
  • Vista previa: Muestra la vista anterior de la página para esa variación. Caso de que la página requiera argumentos de URL, podremos introducirlos antes de producir la vista anterior.

• Básico: Opciones básicas de la página (título administrativo, senda, etcétera).
• Argumentos. Configuración de los argumentos que se pasan a la página a través de la URL. Podemos establecer el contexto de cada razonamiento, tal como vimos en pasos precedentes.
• Acceso: Permite crear reglas de acceso a la página. Por servirnos de un ejemplo, podemos crear una regla a fin de que sólo puedan ver el panel los usuarios con un rol o permiso determinado.
• Menú: Deja crear un enlace de menú a la página.

• Resumen: Muestra un resumen de la configuración de la variante.
• General: Opciones generales de esta variación.
• Reglas de selección: Deja crear reglas para indicar cuándo debe mostrarse esta variación del panel. Al cargar la página se mostrará la primera variante que cumpla con los criterios establecidos.
• Contextos: Permite añadir contextos o elementos, en función de los argumentos definidos. Un contexto puede ser un nodo, el formulario de edición de un género de contenido (crear o editar un nodo), un usuario, etc. Al agregar un contexto, los elementos relacionados van a estar libres para ser añadidos al contenido del panel, desde el apartado Contenido. Desde Relaciones vamos a poder agregar vínculos a elementos relacionados con el contexto. Por ejemplo, para un contexto que hace referencia al usuario, vamos a poder acceder a otros elementos como ficheros, nodos o bien comentarios del usuario añadiendo la relación pertinente. Si lo comparamos con las vistas, los contextos en los paneles se corresponden con los razonamientos en las vistas y las relaciones de los paneles serían equivalentes a las relaciones de las vistas.
• Layout: Permite elegir el diseño o bien plantilla para esta variación del panel.
• Contenido: Deja gestionar el contenido asociado a la variación.
• Vista previa: Muestra la vista previa de la página para esa variante. En el caso de que la página requiera argumentos de URL, vamos a poder introducirlos antes de generar la vista anterior.