Creación de un tema con Bootstrap

1. Temas iniciales

Cada vez que comenzamos a desarrollar en Drupal, es preferible tener una colección de funciones y bibliotecas de uso común que podamos reutilizar. Poder tener un punto de partida constante al crear múltiples temas significa que no tenemos que replantearnos mucho desde el diseño hasta el diseño. Este concepto de un tema inicial lo hace posible, y vamos a seguir los pasos necesarios para crear uno.

Habilitemos el tema Bartik, el contenido que vemos en la imagen y deshabilitemos los bloques de las barras laterales.

Nuestra página de inicio debería verse como la siguiente imagen:

Esta es una página de aspecto bastante soso y sin diseño o estilo real. Entonces, una cosa a tener en cuenta cuando se crea un tema inicial es ¿cómo queremos que se vea nuestro contenido? ¿Queremos que nuestro tema inicial incluya otro framework CSS o queremos crear el nuestro desde cero?

Dado que este es nuestro primer tema inicial, no deberíamos preocuparnos por reinventar la rueda, sino que deberíamos aprovechar un framework CSS existente como Twitter Bootstrap.

2. Creando un Bootstrap inicial

Tener un ejemplo o una maqueta a la que nos podemos referir cuando se crea un tema inicial siempre es útil. Por lo tanto, para obtener el máximo provecho de nuestro Bootstrap inicial naveguemos a http://getbootstrap.com/examples/jumbotron/ donde veremos un ejemplo de un diseño de página inicial:

Cuando echamos un vistazo a la maqueta, podemos ver que el diseño consta de dos filas de contenido con la primera fila que contiene una gran llamada conocida como Jumbotron. La segunda fila contiene tres bloques de contenido destacados. La tipografía y los componentes restantes aprovechan el framework CSS Bootstrap para mostrar el contenido.

Una ventaja de integrar el framework Bootstrap en nuestro tema inicial es que nuestro marcado será responsive por naturaleza. Significa que a medida que se cambia el tamaño de la ventana del navegador, el contenido se reducirá en consecuencia. En resoluciones más pequeñas, las tres columnas se apilarán una sobre la otra permitiendo al usuario ver el contenido más fácilmente en dispositivos más pequeños.

Vamos a recrear esta página principal para nuestro tema inicial, así que tomemos un momento y nos familiarizaremos con algunos términos básicos de Bootstrap antes de crear nuestro tema.

3. Comprensión de la parrilla y columnas

Bootstrap usa una parrilla de 12 columnas para estructurar el contenido usando filas y columnas. El diseño de página comienza con un contenedor principal que envuelve todos los elementos secundarios y nos permite mantener un ancho de página específico. Cada fila y cada columna tienen clases CSS que identifican cómo debería aparecer el contenido. Entonces, por ejemplo, si quisiéramos tener una fila con dos columnas de ancho igual, construiríamos nuestra página usando el siguiente marcado:

<div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div>

Las dos columnas dentro de una fila deben combinarse con un valor de 12 porque Bootstrap usa un sistema de parrilla de 12 columnas. Usando esta matemática simple, podemos tener varias columnas de tamaño y columnas múltiples, siempre y cuando su total sea 12. También deberíamos tomar nota de las clases de columna, ya que tenemos una gran flexibilidad para seleccionar diferentes puntos de corte:

  • Extra pequeño (col-xs-x)

  • Pequeño (col-sm-x)

  • Medio (col-md-x)

  • Grande (col-lg-x)

Cada punto de interrupción hace referencia a los diversos dispositivos desde teléfonos inteligentes hasta monitores de tamaño de televisión. Podemos usar múltiples clases class=”col-sm-6 col-md-4” para manipular nuestro diseño, lo que nos da una fila de 2 columnas en dispositivos pequeños y una fila de 3 columnas en dispositivos medianos cuando se alcanzan ciertos puntos de interrupción.

Para obtener una comprensión más detallada de la documentación restante de Bootstrap, podemos buscar http://getbootstrap.com/getting-started en cualquier momento. Por ahora, es hora de que comencemos a crear nuestro tema de inicio.

4. Configurando una carpeta de temas

El paso inicial en nuestro proceso de creación de un tema inicial es simple. Necesitamos abrir el explorador de archivos y navegar a la carpeta de temas y crear una carpeta para nuestro tema. Nombraremos nuestro tema tweet, como se muestra en la siguiente imagen:

5. Agregar una captura de pantalla

Cada tema merece una captura de pantalla, y en Drupal 8, todo lo que tenemos que hacer es simplemente tener un archivo llamado screenshot.png, y la pantalla Apariencia lo usará para mostrar una imagen sobre nuestro tema.

Coloca un screenshot.png dentro de la carpeta themes/tweet.

6. Configurando nuestro tema

A continuación, necesitaremos crear nuestro archivo de configuración de temas, lo que permitirá que nuestro tema sea reconocible. Solo nos preocuparemos por la información de configuración general para comenzar y luego agregaremos información de la biblioteca y la región en los siguientes pasos.

Comienza creando un nuevo archivo en nuestra carpeta themes/tweet llamada tweet.info.yml y agrega los siguientes metadatos a nuestro archivo:

name: Tweet type: theme description: ‘Un tema inicial de Twitter Bootstrap’ core: 8.x base theme: false

Ten en cuenta que estamos configurando la opción tema base en falso. Establecer este valor en falso le permite a Drupal saber que nuestro tema no dependerá de ningún otro archivo de tema. Esto nos permite tener un control total sobre los recursos de nuestro tema y las plantillas de Twig.

Guardaremos nuestros cambios aquí y borraremos el caché de Drupal. Ahora podemos echar un vistazo para verificar si nuestro tema está disponible para ser instalado.

7. Instalando nuestro tema

Navega a /admin/apariencia y deberíamos ver nuestro nuevo tema ubicado en la sección de temas desinstalados.

Continúa e instala el tema haciendo clic en Instalar y establecer como predeterminado.

Si navegamos a la página de inicio, deberíamos ver una página de inicio sin estilo.

Esta paleta limpia es perfecta cuando estamos creando un tema inicial ya que nos permite comenzar a tematizar sin preocuparnos de anular cualquier marcado existente que pueda incluir un tema base.

8. Trabajando con bibliotecas

Si bien Drupal 8 incluye algunas mejoras en sus bibliotecas predeterminadas de CSS y JavaScript, en general deseamos agregar bibliotecas adicionales de terceros que puedan mejorar la función y la sensación de nuestro sitio web. En nuestro caso, hemos decidido agregar Twitter Bootstrap que nos proporciona un framework CSS responsive y una biblioteca de JS que utiliza un enfoque basado en componentes de tematización.

El proceso realmente involucra tres pasos. Lo primero es descargar o instalar los recursos que componen el framework o la biblioteca. El segundo es crear un archivo *.libraries.yml y agregar entradas de biblioteca que apuntan a nuestros recursos.

Finalmente, necesitaremos agregar una referencia de biblioteca a nuestro archivo *.info.yml.

9. Agregar recursos

Podemos agregar fácilmente los recursos del framework Bootstrap siguiendo estos pasos:

  1. Navega a http://getbootstrap.com/getting-started/#download

  2. Haz clic en el botón Descargar Bootstrap

  3. Extrae el arcivo .zip.

  4. Copia el contenido de la carpeta bootstrap a nuestra carpeta themes/tweet.

  5. Una vez que hayamos terminado, nuestro contenido de la carpeta themes/tweet debería verse como sigue:

Ahora que tenemos los recursos Bootstrap agregados a nuestro tema, necesitamos crear un archivo *.libraries.yml que podamos usar para referenciar nuestros recursos.

10. Crear una referencia de biblioteca

Cada vez que deseemos agregar archivos CSS o JS a nuestro tema, tendremos que crear o modificar un archivo *.libraries.yml existente que nos permita organizar nuestros recursos. Cada entrada a la biblioteca puede incluir uno o varios indicadores para el archivo y la ubicación dentro de nuestra estructura del tema. Recuerda que el nombre de nuestro archivo *.libraries.yml debe seguir la misma convención de nomenclatura que nuestro tema.

Podemos comenzar por seguir estos pasos:

  1. Crea un nuevo archivo llamado tweet.libraries.yml.

  2. Agrega una entrada de biblioteca llamada bootstrap.

  3. Agrega una versión que refleje la versión actual de Bootstrap que estamos usando.

  4. Agrega la entrada de CSS para bootstrap.min.css y bootstrap-theme.min.css.

  5. Agrega la entrada JS para bootstrap.min.js

  6. Agrega una dependencia a jQuery ubicada en el núcleo de Drupal:

bootstrap: version: 3.3.6 css: theme: css/bootstrap.min.css: {} css/bootstrap-theme.min.css: {} js: js/bootstrap.min.js dependencies: - core/jquery
  1. Guarda tweet.libraries.yml.

Hemos agregado una entrada de biblioteca más compleja que la que hicimos en el capítulo 3. Sin embargo, en la entrada de la biblioteca anterior, hemos agregado ambos archivos CSS y JS así como las dependencias introducidas.

Las dependencias permiten que cualquier archivo JS que dependa de una biblioteca JS específica se asegure de que el archivo puede incluir la biblioteca como una dependencia, lo que asegura que la biblioteca se carga antes de nuestro archivo JS. En el caso de Twitter Bootstrap, se basa en jQuery y ya que Drupal 8 lo tiene como parte de su núcleo core.libraries.yml, podemos hacer referencia a él apuntando a esa biblioteca y su entrada.

11. Incluyendo nuestra biblioteca

El hecho de que hayamos agregado una biblioteca a nuestro tema, no significa que se agregará automáticamente a nuestro sitio web.

Para que podamos agregar Bootstrap a nuestro tema debemos incluirlo en nuestro archivo de configuración tweet.info.yml.

Podemos agregar Bootstrap siguiendo estos pasos:

  1. Abre tweet.info.yml.

  2. Agrega una referencia de bibliotecas a bootstrap al final de nuestra configuración como sigue:

libraries: - tweet/bootstrap
  1. Guarda tweet.info.yml.

Asegúrate de borrar la memoria caché de Drupal para permitir que nuestros cambios se agreguen al registro de temas. Finalmente, navega a nuestra página de inicio y actualiza el navegador para que podamos ver nuestros cambios.

Si inspeccionamos HTML utilizando las herramientas de desarrollo de Chrome, deberíamos ver que la biblioteca Twitter Bootstrap está siendo incluida junto con el resto de nuestros archivos. Tanto el CSS como el JS se cargan en el flujo correcto de nuestro documento.

12. Creando un Jumbotron

Muchas veces un diseñador creará una sección de contenido que desean llamar la atención de los usuarios. Esto a veces se conoce como una llamada a la acción o un héroe. Bootstrap llama a este tratamiento visual un Jumbotron y constituye la primera parte de nuestra maqueta de página de inicio que vamos a crear.

Para que podamos implementar el Jumbotron, tenemos que pensar en cómo se presenta nuestra página de inicio actual. Tenemos un bloque personalizado llamado Jumbotron ubicado dentro de la región de contenido. Esto significa que potencialmente cada página tendrá este bloque.

Además, cada página contiene también un bloque de título de página y basado en la maqueta, no queremos que se muestre en nuestra página de inicio. Por lo tanto, debemos abordar estas dos tareas al modificar nuestra página para acomodar el Jumbotron.

Primero, aprovecharemos el nuevo WYSIWYG predeterminado de Drupal para editar directamente el código fuente HTML. Esto nos permitirá agregar marcas HTML directamente en nuestro bloque personalizado sin preocuparse por crear una plantilla Twig para él.

En segundo lugar, tendremos que ocultar el bloque de título en la página de inicio usando restricciones de página en el Administrador de diseño de bloque.

12.1.Primer paso: administrar el contenido del bloque

Podemos administrar un contenido de bloque de múltiples maneras, pero lo más fácil es usar los enlaces contextuales que proporciona Drupal. Si navegamos a la página de inicio y localizamos el primer bloque que muestra “¡Hola mundo!”, podemos pasar el cursor sobre él para ver el icono de enlaces contextuales:

El menú de enlaces contextuales nos permitirá acceder rápidamente al marcado del bloque siguiendo estos pasos:

  1. Haz clic en el enlace Editar.

  2. Ubica el campo del cuerpo.

  3. Haz clic en el botón Fuente dentro de la barra WYSIWYG.

  4. Agrega el siguiente marcado incluyendo el jumbotron y los elementos del contenedor alrededor del marcado actual:

<div class="jumbotron"> <div class="container"> existing markup... </div> </div>
  1. Haz clic en Guardar.

Esto logrará la primera parte de nuestros pasos.

Ahora deberíamos ver que nuestro marcado y contenido han sido reemplazados y ahora están siendo diseñados de acuerdo con la maqueta:

12.2. Paso dos: ocultar el título de la página

