drupal 9

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Si quieres aprender a manipular código en tus plantillas Twig, para realizar operaciones del tipo, ocultar un campo dependiente de otro o imprimir valores directamente en la plantilla de cualquier contenido, ya no tendrás que recurrir a las preprocess_functions(), porque, además de esta opción, a partir de Drupal 8, tienes la posibilidad de ejecutar código, aplicar css condicional y otras muchas opciones, con el empleo de Twig el sistema en que se han diseñado las plantillas a partir de Drupal 8

Cómo personalizar las plantillas Twig en Drupal 9:

     A partir de Drupal 8, se sustituyeron las Plantillas php con la extensión .tpl por otras mejoradas, que incluyen el lenguaje Twig. Esta nueva adaptación permite la ejecución de código de forma más ordenada y limpia en nuestras plantillas de Drupal, para modificar el aspecto de nuestros contenidos.

     También tenemos la posibilidad de activar el Modo Depurador o Modo Debug, que nos permite conocer los "Nombres sugeridos" para que nuestras plantillas afecten a tipos de contenido específicos, facilitando considerablemente la maquetación del proyecto.

     Te dejo las instrucciones para que puedas activarlo: Configuración Desarrollo Local Drupal 8

     Una vez tengas activado el Modo Depurador de Drupal y refrescado Caché de Drupal, podrás comenzar a explorar tus contenidos y confirmar las "Sugerencias" para las plantillas personalizadas, que te permitirán realizar las modificaciones necesarias en cada caso. 

     Además de las "Sugerencias", para que puedas nombrar tus plantillas según el contenido al que quieres aplicarle los cambios, Drupal te mostrará la ubicación de la plantilla original, para que la puedas copiar y renombrar adecuadamente.

     Una vez hayas copiado y renombrado, según la sugerencias de Drupal, la Plantilla original, podrás comenzar a realizar todo tipo de modificaciones, que podrás comprobar a medida que vayas avanzando para realizar ajustes y mejoras.

     Cómo imprimir campos dentro de una plantilla twig:

          Por defecto, todas las plantillas del tipo Twig, en Drupal, nos vienen con la variable {{ content }}, esta se encargará de imprimir todos los que se hayan definido previamente. 

          Pero si lo que queremos es tener el control, e imprimir, sólo algunos campos específicos o poder añadir etiquetas de forma individual en cada campo, lo que necesitaremos es añadir, dentro de esta misma variable, un punto y a continuación el nombre de máquina que tiene nuestro campo. De esta forma obtendremos en pantalla el campo específico que hayamos colocado, envuelto en sus etiquetas html.

          Si lo que buscamos es imprimir el valor del campo, sin las etiquetas html que nos añade Drupal por defecto, sólo tendremos que añadir un punto seguido de cero (0), al final del nombre del campo, tal y como te muestro en la imagen.

          Si deseas conocer otras formas de extraer valores de campos, dentro de las plantillas Twig, por ejemplo, la url de un campo imagen o el valor de un campo enlace, separado del título, te dejo aquí varios ejemplos:

          Cómo extraer valores de campos dentro de una plantilla Twig en Drupal

          En la siguiente imagen, he modificado la plantilla de un elemento Paragraphs, formado por dos campos de tipo Texto y he añadido las etiquetas correspondiente a cada campo por separado, para obtener un estructura a medida, utilizando clases de Bootstrap y etiquetas HTML.

     Cómo añadir condicionales en Twig:

          Para añadir condicionales, dentro de tu plantilla Twig, y lograr, por ejemplo, que un campo sólo se muestre cuando tiene contenido relacionado dentro de Drupal, lo que necesitarás es declarar el inicio y final de tu condicional, encerrándolo dentro de una estructura como esta {% if CONDICIÓN %} CAMPO {% endif %}.

          En la siguiente imagen, el campo field_titular_principal, sólo se mostrará en el caso de que tenga contenido asociado. Para obtener este resultado, dentro de la declaración de la condición IF, he añadido el filtro de Twig " |render ", que comprueba el valor del campo una vez renderizado por Drupal.

     Puedes conocer más opciones disponibles, para trabajar con tus plantilla Twig en Drupal, visitando la Página Oficial de Twig

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Como ya sabrás, hoy en día, si quieres dedicarte a la creación de páginas web, pero no puedes crear una con diseño "responsivo", o sea, que pueda adaptarse a todos los dispositivos, entonces deberías plantearte otro tipo de ocupación o buscarte algún compañero especializado en diseño y maquetación.

     Afortunadamente, ahora es mucho más sencillo aplicar este tipo de diseños en Drupal, mediante el uso de Bootstrap, que consiste en un conjunto de librerías y etiquetas que te permitirán, crear fantásticos diseños adaptables a cualquier dispositivo, sin que tengas la necesidad de profundizar en el aprendizaje de javascript o css.

     Adicionalmente, contamos con un módulo mejorado que, además de integrar las últimas opciones disponibles de Bootstrap, añade otras funcionalidades que podremos configurar desde la interfaz de usuario de Drupal, en el apartado de Apariencia, como son colores de textos, enlaces o incluso de las barras de navegación.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/bootstrap_barrio

