1 Followers
26 Following
buttonwar8

buttonwar8

SPOILER ALERT!

Tutorial de Panels en Drupal 7

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


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


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


Destacamos asimismo la posibilidad de integración de vistas en los paneles, lo que indudablemente 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 podrán mostrarse como una página del sitio o, en cualquier región del lugar tal y como si de un bloque se tratara.


Un ejemplo de empleo del módulo Panels es la construcción de una página primordial del lugar con diferentes secciones activas. En la Figura se muestra un caso de página estructurada en 2 columnas con zonas variadas, tanto con contenidos estáticos como contenidos dinámicos (vistas). Esta clase de contenidos compuestos de otros contenidos son los que edificaremos con el módulo Panels.


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


En la próxima atrapa 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 tipos de paneles:


  • Panel de página: Es el género de panel más completo. Actúa como una página, pero a la que le podremos pasar argumentos para enseñar contenidos activos en función de éstos. Veremos 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 (identificadores de los nodos, de los usuarios, etc.).
  • Mini panel: Los mini paneles son paneles que se convierten en bloques. Estos bloques podrán emplearse como bloques normales, dentro de otras zonas, o bien aun dentro de otros paneles más complejos.
  • Panel de nodo: Es un género de contenido parecido al panel de página pero más limitado. El resultado es un nodo compuesto por diferentes zonas, pero al que no podemos pasarle argumentos. Los paneles de nodo se comportan como nodos y se van a mostrar en los resultados de las búsquedas.

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


  • Panels: Es el núcleo de este bulto de módulos y se encarga de gestionar 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 deberemos activar además ciertos módulos auxiliares.
  • Mini Panels: Permite crear mini-paneles, que luego pueden ser situados y configurados como bloques en las regiones de nuestro tema. También van a poder usarse en otros paneles.
  • < diseñadores blogs madrid : Permite crear paneles en forma de nodos. Las funcionalidades se verán reducidas respecto a las páginas de panel, pero se van a poder aplicar todas y cada una de las opciones y funcionalidades de cualquier nodo, como realizar comentarios o bien dejar que se muestre en los resultados de las buscas. Para dejarnos esta función, el módulo agrega a nuestro lugar un nuevo género de contenido que nos deja crear paneles como si de cualquier otro nodo se tratase.
  • Panels In-Place Editor: Este módulo proporciona herramientas para permitir al desarrollador del lugar editar algunas opciones directamente cuando se está visualizando el resultado final de un panel, sin acceder continuamente 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 usadas para el desarrollo de otros módulos. El módulo Chaos tool suite asimismo está formado por otros módulos, de los que destacamos los próximos, que serán necesarios para trabajar con Paneles:


  • Chaos tools: Es el núcleo de Ctools y proporciona las herramientas básicas que precisan muchos módulos, entre ellos el módulo Panels.
  • Page Manager: Este módulo proporciona las herramientas visuales para que el desarrollador del lugar pueda construir y administrar paneles de página. En nuestro caso es imprescindible.
  • Views content panes: Permite 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, con lo que nos servirá para entender el proceso general de creación de paneles y las posibilidades que ofrece el empleo de estos en Drupal Trademark.