El título de la página en Drupal 8 ahora está dentro de un bloque. Esto nos permite colocar fácilmente el título de la página donde sea necesario según nuestro diseño. También nos permite administrarlo utilizando las mismas reglas de visibilidad disponibles en cualquier bloque.

En nuestra maqueta, debemos evitar que el título de la página se muestre en la página de inicio.

Podemos lograr esto utilizando el menú contextual en el bloque de título de la página para configurarlo, de la siguiente manera:

  1. Haz clic en el enlace contextual Configurar bloque.

  2. Haz clic en la pestaña vertical Páginas en la pantalla Configurar bloque.

  3. Selecciones Ocultar para las páginas enumeradas.

  4. Ingrese en el campo de texto de las páginas la ruta /home

  5. Haz clic en Guardar bloque.

El bloque de título de la página ya no se muestra, y nuestro jumbotron se ve bastante cerca de la maqueta. Si bien esta fue una técnica bastante simple de agregar clases de HTML y Bootstrap directamente a nuestro contenido, esto en realidad promueve algunas malas prácticas.

Detente y piensa por un minuto sobre lo que acabamos de hacer.

Mezclamos el diseño y el marcado de presentación en un solo campo y lo almacenamos en la base de datos. Primero, esto no es muy flexible. En segundo lugar, no tenemos forma de reutilizar el marcado sin continuar añadiéndolo a los campos directamente por necesidad. La razón por la que abordamos el marcado de Jumbotron de esta manera fue para demostrar un punto. Siempre hay varias formas de hacer algo, pero a menudo tendremos que replantearnos nuestro estilo.

13. Repensando nuestro diseño

A menudo tendremos que reconsiderar el diseño que estamos tratando de lograr al crear un tema inicial. De hecho, crear un tema de inicio puede ser realmente desafiante al principio con mucho ensayo y error. Implementar nuestro Jumbotron es un ejemplo perfecto de tratar de encajar una clavija cuadrada en un agujero redondo.

Si bien Drupal nos permitirá realizar diseños en media docena de formas diferentes, siempre queremos seguir las mejores prácticas.

Después de echar un vistazo al ejemplo de Jumbotron nuevamente, podemos dividirlo en componentes más manejables y reutilizables. Para empezar, el ejemplo de Jumbotron es representar un diseño de página de inicio con una fila para el Jumbotron y otra fila que contiene tres bloques de contenido que flotan uno al lado del otro por igual.

Cuando comenzamos de manera similar con nuestro bloque Jumbotron, en realidad teníamos todos nuestros bloques ubicados en nuestra región de contenido.

14. Agregar regiones

Las regiones son clave para cualquier diseño en Drupal, y la regla común es que cada vez que veamos un diseño o una maqueta, si vemos varias filas de contenido, deberíamos equiparar cada fila a una región de Drupal. En nuestro caso, hemos identificado un par de regiones diferentes, pero actualmente nuestro tema inicial no tiene regiones definidas en absoluto. Por lo tanto, está utilizando las regiones predeterminadas proporcionadas por Drupal.

Lo que realmente necesitamos es agregar una región Jumbotron y la región de contenido destacado.

Estas dos regiones nos permitirán asignarles bloques de contenido aparte de la región de contenido principal donde actualmente los tenemos asignados.

Una cosa a tener en cuenta al agregar regiones a un tema es que no podemos simplemente agregar regiones a nuestra configuración sin agregar también las regiones predeterminadas que proporciona Drupal. Si no se agregan las regiones predeterminadas solo tendremos las regiones definidas disponibles para agregar contenido, lo que no es ideal para un tema inicial.

Comencemos abriendo tweet.info.yml y añadiendo las siguientes regiones al final de nuestro archivo:

regions: header: Header primary_menu: 'Primary menu' secondary_menu: 'Secondary menu' page_top: 'Page top' page_bottom: 'Page bottom' highlighted: Highlighted breadcrumb: Breadcrumb content: Content sidebar_first: 'Left sidebar' sidebar_second: 'Right sidebar' footer: Footer jumbotron: Jumbotron featured: Featured

Asegúrate de guardar el archivo de configuración, borrar la caché de Drupal y visitar la página de diseño de bloques para ver nuestros cambios, de la siguiente manera:

15. Administrar el contenido del bloque

Cuando estamos en la pantalla de diseño de bloques querremos mover nuestros bloques a sus respectivas regiones. Luego podemos aprovechar las diferentes regiones para abordar la aplicación de un estilo que beneficiará globalmente a nuestro tema de inicio.