Imagen

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Barrio y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en bootstrap_barrio -y

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Cómo crear un Subtheme utilizando Bootstrap Barrio:

     Drupal no recomienda siempre, que no modifiquemos el código incluido directamente en sus módulos o Themes, por esta razón, siempre que nuestros proyectos requieran cambios específicos, que no nos permiten las versiones por defecto, tendremos que realizar modificaciones a través de módulos personalizados o, en este caso, creando nuestro propio Subtheme, que heredará las funcionalidades del Theme Bootstrap Barrio, pero al que podremos añadir tantos cambios como nos hagan falta.

     Para crear un Subtheme a partir de Bootstrap Barrio, tendremos que ir a la Página oficial y seguir las instrucciones. Creating a custom Barrio sub-theme.

     En resumen, se trata de crear una carpeta llamada "Custom", dentro de la carpeta de Themes que nos trae por defecto Drupal y luego añadir el código que podremos copiar, desde la página oficial, dentro de un archivo ejecutable llamado: create_subtheme.sh

    Por último, utilizando nuestra consola, nos colocaremos dentro de la carpeta donde se ubica este archivo que hemos creado y luego lo ejecutaremos con el comando ./create_subtheme.sh, esto nos generará un nuevo Subtheme, que heredará las propiedades y funcionalidades del Bootstrap Barrio y que podremos instalar en nuestro proyecto para comenzar a personalizarlo de acuerdo con nuestras necesidades.

     Si quieres ver las instrucciones en español: Crear tema personalizado Drupal 8/9 con Bootstrap Barrio

