1 Followers
26 Following
gympillow82

gympillow82

SPOILER ALERT!

Tutorial de Panels en Drupal 7

El módulo deja construir páginas compuestas por múltiples áreas o regiones, 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 bien bloques compuestos por diferentes elementos.


Es el módulo ideal para edificar la página principal del sitio o de las diferentes secciones que pueda tener.


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


Destacamos también la posibilidad de integración de vistas en los paneles, lo que indudablemente aporta el toque final a un módulo completísimo.


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 lugar o, en cualquier región del sitio como si de un bloque se tratase.


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


A lo largo de esta primera una parte de esta unidad se desarrollará un ejercicio práctico con la meta 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 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 3 tipos de paneles:


  • Panel de página: Es el género de panel más completo. Actúa como una página, mas a la que le podremos pasar razonamientos para mostrar contenidos activos en función de estos. Vamos a ver que una característica que aporta enormes posibilidades en la construcción de paneles de página es el uso de argumentos 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 van a poder usarse como bloques normales, en otras regiones, o incluso en otros paneles más complejos.
  • Panel de nodo: Es un género de contenido similar al panel de página pero más limitado. El resultado es un nodo compuesto por diferentes zonas, mas al que no podemos pasarle razonamientos. Los paneles de nodo se comportan como nodos y se van a mostrar en los resultados de las buscas.

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


  • Panels: Es el núcleo de este paquete de módulos y se encarga 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, por lo que tendremos que activar además ciertos módulos adicionales.
  • Mini Panels: Deja crear mini-paneles, que entonces pueden ser ubicados y configurados como bloques en las zonas de nuestro tema. Asimismo van a poder emplearse dentro de otros paneles.
  • < agencia publicidad digital : Permite crear paneles en forma de nodos. Las funcionalidades se verán reducidas respecto a las páginas de panel, mas se podrán aplicar todas las opciones y funcionalidades de cualquier nodo, como efectuar comentarios o bien dejar que se muestre en los resultados de las búsquedas. Para permitirnos esta función, el módulo añade a nuestro sitio un nuevo tipo de contenido que nos deja crear paneles como si de cualquier otro nodo se tratase.
  • Panels In-Place Editor: Este módulo da herramientas para permitir al desarrollador del lugar editar ciertas opciones directamente cuando se está visualizando el resultado final de un panel, sin tener que 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 utilizadas de cara al desarrollo de otros módulos. El módulo Chaos tool suite asimismo está formado por otros módulos, de los que resaltamos los próximos, que van a ser precisos 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 a fin de que el desarrollador del lugar pueda construir y gestionar paneles de página. En nuestro caso es indispensable.
  • Views content panes: Deja que los paneles puedan enseñar 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.

La creación de un mini panel o bien un panel de nodo (panel node) es prácticamente similar, incluso más sencilla por tratarse de tipos 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 vamos a crear 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 libres 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 usar 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, solo para el área de administración.
  • Ruta: Dirección URL para acceder a la nueva página. Se pueden acotar razonamientos (opcionales o bien obligatorios), que van a ser pasados por medio de la URL, de la próxima forma:
    • mipanel/ por ciento argumento: El símbolo por ciento sirve para señalar razonamientos obligatorios, de manera que en la URL siempre y en todo momento ha de estar presente el argumento. En caso de no aparecer el argumento, 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 el caso de no indicarse el argumento se muestra la configuración por defecto del panel. Por ejemplo, podríamos utilizar 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étera). La manera de que el panel sepa a qué usuario hace referencia se especificará a través del argumento nombre de usuario. En este ejemplo el argumento sería obligatorio, de forma que si no se especifica, el sistema va a 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 sencillamente no lo tendrá en cuenta. Veremos que existen opciones para señalar al panel lo que debe hacer de forma predeterminada, si no se especifica un razonamiento de la URL.

  • Hacer de ésta la página primordial del sitio: Deja apuntar si deseamos que esta página se transforme 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 y cuando estemos haciendo empleo de ella. Esta opción solamente debería marcarse cuando el panel sirva como herramienta a los administradores y esté ubicado dentro del área de herramientas de administración.
  • Tipo de variante: Los modelos de variaciones disponibles son Panel, que nos permite crear un Panel de página, y HTTP response code, que se trata de un tipo de panel que siempre y en todo momento devuelve el encabezado HTTP que le señalemos (403, 404 o redirección 301).
  • Características opcionales: Deja configurar diferentes grupos de opciones a lo largo del 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: Permite delimitar un conjunto de reglas o condiciones para determinar si se debe mostrar o no la página. Por ejemplo, a través de esta alternativa podríamos elegir que la página sólo se cargue para un idioma determinado.
    • Contextos. Está relacionada con los argumentos, vamos a poder apuntar "qué es lo que significan" los argumentos que hayamos detallado en la Senda.


  • mipanel/ por ciento argumento: El símbolo por ciento sirve para indicar argumentos obligatorios, de manera que en la URL siempre he de estar presente el argumento. En caso de no aparecer el razonamiento, Drupal mostrará el fallo 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 argumento se muestra la configuración por defecto del panel. Por poner un ejemplo, podríamos emplear 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.). La manera de que el panel sepa a qué usuario hace referencia se detallará a través del razonamiento nombre de usuario. En este caso de ejemplo el razonamiento sería obligatorio, de forma que si no se especifica, el sistema va a devolver un fallo de página no encontrada. En cambio, si utilizamos mipanel/!username, si no se especifica ningún usuario en el argumento username, el panel sencillamente no lo tendrá en cuenta. Veremos 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 acotar un conjunto de reglas o condiciones para determinar si se debe enseñar o bien no la página. Por servirnos de un ejemplo, mediante esta alternativa podríamos escoger que la página sólo se cargue para un idioma determinado.
  • Contextos. Está relacionada con los argumentos, vamos a poder apuntar "qué significan" los argumentos que hayamos detallado en la Senda.