La creación de un mini panel o bien un panel de nodo (panel node) es prácticamente afín, aun más sencilla 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 vamos a poder crear nuevos paneles y editar los existentes. Para iniciar 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 mostrará en el listado de administración de páginas. Debemos utilizar nombres breves mas gráficos, para facilitarnos el trabajo de ubicació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 acotar argumentos (opcionales u obligatorios), que serán pasados por medio de la URL, de la próxima forma:
    • mipanel/ por cien argumento: El símbolo por ciento sirve para señalar argumentos obligatorios, de forma que en la URL siempre ha de estar presente el argumento. En el caso de no aparecer el argumento, Drupal Trademark mostrará el error cuatrocientos cuatro de página no encontrada..
    • o mipanel/!argumento: El símbolo ! sirve para indicar argumentos opcionales. En el caso de no indicarse el razonamiento se muestra la configuración por defecto del panel. Por poner un ejemplo, podríamos utilizar mipanel/ por cien 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 lugar, etcétera). La forma de que el panel sepa a qué usuario hace referencia se detallará a través del razonamiento nombre de usuario. En este caso el razonamiento sería obligatorio, de forma que si no se detalla, el sistema va a devolver un error de página no encontrada. En cambio, si empleamos mipanel/!username, si no se detalla ningún usuario en el razonamiento nombre de usuario, el panel simplemente no lo tendrá presente. Veremos que existen opciones para indicar al panel lo que debe hacer de forma predeterminada, si no se especifica un argumento de la URL.

  • Hacer de esta la página primordial del sitio: Permite indicar si deseamos que esta página se convierta en la página de comienzo del sitio. Esta configuración asimismo la podemos realizar 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 deja 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 que estemos haciendo empleo de ella. diseño pagina empresa 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 modelos de variaciones disponibles son Panel, que nos deja crear un Panel de página, y HTTP response code, que se trata de un género de panel que siempre y en toda circunstancia devuelve el encabezado HTTP que le señalemos (cuatrocientos tres, 404 o redirección 301).
  • Características opcionales: Permite configurar diferentes grupos 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étera).
    • Elemento de menú visible: Nos dejará asociar la página de panel con un enlace de menú.
    • Reglas de selección: Deja acotar un conjunto de reglas o bien condiciones para determinar si se debe mostrar o no la página. Por ejemplo, mediante esta alternativa podríamos elegir que la página sólo se cargue para un idioma determinado.
    • Contextos. Está relacionada con los razonamientos, podremos apuntar "qué significan" los razonamientos que hayamos concretado en la Ruta.


  • mipanel/ por ciento argumento: El símbolo por cien sirve para indicar argumentos obligatorios, de manera que en la URL siempre debe estar presente el argumento. En caso de no aparecer el argumento, Drupal Trademark va a mostrar el error cuatrocientos cuatro de página no encontrada..
  • o mipanel/!argumento: El símbolo ! sirve para apuntar razonamientos opcionales. En caso de no indicarse el argumento se muestra la configuración por defecto del panel. Por servirnos de un ejemplo, podríamos usar mipanel/ por cien 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 sitio, 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 argumento sería obligatorio, de manera que si no se especifica, el sistema va a devolver un error de página no encontrada. En cambio, si usamos mipanel/!username, si no se especifica ningún usuario en el argumento username, el panel simplemente no lo tendrá en cuenta. Vamos a ver que existen opciones para señalar al panel lo que debe hacer de forma predeterminada, si no se detalla un argumento de la URL.

  • Control de acceso: Configuración del control de acceso a la página (control por rol, permiso, etc.).
  • Elemento de menú visible: Nos dejará asociar la página de panel con un enlace de menú.
  • Reglas de selección: Permite definir un conjunto de reglas o condiciones para determinar si se debe mostrar o no la página. Por servirnos de un ejemplo, por medio de esta opción podríamos elegir que la página solo se cargue para un idioma determinado.
  • Contextos. Está relacionada con los razonamientos, podremos señalar "qué es lo que significan" los razonamientos que hayamos detallado en la Ruta.

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