Comienza siguiendo estos pasos para colocar nuestros cuatro bloques en su lugar:

  1. Localiza el bloque Hero dentro de la región de contenido.

  2. Selecciona Jumbotron del menú desplegable Región.

  3. Ubica el bloque Custom Block One dentro de la región de contenido.

  4. Selecciona Destacado en el menú desplegable Región.

  5. Localiza el bloque Custom Block Two dentro de la región de contenido.

  6. Selecciona Destacado en el menú desplegable Región.

  7. Ubica el bloque Custom Block Three dentro de la región de contenido.

  8. Selecciona Destacado en el menú desplegable Región.

  9. Haz clic en el botón Guardar bloques.

  10. Nuestros cuatro bloques ahora deben colocarse dentro de las regiones, como se muestra en la siguiente imagen:

Si tuvieramos que volver a nuestra página de inicio, ya no veremos ningún contenido que se muestre.

Una vez que hemos agregado dos regiones nuevas y colocado nuestros bloques dentro de esas regiones, las plantillas Twig del núcleo que Drupal está utilizando para generar nuestro contenido no tienen idea de que existen estas regiones.

16. Usar plantillas Twig

La forma más fácil de trabajar con las plantillas de Twig es permitir que las configuraciones de depuración de Drupal y Twig que habilitamos anteriormente nos hagan todo el trabajo. Entonces, ¿qué quiero decir? Comienza navegando a la página de inicio e inspeccionando el marcado usando las herramientas de desarrollo de Chrome. Ubica la sección de marcado donde vemos el elemento div con una clase de layout-container, como se muestra en la imagen:

La depuración de Twig nos permite ver toda la información que necesitamos para identificar qué plantilla de Twig podemos usar para nuestra página de inicio. Si miramos la información provista, podemos identificar lo siguiente:

Drupal usa actualmente page.html.twig

La plantilla se encuentra en core/modules/system/templates/page.html.twig

Drupal sugiere que podemos usar page—front.html.twig para mostrar el mismo contenido.

Con estas tres piezas de información podemos ubicar, copiar y modificar cualquier plantilla de Twig que podamos necesitar para modificar el diseño y el marcado del contenido proveniente de Drupal.

17. Creando una plantilla de página de inicio

Una regla que es útil al crear cualquier plantilla de Twig es ser lo más específico posible. En general, hay varias sugerencias de nombres de archivo que Drupal recomienda y cuanto más detallados seamos al elegir el nombre de esa plantilla, menos nos tendremos que preocupar por anular el contenido que no queremos sobrescribir.

Vamos a crear nuestra plantilla de página de inicio siguiendo estos pasos:

Navega a la carpeta core/modules/system/templates

Copia page.html.twig

Coloca la copia de page.html.twig en la carpeta themes/tweet.

Cambia el nombre de page.html.twig a page—front.html.twig

Borra la caché de Drupal, explora la página de inicio y usa las Developer Tools de Chrome para verificar que estamos usando la plantilla page—front.html.twig en la carpeta themes/tweet:

Dado que ahora hemos creado una plantilla page—front.html.twig, cualquier marcado que agreguemos o modifiquemos dentro de esta plantilla solo afectará a la página principal. Cualquier página interior que se agregue a nuestro sitio web usará de forma predeterminada page.html.twig.

La maqueta de Jumbotron solo necesita mostrar el encabezado, el menú principal, el pie de página, el Jumbotron y las regiones mostradas. Podemos modificar nuestra plantilla page—front.html.twig reemplazando el marcado actual por el siguiente código:

<div class="layout-container"> <header role="banner"> {{ page.header }} </header> {{ {{ {{ {{ page.primary_menu }} page.highlighted }} page.jumbotron }} page.featured }} <footer role="contentinfo"> {{ page.footer }} </footer> </div>

Ahora guarda la plantilla y actualiza la página de inicio en el navegador. Ahora deberíamos ver las regiones que hemos definido que se muestran junto con los bloques que están asignados a ellas.

Hablando de bloques, nuestro bloque Jumbotron contiene marcas dentro del campo body cuando realmente debería moverse a una plantilla de región.

18. Creando plantillas de región

Al igual que pudimos crear una plantilla Twig específica de la página, también podemos crear plantillas Twig específicas de región. Si inspeccionamos la región Jumbotron con las Developer Tools de Chrome, desde las sugerencias de nombre de archivo veremos que podemos crear una nueva plantilla de Twig llamada region—jumbotron.html.twig.