Aunque no escojamos ninguna de estas opciones, posteriormente podremos acceder a la configuración de cada una de ellas. Si marcamos alguna antes de seguir, la configuración de las opciones escogidas se mostrará en los próximos pasos de la creación de la página.


Definición de argumentos (asignar contexto)


Haciendo click en Continuar guardamos 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 consistirá en configurar el uso de estos razonamientos.




Para asignar un contexto a cada argumento, haremos click en Cambiar. Conforme el significado que deseemos dar al razonamiento, escogeremos en valor adecuado. Algunos de los significados que podemos elegir son:


  • Nodo: ID. El argumento va a ser el identificador de un nodo (nid).
  • Usuario: ID. El argumento será el identificador de un usuario (uid).
  • Usuario: nombre. El razonamiento será un nombre de usuario.
  • Comentario: ID. El argumento va a ser el identificador de un comentario.
  • Término de taxonomía: ID. El razonamiento indica 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 empleado 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 asimismo tienen un identificador numérico único, de exactamente la misma forma que los comentarios y los términos de taxonomía. El nombre de usuario, aunque no es numérico, es único y también forma un identificador.


 De esta forma, si en la ruta del panel queremos indicar un razonamiento que especifique un ID de nodo (utilizando rutas como mipanel/ por cien nid, node/ por cien nid o bien 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 argumento en la URL (por ejemplo, mipanel/ por cien username), indicaremos que este argumento es el nombre de usuario, con Usuario: nombre.

Una vez seleccionado, 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, llegaremos a la selección del Diseño del panel haciendo click 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 permitirá seleccionar 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 alternativa en la página no se mostrarán el resto de bloques ni zonas del tema. Es una alternativa útil, por poner un ejemplo, para hacer paneles para la página principal del lugar.
  • 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 opción no está orientada a introducir grandes bloques de CSS, sino sirve para probar ágilmente ciertos cambios en el aspecto del panel. Entonces podremos pasar este código CSS al fichero 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, conforme 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 la esquina 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 elegir de entre todos los generados en nuestro lugar. Estos contenidos pueden haber sido generados por nosotros o bien implementados por los módulos instalados. Las categorías presentadas también pueden cambiar, en función de las entidades referenciadas en el contexto del panel.


La ventana de Añadir 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 escoger entre los bloques que hayamos creado en nuestro sitio.
  • Controles: Elegiremos diferentes controles (widgets) como el formulario de busca, 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 sitio, enlaces 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 incorporar cualquiera de los menús creados en el lugar.
  • 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 remplazo relacionados con el usuario. Esta categoría solo estará disponible cuando la entidad usuario esté referida 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 y cada uno de los campos que tengamos definidos en nuestro sitio para los tipos de contenido. Esta categoría sólo va a estar disponible cuando la entidad nodo esté referida en el contexto del panel.
  • Nodo (tokens): Patrones de remplazo relacionados con los nodos. Esta categoría sólo va a estar disponible cuando la entidad nodo esté referenciada en el contexto del panel.
  • Vistas: Permite escoger cualquiera de las vistas activas en el sitio. Una vez seleccionada la vista, especificaremos también la presentación de la misma que se incluirá en el contenido del panel. A fin de que esta categoría esté disponible, debemos activar el módulo Views content panes. Además tendrá que haber cuando menos una vista creada y activada.

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


  • Nodo existente: Permite incluir en el panel un nodo anteriormente creado. Si se han definido razonamientos, el nodo puede ser referido a través de ese argumento.
  • Nuevo contenido personalizado: Deja incorporar un contenido directo, tal y como si estuviéramos creando un nodo.

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


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



Una vez incorporados contenidos a las zonas podemos acceder a la configuración individual de cada contenido haciendo clic en su icono de herramientas , que se mostrará en la esquina 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 dejan la visibilidad y acotar reglas de acceso: Deja acotar el acceso al contenido en función del rol, permiso, senda, código PHP adaptado, etc.
  • Bloquear contenido (Lock): Deja indicar si el contenido va a estar bloqueado (Immovable) o bien si por el contrario se va a poder desplazar entre distintas zonas de la página (No lock o bien Zonas).
  • 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í elimina los contenidos adaptados creados específicamente para este panel y añadidos mediante Nuevo contenido personalizado.

Tras incorporar 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 factor o contenido.

En la barra superior encontraremos opciones generales distribuidas en pestañitas, que nos permitirán efectuar las siguientes operaciones:


  • Clonar: Podemos clonar este panel, pudiendo crear de este modo uno con exactamente la misma configuración y contenidos en pocos pasos. Esta opción es útil cuando necesitamos crear paneles con poquísimas 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 bien importado en otro panel desde la pestañita Importar variación. Esto nos permite tanto hacer copias de seguridad 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: Elimina 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 sitio, mas todos los datos de configuración permanecerán guardados, de manera que en cualquier instante podremos regresar a activarlo. Esta pestaña cambia a Activar si el panel está desactivado.
  • Añadir variante: Una misma página puede contener diferentes variantes o bien configuraciones de Panel, lo que permitirá contar con de varias "presentaciones" de la página. Para entender 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á mediante las reglas de selección. Por 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ña Exportar. Desde esta opción podemos importar variaciones de otros paneles o bien incluso desde otros sitios web Drupal.


El menú izquierdo se compone de los siguientes grupos de opciones, ciertos de ellos ya vistos durante el 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 rápido para editar algunos factores del panel (senda, 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 argumentos que se pasan a la página a través de la URL. Podemos establecer el contexto de cada argumento, tal como vimos en pasos precedentes.
    • Acceso: Permite crear reglas de acceso a la página. Por ejemplo, podemos crear una regla para 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 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 variante.
    • Reglas de selección: Permite crear reglas para indicar en qué momento debe mostrarse esta variante del panel. Al cargar la página se mostrará la primera variante que cumpla con los criterios establecidos.
    • Contextos: Permite incorporar 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 bien editar un nodo), un usuario, etcétera 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 incorporar vínculos a elementos relacionados con el contexto. Por servirnos de un ejemplo, para un contexto que hace referencia al usuario, podremos acceder a otros elementos como archivos, nodos o comentarios del usuario añadiendo la relación pertinente. Si lo comparamos 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: Deja escoger el diseño o bien plantilla para esta variante del panel.
    • Contenido: Deja web para comercio electronico madrid asociado a la variante.
    • 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 producir la vista anterior.


  • Básico: Opciones básicas de la página (título administrativo, ruta, etc.).
  • 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 para que solo puedan ver el panel los usuarios con un rol o bien 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 variante.
  • Reglas de selección: Deja crear reglas para señalarse cuándo debe mostrarse esta variación del panel. Al cargar la página se mostrará la primera variación que cumpla con los criterios establecidos.
  • Contextos: Deja añadir 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 estarán disponibles para ser añadidos al contenido del panel, desde el apartado Contenido. Desde Relaciones podremos añadir vínculos a elementos relacionados con el contexto. Por servirnos de un ejemplo, para un contexto que hace referencia al usuario, podremos acceder a otros elementos como ficheros, nodos o bien comentarios del usuario agregando 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 elegir el diseño o bien plantilla para esta variación del panel.
  • Contenido: Permite gestionar el contenido asociado a la variante.
  • Vista previa: Muestra la vista anterior de la página para esa variación. Caso de que la página requiera razonamientos de URL, vamos a poder introducirlos ya antes de generar la vista previa.