Cómo personalizar las plantillas Twig en Drupal 9:

     A partir de Drupal 8, se sustituyeron las Plantillas php con la extensión .tpl por otras mejoradas, que incluyen el lenguaje Twig. Esta nueva adaptación permite la ejecución de código de forma más ordenada y limpia en nuestras plantillas de Drupal, para modificar el aspecto de nuestros contenidos.

     También tenemos la posibilidad de activar el Modo Depurador o Modo Debug, que nos permite conocer los "Nombres sugeridos" para que nuestras plantillas afecten a tipos de contenido específicos, facilitando considerablemente la maquetación del proyecto.

     Te dejo las instrucciones para que puedas activarlo: Configuración Desarrollo Local Drupal 8

     Una vez tengas activado el Modo Depurador de Drupal y refrescado Caché de Drupal, podrás comenzar a explorar tus contenidos y confirmar las "Sugerencias" para las plantillas personalizadas, que te permitirán realizar las modificaciones necesarias en cada caso. 

     Además de las "Sugerencias", para que puedas nombrar tus plantillas según el contenido al que quieres aplicarle los cambios, Drupal te mostrará la ubicación de la plantilla original, para que la puedas copiar y renombrar adecuadamente.

     Una vez hayas copiado y renombrado, según la sugerencias de Drupal, la Plantilla original, podrás comenzar a realizar todo tipo de modificaciones, que podrás comprobar a medida que vayas avanzando para realizar ajustes y mejoras.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Si ya has trabajando con Drupal 7 u 8, te habrás topado con la necesidad de crear campos que te permitieran modificar su posición con respecto a los demás para ofrecer mayor flexibilidad en la construcción de tus contenidos. 

     Uno de los módulos más populares para realizar esta tarea era Fielgroup, no obstante, los desarrolladores de Drupal apostaron por algo todavía más flexible y que se pudiera combinar con otros módulos para dar paso a una gran cantidad de nuevas posibilidades.

     Este nuevo módulo se llama Paragraphs, que además de permitir la agrupación de campos, como su predecesor, ofrece múltiples opciones para anidar estructuras de contenido mucho más complejas y gráficas para que los usuarios del tipo gestor de contenidos, tengas más flexibilidad y mejor percepción al momento de crear o editar en Drupal.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/paragraphs

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Paragraphs y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en paragrphs -y

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Creación de contenidos con Paragraphs:

     Una vez tenemos descargado y activado el módulo Paragraphs y sus dependencias, ya podremos empezar a crear nuestros Paragrphs, en la url: /admin/structure/paragraphs_type o, si ya hemos instalado el módulo Admin Toolbar, podremos ir desde el menú superior a la opción Estructura/Tipos de Paragraphs/ Agregar tipo de Paragraphs, como te muestro en la siguiente imagen:

     Un elemento Paragraphs, sería el equivalente al Fieldgroup, o sea, un contenedor donde podremos añadir todo tipo de campos, o inclusive, otros paragraphs, creando estructura reutilizables y muy versátiles.

     En este ejemplo, he creado un elemento Paragraphs, que contiene dos campos del tipo "Texto Simple", que me permite añadir uno o varios "Bloques" con dos tipos de Titulares, a diferentes tamaños y formatos, que a su vez podré implementar en varias páginas si fuera necesario, teniendo que definir sus características una sola vez.

     Una vez tengo creados los elementos del tipo Paragraphs, que quiero utilizar dentro de mis contenidos, podré añadirlos como si se tratara de cualquier otro tipo de campo, para que esté disponible, por ejemplo, dentro de mi página inicio.

Además, puedo configurarlo como ilimitado, para poder añadir tantos como necesite y cambiar el orden de aparición según mis necesidades.

     Para añadir los elementos del tipo Paragraphs, una vez configurado nuestro tipo de contenido, podremos hacerlo de la forma habitual, como lo haríamos con otros campos, o de una forma más avanzada, que podremos configurar desde el formulario de creación del Paragraphs:

     Además, si hemos optado por la configuración por defecto, para añadir los elementos Paragraphs en nuestro contenido, veremos que al hacer clic en el botón de añadir, que aparecerá en la parte inferior, podremos agregar todos los Paragraphs y sus elementos, muy fácilmente:

     Al igual que con cualquier otro tipo de campo, podremos modificar el modo de presentación de los elementos Paragraphs, además de sus respectivos campos. Para ello, tendremos que ir a Estructura/Tipo de Paragraphs/Gestionar Presentación:

     Cuando hayamos realizado los cambios en la presentación de nuestros elementos Paragraphs y sus campos, podremos comenzar a aplicarles los estilos, según las necesidades de nuestro proyecto:

     Si hemos decidido crear varios tipos de Paragraphs y, además, los hemos añadido para que estén disponibles dentro de nuestro tipo de contenido, en lugar de ver un botón de añadir, en la parte inferior, veremos que se despliega un selector, con los nombres de los diferentes Paragraphs que hayamos configurado para este tipo de contenido:

     Como mencioné anteriormente, una vez añadidos los elementos Paragraphs, dentro de nuestro contenido, podremos modificar el orden de aparición, dependiendo de cómo los hayamos creado, para logar mucho mayor flexibilidad que la que podremos obtener si utilizáramos los tradicionales "Bloques", que nos ofrece Drupal por defecto:

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