Crea la plantilla de región siguiendo estos pasos:

  1. Navega a la carpeta core/modules/system/templates

  2. Copia region.html.twig

  3. Coloca la copia en la carpeta themes/tweet

  4. Cambia el nombre del archivo a region—jumbotron.html.twig

Borra la caché de Drupal, explora la página de inicio y usa las Developer Tools para verificar que estamos usando la plantilla region—jumbotron.html.twig.

A continuación, vamos a querer reemplazar el marcado dentro del archivo con el siguiente marcado:

{% if content %} <div class="jumbotron"> <div class="container"> {{ content }} </div> </div> {% endif %}

Ahora guarda la plantilla y actualiza la página de inicio en el navegador. Si inspeccionamos la región de Jumbotron, veremos que se ha agregado nuestro nuevo marcado. Todo lo que queda por hacer es editar el bloque y eliminar el marcado de diseño que agregamos al contenido previamente.

Ubica el bloque Jumbotron en la página de inicio, desplácese sobre él para mostrar el menú contextual y siga estos pasos:

  1. Haz clic en el enlace Editar.

  2. Ubica el campo del cuerpo.

  3. Haz clic en el botón Fuente dentro de la barra WYSIWYG.

  4. Reemplaza el marcado actual con el siguiente marcado:

<h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
  1. Clica en Guardar.

Ahora hemos completado nuestra región Jumbotron de la página principal al separar el marcado de diseño del marcado de presentación. Este enfoque ahora es reutilizable y hace una excelente ubicación en nuestro tema de inicio para agregar contenido Hero. Vamos a replicar este proceso agregando una plantilla Twig para nuestra región mostrada también de la siguiente manera:

  1. Comienza creando un archivo nuevo llamado region—featured.html.twig dentro de nuestra carpeta themes/tweet.

  2. Reemplaza el marcado actual con el siguiente código:

{% if content %} <div class="container"> {{ content }} </div> {% endif %}
  1. Ahora guarda la plantilla y actualiza la página de inicio en el navegador. Nuestra región destacada ahora tiene la clase contenedor. Además, la región presentada restringe el contenido al mismo ancho que nuestra región Jumbotron.

Para que podamos completar la región presentada, necesitamos saber qué bloques están dentro de ella y agregarles clases de CSS. Es hora de mirar hacia la capa del tema Drupal 8 para obtener ayuda.

19. Trabajando con la capa Theme

Drupal 8 tiene una extensa API que incluye la capa Theme, que nos da la capacidad de alterar y preprocesar variables antes de que Drupal las genere. La API es tan extensa que ni siquiera rascaremos la superficie de la funcionalidad que podemos usar. Se puede encontrar información más detallada en https://api.drupal.org/api/drupal/8.

Una de esas funciones con la que trabajaremos es template_preprocess_block, que prepara valores pasados a cada bloque antes de que block.html.twig los genere.

Antes de que podamos comenzar a usar las funciones de preproceso, necesitaremos crear un archivo *.theme.

Comienza por crear un nuevo archivo llamado tweet.theme dentro de nuestra carpeta themes/tweet.

Una vez que nuestro archivo de tema ha sido creado, podemos agregar la siguiente función de preproceso:

<?php function tweet_preprocess_block(&$variables){ }

Dentro de nuestra función, buscaremos bloques específicos basados en sus ID y luego les aplicaremos una clase CSS que permita que los bloques se muestren en tres columnas.

Una cosa a tener en cuenta es que de ninguna manera es la única forma de cumplir este requisito, pero para evitar llegar demasiado lejos en la API de Drupal, optaremos por una solución simple.

Mientras trabajamos con la capa Theme, necesitamos alguna forma de imprimir la matriz $variables que se pasa por referencia a la mayoría de las funciones. Aunque PHP nos proporciona la función var_dump(), puede ser una tarea tediosa leer toda la información que se imprime en la pantalla, especialmente porque no está formateada.

20. Usando Devel para imprimir variables

La comunidad Drupal nos ha proporcionado un mejor mecanismo para trabajar con variables utilizando un módulo de terceros llamado Devel que se puede encontrar en https://drupal.org/project/devel y es un conjunto de funciones de ayuda para trabajar con variables, así como una lista de otras funcionalidades que no usaremos en este momento.