Definición de razonamientos (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 senda hemos incluido razonamientos de URL, el siguiente paso va a consistir en configurar el uso de estos argumentos.




Para asignar un contexto a cada argumento, vamos a hacer click en Cambiar. Conforme el significado que deseemos dar al argumento, seleccionaremos en valor adecuado. Algunos de los significados que podemos seleccionar son:


  • Nodo: ID. El argumento 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 argumento señala un identificador de un término de taxonomía.


Todos los elementos de Drupal Trademark tienen un identificador único asociado, que se corresponde con el índice usado en la base de datos. Si un nodo tiene la URL node/54, su identificador, conocido internamente como nid, es el cincuenta y cuatro. Este identificador es el denominado ID del nodo. 


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


 De este modo, si en la senda del panel queremos apuntar un argumento que especifique un ID de nodo (utilizando rutas como mipanel/ por cien nid, node/ por cien nid o node/ por ciento nid/extra), escogeremos en la configuración del contexto Nodo: ID.


Si deseamos un panel en el que se muestre información sobre un usuario, cuyo nombre se pasa como razonamiento en la URL (por poner un ejemplo, mipanel/ por ciento username), indicaremos que este argumento es el nombre de usuario, con Usuario: nombre.

Una vez elegido, escribiremos un identificador para el contexto. Este valor se emplea 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, vamos a llegar a la selección del Diseño del panel haciendo clic en Terminar. Disponemos de diferentes plantillas, con diferente estructura de filas y columnas, en función de la distribución que necesitemos para el panel.



El siguiente paso tras la elección del diseño permitirá seleccionar ciertas opciones para configurar cómo 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 sitio.
  • CSS ID: Podemos asignar un identificador que se aplicará al panel, para poder referirnos a él desde los archivos de estilo CSS y alterar su apariencia a conveniencia.
  • Código CSS: Podemos escribir código CSS que se insertará de manera directa en la página. Esta alternativa no está orientada a introducir grandes bloques de CSS, sino que sirve para probar con agilidad ciertos cambios en el aspecto del panel. Luego podremos 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 escoger los contenidos que se van a mostrar en todos y cada área del panel, según la plantilla que hayamos elegido.


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 a partir de los patrones de substitución libres (desplegando el apartado Sustituciones).

Cada una de las zonas que conforman el panel tiene un icono de herramientas en el rincón superior izquierda . La opción principal es Añadir contenido, que abre una ventana con los contenidos libres para ser añadidos.



Podremos agregar muchos contenidos diferentes, que podremos escoger de entre todos los generados en nuestro sitio. Estos contenidos pueden haber sido generados por nosotros o bien incorporados por los módulos instalados. Las categorías presentadas también pueden variar, en función de las entidades referenciadas en el contexto del panel.


La ventana de Incorporar contenido se divide en las próximas categorías:


  • Actividad: Bloques relacionados con la actividad en el sitio: Temas activos, Comentarios recientes, Quién está conectado, etc. Depende
  • Bloques personalizados: Podemos elegir entre los bloques que hayamos creado en nuestro sitio.
  • Controles: Elegiremos diferentes controles (widgets) como el formulario de búsqueda, el alternador de idioma o bien el comienzo de sesión.
  • Elementos de página: Elementos relacionados con la página, como nombre del sitio, título de la página, logotipo del sitio, enlaces de navegación primaria, etc.
  • Formulario: Campos de formulario. Se muestran los campos relacionados con la entidad referida. 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é referenciada en el contexto del panel.
  • Users (tokens): Patrones de reemplazo relacionados con el usuario. Esta categoría sólo va a 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 fecha de creación. Aparecen acá todos los campos que tengamos definidos en nuestro lugar para los tipos de contenido. Esta categoría solo va a estar libre cuando la entidad nodo esté referida en el contexto del panel.
  • Nodo (tokens): Patrones de remplazo relacionados con los nodos. Esta categoría solo va a estar libre cuando la entidad nodo esté referenciada en el contexto del panel.
  • Vistas: Permite escoger cualquiera de las vistas activas en el lugar. Una vez seleccionada la vista, especificaremos también la presentación de la misma que se incluirá en el contenido del panel. Para que esta categoría esté libre, debemos activar el módulo Views content panes. Además deberá 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 referido por medio de ese razonamiento.
  • Nuevo contenido personalizado: Permite agregar un contenido directo, tal y como si estuviésemos creando un nodo.

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


Una vez añadido el contenido y, volviendo a la presentación de áreas del panel, podremos elegir el Estilo de panel para la región (Cambiar).



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



El menú desplegable que se muestra deja, 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: Permite definir el acceso al contenido dependiendo del rol, permiso, senda, código PHP personalizado, etc.
  • Bloquear contenido (Lock): Deja indicar si el contenido va a estar bloqueado (Immovable) o si al contrario se va a poder mover entre diferentes regiones de la página (No lock o Regiones).
  • Configurar la caché del contenido: Activar o bien 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 específicamente para este panel y añadidos mediante Nuevo contenido personalizado.

Tras agregar los contenidos a cada región vamos a haber finalizado el proceso de creación del panel, debiendo guardar los cambios realizados.


Menú de configuración del panel


Cada panel tiene un menú de configuración desde el que podemos alterar cualquier parámetro o contenido.

En la barra superior encontraremos opciones generales distribuidas en pestañas, que nos dejarán efectuar las próximas operaciones:


  • Clonar: Podemos clonar este panel, pudiendo crear de esta forma uno con exactamente la misma configuración y contenidos en pocos pasos. Esta alternativa es útil cuando necesitamos crear paneles con muy pocas diferencias.
  • Exportar: Produce 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ñita Importar variación. Esto nos deja tanto hacer copias de respaldo de un panel, guardando el código generado en un fichero de texto, como importarlo entre paneles o bien aun entre distintos sitios elaborados con Drupal.
  • Eliminar: Suprime el panel. Una vez eliminado el panel no puede ser recuperado.
  • Desactivar: Si desactivamos el panel, la página no va a estar alcanzable para los usuarios del lugar, mas todos y cada uno de los datos de configuración permanecerán guardados, de manera que en cualquier momento vamos a poder volver a activarlo. Esta pestañita cambia a Activar si el panel está desactivado.
  • Añadir variante: Una misma página puede contener diferentes variantes o configuraciones de Panel, lo que permitirá disponer de varias "presentaciones" de la página. Para comprender este término 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 va a mostrar al usuario cuando visite la página se determinará por medio de las reglas de selección. Por poner un ejemplo, podemos tener una variante específica de la página para los usuarios con un determinado rol. Veremos más adelante de qué manera configurar las reglas de selección de cada variante.
  • Importar variante: Podemos importar una variante que haya sido anteriormente exportada con la pestañita Exportar. Desde esta alternativa podemos importar variantes de otros paneles o bien aun desde otros sitios web Drupal Trademark.


El menú izquierdo se compone de los próximos grupos 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. Asimismo encontraremos links de acceso veloz para editar algunos 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étera).
    • Argumentos. Configuración de los razonamientos que se pasan a la página por medio de la URL. Podemos establecer el contexto de cada razonamiento, tal como vimos en pasos anteriores.
    • 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 permiso determinado.
    • Menú: Permite crear un enlace de menú a la página.

  • Variantes: Reúne las opciones de configuración concretas de cada variación del panel. Ten presente que al crear el panel hemos definido ya la primera variación. Las opciones libres para las variantes son:
    • Resumen: Muestra un resumen de la configuración de la variante.
    • General: Opciones generales de esta variación.
    • Reglas de selección: Permite crear reglas para señalarse cuándo debe mostrarse esta variante del panel. Al cargar la página se va a mostrar la primera variación que cumpla con los criterios establecidos.
    • Contextos: Permite agregar contextos o bien 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 podremos 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 comentarios del usuario añadiendo la relación pertinente. Si lo equiparamos 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 seleccionar el diseño o bien plantilla para esta variación del panel.
    • Contenido: Deja administrar el contenido asociado a la variación.
    • Vista previa: Muestra la vista anterior de la página para esa variación. En caso de que la página requiera argumentos de URL, vamos a poder introducirlos ya antes de generar 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 mediante la URL. Podemos establecer el contexto de cada razonamiento, tal y 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 solo 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 señalarse cuándo debe mostrarse esta variante del panel. Al cargar la página se va a mostrar la primera variante que cumpla con los criterios establecidos.
  • Contextos: Deja añadir contextos o bien elementos, en función de los razonamientos definidos. Un contexto puede ser un nodo, el formulario de edición de un tipo de contenido (crear o editar un nodo), un usuario, etcétera Al añadir un contexto, los elementos relacionados estarán disponibles 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 poner un ejemplo, para un contexto que hace referencia al usuario, podremos acceder a otros elementos como archivos, nodos o comentarios del usuario agregando la relación correspondiente. Si lo equiparamos con las vistas, los contextos en los paneles se corresponden con los argumentos en las vistas y las relaciones de los paneles serían equivalentes a las relaciones de las vistas.
  • Layout: Permite seleccionar el diseño o plantilla para esta variante del panel.
  • Contenido: Permite gestionar 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 ya antes de producir la vista anterior.