En versiones anteriores de Drupal, la instalación de nuevos módulos o el traspaso de proyectos entre diferentes entornos, podrían provocarnos grandes dolores de cabeza, ya fuera porque nos faltaba alguna librería o módulos dependientes, o por que nos olvidáramos de arrastrar algún archivo y no sabíamos cuál o dónde estaba el mismo.

     Estas son sólo algunas de las razones por las que a partir de Drupal 8, se comenzó a utilizar el gestor de paquetes Composer y, de echo, está altamente recomendado, para facilitar todo el proceso de instalación o actualización del proyecto o de sus módulos, ya que en pocas líneas de ejecución del código, podremos descargar todas las dependencias, sin tener que preocuparnos de buscarlas una a una, descargarlas y ubicarlas en su lugar correspondiente.

     Composer puede añadirse a un proyecto ya existente, pero en esta ocasión, voy a ensañarte cómo instalar un nuevo proyecto Drupal 9 utilizando este gestor de paquetes.

Instalación de Drupal 9 utilizando Composer

     Paso 1 instalación del gestor de paquetes Composer:

     Hoy en día, una de las modalidades más extendidas para desarrollar cualquier proyecto, es el uso de los conocidos como "Gestores de paquetes", estos nos permitirán descargar, "paquetes de código", con apenas un par de líneas de comandos de consola, de esta forma se colocarán dentro de estructuras preconfiguradas, toda clase de librerías, módulos o herramientas, dependiendo del tipo de proyectos con los que estemos trabajando.

     En el caso de Drupal, el gestor de paquetes con el que se trabaja es Composer, que nos permite descargar directamente, desde toda la estructura necesaria para iniciar un proyecto web en Drupal, hasta las posteriores actualizaciones de seguridad o dependencias para nuestros módulos.

     Según tu sistema operativo, existen varias formas de descargar e instalar Composer en tu ordenador, para ello puedes dirigirte a su Página Oficial y seguir las instrucciones que correspondan a tu caso en particular.

 

Si utilizas Windows como sistema operativo, entonces te será tan fácil como descargar el archivo instalador, hacer clic como la mayoría de los programas que instalamos en Windows y luego clic en el botón siguiente hasta que termine.

     Ten en cuenta de que Composer necesitará que tengas instalado Php en tu ordenador previamente o no podrás instalarlo.

 

No importa si tienes instalado el php dentro de un servidor local tipo Xampp, Wampp o si lo haz instalado descargándolo directamente desde la página php, al inicializar el instalador Composer encontrará el archivo Php que necesita para continuar con el proceso de instalación.

 

Al finalizar el proceso de instalación de Composer, si escribes en tu consola composer, deberías ver en tu pantalla un mensaje parecido al que te muestro a continuación.

 

Paso 2 Configurar tu Servidor local Php + MySql + Apache:

          Drupal está desarrollado utilizando el lenguaje Php combinado con base de datos, que por defecto suele ser MySql o MariaDb y para que funcione en tu servidor local, necesitarás tener Apache instalado.

          Como hemos dicho anteriormente, puedes descargar e instalar un Servidor Local Xampp, si no sabes cómo hacerlo, tienes toda la información necesaria paso a paso en el artículo Instalación servidor local Xampp para Drupal.

          Además, en el caso de Drupal 8 y 9, deberías realizar algunos cambios en la configuración por defecto de tu servidor local, para evitar errores tanto durante el proceso de instalación inicial, como una vez hayas comenzado a trabajar con tus contenidos, tienes las configuraciones disponibles en este Snippet, para que puedas confirmar los cambios antes de continuar:

         Configuración Servidor Local Drupal 9

    Paso 3 Configurar tu dominio virtual:   

          Una vez instalado tu servidor Apache, para poder acceder a la url que activará el instalador de Drupal, será necesario que configures el dominio o nombre que usarás para conectar a tu web, ej.: drupal.localhost.

    Paso 4 Descargar el esqueleto o estructura de Drupal:

          Ahora que ya tenemos todos los pasos anteriores comprobados, nuestro servidor funciona correctamente y podemos acceder a la carpeta en la que vamos a colocar todos los archivos relacionados con nuestro proyecto Drupal, podremos comenzar con el proceso de descarga, para ello, tenemos disponible toda la información necesaria en la Página Oficial de Drupal.

 

Tan pronto como hagamos clic en la tecla Enter, comenzará la descarga de todos los archivos necesarios para nuestra instalación, desde el repositorio de Drupal.

 

Una vez haya finalizado el proceso de descarga, podremos abrir nuestro explorador de archivos para analizar la estructura que nos ha creado Composer.

 