Como esta es la primera vez que instalamos un módulo contribuido para utilizarlo con Drupal 8, podemos seguir estos pasos para descargar e instalar el módulo:

  1. Navega a la página del proyecto Devel https://drupal.org/project/devel.

  2. Haz clic en el enlace de descarga .tar o .zip para obtener la última versión de Drupal 8.x

  3. Crea una carpeta llamada contrib dentro de la carpeta de módulos de nuestra instancia de Drupal 8.

  4. Extrae el contenido de Devel en la carpeta contrib como sigue:

La carpeta contrib contendrá los módulos aportados que instalamos, incluido el módulo Devel. Ahora necesitamos instalar y configurar el módulo Devel siguiendo estos pasos:

  1. Navega a /admin/modules

  2. Ubica el módulo Devel en la sección de Desarrollo.

  3. Haz clic en la casilla de verificación junto a Devel para instalarlo.

  4. Ubica el módulo Devel Kint

  5. Haz clic en la casilla de verificación junto a Devel Kint para instalarlo.

  6. Haz clic en el botón instalar en la parte inferior de la página Extender.

Ahora que hemos instalado Devel y Devel Kint, podemos pasar a usarlo para mostrar $variables dentro de nuestra función de preprocesamiento para ayudar a identificar la información que necesitaremos para completar nuestra función.

21. Imprimir variables desde una función

Si abrimos nuevamente nuestro archivo tweet.theme actualmente tenemos una función de preproceso vacía. Esta función acepta un parámetro que se pasa por referencia que mantiene disponible $variables para que los bloques las utilicen.

Podemos usar el módulo Devel para generar ahora $variables en nuestra página agregando la siguiente línea de código a nuestra función:

<?php function tweet_preprocess_block(&$variables){ dpm($variables); }

La función dpm() tomará los valores que se le pasen y generará los contenidos en un formato compatible con la impresión. Para ver esto en acción, guardemos nuestro archivo, borramos la caché de Drupal y navegamos a nuestra página de inicio. Si Devel funciona correctamente, deberíamos ver seis secciones diferentes de nuestro sitio que muestran un cuadro de información contraído que contiene los contenidos de la matriz de $variables. Cada instancia representa los valores para cada bloque asignado actualmente a las regiones. Esto se debe al hecho de que nuestra función de preproceso se ejecuta una vez para cada bloque, de la siguiente manera:

Estamos interesados en los tres bloques personalizados que aparecen en nuestra región destacada.

Suponiendo que los bloques se cargan en el orden en que se imprimen las regiones, deberíamos poder expandir el cuarto cuadro de información para ver más información. En particular, estamos interesados en los atributos de bloque que contienen la ID de cada bloque, de la siguiente manera:

Cuanto más miramos la información que se está emitiendo, más sentido tiene atravesar la matriz para acceder a la información que podemos utilizar. Por ejemplo, para tomar la ID de cada bloque, podríamos acceder escribiendo $variables[‘attributes’][‘id’] dentro de nuestra función de preproceso. Ahora todo lo que tenemos que hacer es agregar algo de lógica a nuestra función que busque la ID dentro de una lista de identificadores de bloque y agregue una clase CSS al bloque si se encuentra. Podemos lograr esto agregando los siguiente a nuestra función de preproceso:

function tweet_preprocess_block(&$variables){ // Add layout class to Featured Blocks $featured = array('block-tweet-customblockone','block-tweet- customblocktwo','block-tweet-customblockthree'); $id = $variables['attributes']['id']; // If block id matches list - add class if(in_array($id, $featured)){ $variables['attributes']['class'][] = 'col-md-4'; } }

Recuerda eliminar la función dpm() que agregamos anteriormente. A continuación, podemos borrar el caché de Drupal y luego navegar por nuestra página de inicio donde veremos nuestros tres bloques personalizados alineados con nuestra parrilla:

Definitivamente hemos dominado el uso del framework Bootstrap con nuestro tema de inicio para recrear el ejemplo de la maqueta Jumbotron. Al modificar las plantillas Twig, usar sugerencias de temas, trabajar con regiones nuevas y profundizar en la capa de Temas, pudimos tener el marcado HTML de salida de Drupal exactamente como lo necesitábamos.

Si bien los temas iniciales son muy flexibles, sí requieren un poco más de trabajo que el simple uso de un tema base existente. Podemos echar un vistazo rápido a lo que esto significa al crear un subtema a continuación.