A continuación, deberías subir todos los archivos de tu instalación a un repositorio, para que puedas controlar en todo momento la evolución del mismo desde el principio, además de practicar los comandos relacionados con el control de versiones, aunque no estés dentro de un proyecto para algún cliente o empresa.

 

Descarga de módulos usando Composer:

          Una de las mayores ventajas añadidas, a partir de la integración de Composer en el proceso de instalación de proyectos Drupal, es que podremos descargar módulos adicionales, utilizando a penas, un par de líneas de código, sin tener que preocuparnos por los módulos dependientes como en versiones anteriores.

 

Cada vez que descargues un módulo utilizando Composer, será añadido en el archivo composer.json, en él podrás ver, además, la versión específica del módulo en el momento de la descarga, entre otras informaciones.

 

Si quisiéramos instalar los mimos módulos en otro proyecto Drupal, sólo tendríamos que copiar el archivo composer.json y ejecutar en la consola el comando composer install, dentro de nuestro proyecto Drupal, e inmediatamente comenzaría la descarga de todos los módulos declarados en el apartado "require" 

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

 Drupal ofrece varias formas de instalación para que puedas comenzar de acuerdo a tus necesidades de forma rápida y sencilla.

     Lo principal es que tengas un servidor con Apache, Mysql y Php; puedes utilizar el paquete XAMPP, para conseguir todo esto en una sola instalación, puedes aprender cómo configurar un servidor local Xampp y los requisitos de un servidor local necesarios para drupal. 

     Si eres más aventurero, también podrías probar con un servidor local, utilizando el sistema de contenedores de Docker, aquí tienes las instrucciones para Instalar Docker en Windows 10 Home.

Configuraciones previas

1.- Dominio Virtual

     Aunque por defecto, el dominio "http://localhost" apuntará a la carpeta pública del servidor, generalmente llamada "htdocs", o "public", para que se iniciara el instalador de Drupal, tendríamos que descomprimir los archivos que hemos descargado desde la web oficial de Drupal , y una vez hecho esto, colocarlos directamente dentro de esta carpeta, como uno de los archivos es el "index.php", será sustituido por el que trae la instalación del Xampp y entonces arrancará el instalador.

Pero la mejor forma de realizar cualquier instalación de una web en tu ordenador, es que configures un dominio virtual, ej.: drupal.localhost, de esta manera podrás acceder exclusivamente a esta instalación y además alojar otras webs aunque no estén creadas con Drupal, con el dominio específico en cada caso.

Para configurar este dominio virtual, tendrás que modificar dos archivos: host, que en windows lo encontrarás en "C:\Windows\System32\drivers\etc" y luego el archivo "httpd-vhosts.conf", que estará en Xampp, si ha sido tu decisión, dentro de la ruta "C:\\xampp\apache\conf\extra".

A continuación te enseño el aspecto que deberían tener estos dos archivos con el dominio virtual "drupal.localhost", una vez cambiados los datos, deberás reiniciar el servidor XAMPP para que los reconoza.

Imagen

Cambios en el archivo host de windows para configurar tu dominio virtual

Imagen

2.- La Base de datos

     Drupal, además de un servidor en el que pueda ejecutar código PHP, necesitará de una base de datos, donde se guardarán todas las configuraciones y rutas necesarios, durante su instalación y posteriormente.

     Si haz decidido utilizar el servidor Xampp, verás que tienes un panel de control desde el que podrás arrancar y administrar los servicios muy fácilmente, en el caso de la base de datos, vamos a presionar el botón administrar para que se abra el gestor de base de datos PhpMyAdmin.

Imagen

Una vez abierto el PhpMyAdmin, te recomiendo que selecciones la pestaña "Cuentas de usuario" y a continuación crear un nuevo usuario con todos los privilegios específicos para la tabla que utilizará esta instalación de Drupal.

Imagen

3.- La instalación

     Ahora que ya tenemos la base de datos creada y el servidor local funcionando correctamente, si escribes en el navegador, el dominio que hemos configurado anteriormente, verás que se iniciará el instalador de Drupal y sólo deberás hacer clic en continuar cuando te lo pida, hazta que finalice el proceso.

Imagen