Imprimir archivos Media en Twig Drupal 8,9, o superior
Si quieres imprimir la url de un archivo (Video, Image o Mp3), dentro de tus plantilla twig, es necesario que utilices una de las tres opciones disponibles.
custom theme
Generar módulo personalizado usando Drush
Video de Youtube
Texto
Hoy en día, Drupal sigue siendo una de las mejores alternativas disponibles en el mercado tecnológico, para la creación de cualquier tipo de proyecto, que esté relacionado con el desarrollo de aplicaciones y/o páginas web; gracias a que, a partir de la versión 8, Drupal comenzó a utilizar Symfony como parte central de su estructura, añadiendo con esto el motor de plantillas Twig, apliando considerablemente su potencia, capacidad de escalabilidad y versatilidad, para cumplir con la mayoría de los requerimientos ante cualquier reto.
La leyenda urbana alrededor de Drupal
Como suele ocurrir con cualquier tipo de lenguaje de programación o herramienta tecnológica, existen grupos de profesionales del desarrollo web, que mantienen una postura en favor y en contra de trabajar con Drupal, por diversos motivos, y uno de los más extendidos, es su curva de aprendizaje. Por esta razón, muchos eligen aprender a implementar otros sistemas, "más populares, pero no mejores", ya que les permite acceder al mercado laboral, de manera más rápida.
Por este motivo, en www.drupaladictos.com, queremos ayudarte a que compruebes, por tus propios medios, que puedes llegar a convertirte en Drupaladicto, una vez comiences a conocerlo, experimentar con él y a sugerir a tus posibles clientes, que esta debería ser su primera opción, antes de invertir tiempo en un desarrollo, que podría terminar migrándose, o reconstruyéndose a largo plazo.
Como generar módulos personalizados con Drush
Texto
Según la página oficial de Drush : "Drush es un shell de línea de comandos y una interfaz de scripting Unix para Drupal. Drush core se envía con muchos comandos y generadores útiles. De manera similar, ejecuta update.php, ejecuta consultas SQL, ejecuta migraciones de contenido y utilidades diversas como cron o reconstrucción de caché. Drush se puede ampliar con archivos de comandos de terceros". fuente https://www.drush.org/12.x/
Esto significa, que ya no es construir toda la estructura, desde cero, cuando estemos diseñando nuestros módulos personalizados, para ampliar o añadir funcionalidades dentro de nuestros proyectos de Drupal; así que ahora te mostraré todos los pasos necesarios, para que, a partir de ahora, puedas ganar tiempo en tus desarrollos, centrándote en otros aspectos, en lugar del montaje inicial.
Requisitos:
- Tener acceso a la consola, para ejecutar los comandos
- Tener funcionando tu proyecto de Drupal 10
- Tener instalada la versión más reciente de Drush
composer require drush/drush -W
Texto
Pasos para generar un módulo personalizado
Antes de comenzar a ejecutar comandos de Drush, lo recomendable será asegurarnos de que tenemos disponibles dichos comandos, para ello, abriremos la consola y nos colocaremos en la carpeta raíz de Drupal, y a continuación, ejecutaremos el comando que nos devolverá el listado de opciones disponibles en nuestra versión de drush:
drush
o
vendor/bin/drush
Deberíamos ver en pantalla el listado completo, donde nos aseguraremos de encontrar el comando gen
Texto
Paso 1 - Generar una estructura básica y activar el módulo
Si estamos planeando desarrollar un módulo personalizado, lo primero que debemos hacer es generar la estructura base para este módulo; para ello sólo necesitaremos la carpeta principal donde se guardarán todos los archivos del módulo, y dentro de ella, el archivo que identifica y define sus características principales; este archivo se llamará NUESTRO_MODULO.info.
Los principales datos que se definen dentro de este archivo serán: nombre, descripción, tipo, paquete al que pertence, versión de Drupal.
Para generar el archivo y la carpeta con el nombre de nuestro módulo, abriremos nuestra consola, nos colocaremos en la carpeta raíz de Drupal y a continuación, ejecutaremos el comando gen, con la siguiente opción:
drush gen module
En seguida, se mostrarán en pantalla, varias preguntas, que iremos completando, con los datos de nuestro módulo personalizado.
Paso 2 - Activación del módulo
Una vez hayamos terminado con las preguntas de la pantalla anterior, podremos activar nuestro módulo, que todavía no nos mostará nada en pantalla, ya que no tiene ningún controlador, pero sí tendremos constancia de que Drupal lo reconoce y que tendremos vía libre, para seguir añadiendo funcionalidades, a partir de este momento.
Para activar el módulo, podremos hacerlo desde la interfaz o desde la consola, utilizando el comando de drush:
drush en mi_modulo_personalizado
Texto
Paso 3 - Generar nuestra primera página
Ahora es el momento de hacer que nuestro módulo, muestre algo en pantalla, para ello, generaremos un controlador o Controller, que es la clase de php, encargada de esta tarea. Para que podamos acceder a una url específica y ver el contenido de esta página, además del Controller, necesitaremos el archivo routing.yml, donde se definen las diferentes rutas y ubicación de cada controlador en nuestro módulo.
Podremos indicar a Drush, que añada el nuevo controlador dentro del módulo que acabamos de generar, para ello, nos hará falta especificar el nombre del módulo, y a continuación, responder a cada pregunta que se mostrará en pantalla durante este nuevo proceso. El comando que tendremos que utilizar será:
drush gen controller
Texto
Esta vez, al terminar de contestar todas las preguntas, podrás comprobar que se han añadido varios arhivos, además de las carpetas src y Controller, dentro de esta última encontrarás la nueva clase NombreModuloContoller.php, con un método encargado de imprimir en pantalla un mensaje de confirmación.
Para comprobar que puedes acceder a tu nueva página, deberás borrar la caché de Drupal y, luego, copiar la url, que encontrarás en la segunda línea del archivo modulo_personalizado.routing.yml
Texto
Paso 4 - Añadir una plantilla a la página
El último paso, en esta fase inicial de nuestro módulo, consistirá en añadir una plantilla twig, que nos permitirá entre otras opciones, pasar valores e imprimirlos en la página, añadir un formulario, mostrar datos desde nuestra base de datos, etc.
Por ahora, nos enfocaremos en generar esta nueva plantilla y realizar los ajustes, para conectarla con nuestro módulo y se puedan imprimir en pantalla, los valores por defecto, sustituyendo el mensaje inicial del controlador.
Al igual que en el paso anterior, ejecutaremos el comando gen seguido de la opción template y en la primera pregunta, especificaremos el nombre de nuestro módulo, y contestaremos al resto de preguntas, hasta terminar el proceso.
drush gen template
Al terminar el proceso, veremos que se han añadido el archivo .module, la carpeta templates, nueva-plantilla.twig.
Por último, para imprimir los valores de nuestra plantilla, en la página generada por nuestro Controller, añadiremos dentro del método el atributo siguiente:
'#theme' => 'mi_plantilla',
Luego refrescaremos el cache de Drupal nuevamente, y podremos comprobar que se imprime el valor de la variable incluida en el hook_theme, que se generó al crear la plantilla con Drush.
Breakpoints en Drupal | imágenes y media (Parte 1)
Video de Youtube
Texto
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
A medida que vamos creciendo como profesionales, en el desarrollo o maquetación web, nos podremos encontrar con todo tipo de retos, poniendo a prueba nuestros conocimientos, capacidad de análisis, experiencia y sobre todo nuestra paciencia, hasta llegar a encontrar la mejor solución posible.
Uno de los requerimientos más solicitados, es la optimización de recursos, que permitan acceder fácilmente al contenido publicado en cualquier página web, ya que el tiempo que transcurre, entre la descarga de la información desde un servidor y la presentación de los datos, en la pantalla de cualquier dispositivo, marcará el éxito o fracaso total del proyecto.
Entre los recursos más valorados están las imágenes, ya que, además de hacer nuestra web más atractiva para los usuarios, también pueden llegar a provocar verdaderos dolores de cabeza, debido al posible incremento en el consumo de memoria, dependiendo de su calidad o tamaño. Por esta razón es importante encontrar el equilibrio entre lo atractivo y funcional.
Drupal permite cargar imágenes utilizando dos tipos de campo, el campo de imagen simple, o field_image, que podremos encontrar dentro del tipo de contenido Artículo que viene en la instalación por defecto, o el campo de tipo Media, disponible para añadir en cualquier tipo de contenido al activar los módulos Media y Media Library, incluidos en el núcleo de Drupal a partir de la versión 8.
A diferencia del field_image, el campo de tipo Media, permite subir, además de imágenes, otros formatos de archivos como videos o audio; y con la activación del Media Library, podremos acceder a una librería de archivos con vista previa, para poder elegir reutilizarlos cuando nos haga falta.
Una de las maneras más efectivas para trabajar con imágenes, es la implementación del Media Query, que en pocas palabras, consiste en definiciones de varios tamaños, correspondientes a diversos dispositivos, que nos permitirán aplicar ciertos cambios en nuestras imágenes, ejecutados cuando se cumplan dichas especificaciones.
Inicialmente, la Media Query estaba pensada para su aplicación directamente dentro de los archivos relacionados con estilos o CSS de nuestra web, pero todo cambió cuando apareció la etiqueta <picture>, que según su página oficial: "El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos <source> y un elemento <img> contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. "
Con la implementación de los Breakpoints o puntos de quiebra, Drupal se encargará de añadir la etiqueta <picture> automáticamente en nuestras imágenes, para que se muestren de acuerdo con el tamaño de cada dispositivo y con los estilos que hemos definido previamente, dentro del apartado /admin/config/media/image-styles.
Cómo crear breakpoints y aplicarlos a imágenes y archivos Media en Drupal 9
Prerequisitos:
Activar los módulos Media, Media Library y Responsive Image, incluidos en el núcleo de Drupal 9.
Paso 1 Configuración de los campos para trabajar con las imágenes:
Tal y como mencionamos al principio, existen dos tipos de campos para trabajar con imágenes en Drupal, así que, añadiremos en el tipo de contenido Artículo, que ya nos viene por defecto con el campo field_image, un nuevo campo del tipo Media y cargaremos unas cuantas imágenes para poder realizar los ejemplos.
Paso 2 Crear el subtheme y definir los breakpoints o puntos de quiebra:
Como ya habrás imaginado, los breakpoints están relacionados con la apariencia de nuestra web, en Drupal, los responsables de esta tarea son los Themes o Temas, por lo que tienes dos opciones, o creas un Subtheme basándote en los que ya vienen instalados en Drupal, como haremos en este ejemplo o Descargas e instalas un nuevo Subtheme basándote en otro como Bootstrap, Mayo, etc.
En ambos casos, para definir los Breakpoints tendrás que crear, dentro de la carpeta raíz del subtheme que hayas seleccionado, un archivo llamado "MISUBTEMA.breakpoints.yml" ....
y dentro de él simplemente tendrás que definir, los diferentes Breakpoints, siguiendo una estructura como la que te muestro a continuación:
drupaladicto.mobile: label: 'Mobile' mediaQuery: '(min-width: 0px)' weight: 0 multipliers: - 1x - 2x drupaladicto.narrow: label: 'Narrow' mediaQuery: 'all and(min-width: 560px) and (max-width: 850px)' weight: 1 multipliers: - 1x - 2x drupaladicto.wide: label: 'Wide' mediaQuery: 'all and (min-width: 851px)' weight: 2 multipliers: - 1x - 2x
Explicación: La estructura del archivo equivale al nombre de cada breakpoint, compuesto por el nombre de nuestro subthema seguido de un punto y el nombre del punto de quiebra o breakpoint equivalente.
En la línea siguientes a la declaración del Breakpoint, escribimos el Label o nombre que se mostrará en la interfaz, cuando estemos definiendo los estilos de imágenes responsivas o adaptables.
En la siguiente línea es donde declaramos el o los tamaños correspondientes, para ejecutar nuestras modificaciones.
En la siguiente línea, especificamos el "peso" u orden de aparición de las diferentes opciones en el listado de Breakpoints que veremos en la interfaz.
Por últimos, definimos los tamaños, por ejemplo, para el dispositivo en posición vertical y luego en posición horizonal, donde siginficará el doble del tamaño anterior.
Paso 3 Activar el subtheme y comprobar que se han añadido los breakpoints:
Lo siguiente que tendrás que hacer, ahora que ya tienes todos los breakpoints definidos en el archivo de tu subtheme, es activarlo y comprobar que se han añadido al listado correspondiente de estilos.
Para comprobar si se han añadido los estilos, una vez activado nuestro subtheme, nos dirigiremos a la url /admin/config/media/responsive-image-style, donde haremos clic en el botón
Landing Page Drupal | Plantillas Twig (Parte 2) - Bootstrap y Flexbox
Video de Youtube
Debido a que estamos trabajando con Bootstrap 5, para la creación de nuestra Landing Page personalizable en Drupal 8/9/10, hoy utilizaremos las clases de Bootstrap 5 compatibles con Flexbox; de esta manera, nuestro diseño quedará adaptado a múltiples dispositivos (Responsive), sin la necesidad de manipular nuestra hoja de estilos.
Si analizamos el comportamiento que esperamos obtener para la visualización de nuestra Landing Page, al acceder desde un ordenador, veremos que en la parte central, los elementos deberían presentarse dentro de tres columnas, las dos primeras para la imagen e información del producto, y la última, a todo el ancho del contenido, donde se muestra el formulario para la realización de los pedidos.
Imagen
Al acceder a la Página Oficial de Bootstrap, en el apartado de Utilidades, dedicado a FLEX HAZ CLIC AQUI, podremos explorar el listado de clases y sus comportamientos, para facilitarnos la aplicación de casi todas las opciones necesarias en nuestros diseños resposivos, sin demasiados cambios en las hojas de estilos css.
Si ya conocías Bootstrap, sabrás que, añadiendo una o varias clases dentro de cualquier contenedor o etiqueta html, obtendrás el mismo resultado que si aplicaras varias líneas de código css; esto implica un ahorro considerable dentro de las tareas de diseño, además de ofrecer una amplia documentación y varios ejemplos, que podrás encontrar, tanto dentro de la página oficial, como el muchas otras disponibles en internet.
Imagen
Ahora que ya sabemos cómo documentarnos, sobre el uso de las clases de Bootstrap y Flexbox, volvamos a explorar el archivo node--landingpage--full.html.twig, responsable de mostrar nuestra plantilla.
Recuerda, que hemos creado esta plantilla, gracias a que activamos el modo Debug o Depurador de Drupal, explicado en capítulos anteriores del curso.
Si prestamos atención en el código que forma, la parte superior de la plantilla, donde hemos añadido ya la imagen de cabera y el texto que aparece justo debajo de ella, encontraremos algunas de las clases de Bootstrap y Flexbox que acabamos de comentar.
{% if content.field_cabecera_landing|render is not empty %}
<div class="d-flex container-fluid" lc-helper="background" style="height:50vh;background:url({{ file_url(content.field_cabecera_landing[0]['#media'].field_media_image.entity.uri.value) }}) center / cover no-repeat;">
{% endif %}
</div>
<div class="container p-5 bg-light" style="margin-top:-100px">
<div class="row">
<div class="col-md-4 text-center align-self-center">
<div class="lc-block border-end border-2 ">
<div editable="rich">
<p class="display-4 text-secondary">WHY?</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
<div class="col-md-8">
<div class="lc-block ">
<div editable="rich">
<p class="display-4">{{ label.0 }}</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
</div>
Explicación
d-flex: Es la primera de las clases que deberíamos añadir en nuestra etiqueta HTML, para poder emplear la combinación de Flex y Boostrap; añadirla es el equivalente a escribir la propiedad display: flex, dentro de nuestra hoja de estilos.
container / container-fluid: tiene la misma funcionalidad que ya conoces de Boostrap, y que en este caso, añadirá la propiedad padding, configurada por defecto para Drupal, cuando utilizamos el tema basado en Boostrap.
p-5: Esta clase es la encargada de modificar la propiedad padding, tienes varios valores disponibles, además de la opción de utilizarla, especificando si quieres aplicar un padding-top pt-5, o padding buttom pb-5, por ejemplo.
align-self-center: esta clase, como su nombre lo indica, se encargará de centrar los elementos, dentro del contenedor.
col-md-4: esta es una de las clases que ya deberías conocer, por versiones anteriores de bootstrap, encargada de adaptar el tamaño de la columna, en los dispositivos de tamaño medio (Tablets, Ipads, etc.)
Si quieres profundizar más sobre las clases disponibles y su implementación, te recomiendo visitar la página oficial de Boostrap. HAZ CLIC AQUI.
Añadiendo cambios en la plantilla
Es el momento de continuar con el resto de cambios necesarios, para seguir ajustando nuestra Landing Page, hasta conseguir que se parezca a nuestra propuesta de diseño.
En esta ocasión, vamos a sustituir en nuestra plantilla, todo el espacio que ocupa el texto central, para dejarle paso, a dos nuevas filas, donde añadiremos los campos correspondientes, encargados de mostrar las imágenes e información de los productos, además del formulario para los peidos.
He añadido un para de clases adicionales, sólo para que sea más fácil de entender, donde colocaremos cada uno de los elementos.
El resultado final, con el nuevo cambio, debería ser parecido al siguiente código:
<div class="row contenido-central">
<div class="col-md-12">
<div class="row info-productos">
LOS PRODUCTOS AQUI
</div>
<div class="row formulario-pedidos">
EL FORMULARIO AQUI
</div>
</div>
</div>
</div>
Imagen
Ahora ya tenemos claro, cuál debería ser la estructrura para conseguir el resultado esperado en mi Landing Page, el problema con el que nos encontramos, es que nuestra plantilla sólo tienes dos campos, con los que podamos jugar, field_cabecera_landing y field_contenidos_landing, ya que hemos optado, por el uso de paragraphs, para facilitar la personalización de sus contenidos.
Si volvemos a la parte del código donde imprimimos nuestra imagen, podremos concluir, que lo que necesitamos para obtener el resto de valores de nuestra página, es añadir la variable que imprime el campo global de los paragraphs y a continuación, añadir las plantillas correspondientes, para cada uno de los elementos contenidos dentro de éste.
Lo primero que deberíamos hacer será remover la parte del código donde estarán las imágenes, información y el formulario, para añadir dentro sólo el campo global de los paragraphs.
Por ahora, nuestra plantilla principal, node--landingpage--full.html.twig, debería quedar con el suguiente resultado:
<div class="row contenido-central">
<div class="col-md-12 p-5">
{{ content.field_contenidos_landing }}
</div>
</div>
</div>
Una vez añadido el código anterior, si visitamos nuestra Landing Page, deberíamos ver en pantalla, algo parecido a la siguiente imagen:
Imagen
Si todo ha ido correctamente, y ves en pantalla un resultado parecido al anterior, es el momento de inspeccionar los elementos y crear las plantillas correspondientes a cada paragraphs, para cotinuar con el resto de modificaciones.
Imagen
Plantilla principal para la landing page
El código final de la plantilla general para la landing (node--landingpage--full.html.twig), que incluye además, el campo de selección para el color, gracias al módulo Color Field, será :
{{ attach_library('bootstrap_barrio/node') }}
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
'clearfix',
]
%}
<article{{ attributes.addClass(classes) }}>
<header>
{{ title_prefix }}
{% if label and not page %}
<h2{{ title_attributes.addClass('node__title') }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<div class="node__meta">
{{ author_picture }}
{% block submitted %}
<em{{ author_attributes }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
</em>
{% endblock %}
{{ metadata }}
</div>
{% endif %}
</header>
<div{{ content_attributes.addClass('node__content', 'clearfix') }}>
{% if content.field_cabecera_landing|render is not empty %}
<div class="d-flex container-fluid" lc-helper="background" style="height:50vh;background:url({{ file_url(content.field_cabecera_landing[0]['#media'].field_media_image.entity.uri.value) }}) center / cover no-repeat;">
{% endif %}
</div>
<div class="container p-lg-5" style="margin-top:-100px;
background-color: {{ content.field_color_fondo_landing.0 }}"
>
<div class="row">
<div class="col-md-4 text-center align-self-center">
<div class="lc-block border-end border-2 ">
<div editable="rich">
<p class="display-4 text-secondary">WHY?</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
<div class="col-md-8">
<div class="lc-block ">
<div editable="rich">
<p class="display-4">{{ label.0 }}</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
</div>
<div class="row contenido-central">
<div class="col-md-12 p-md-5">
{{ content.field_contenidos_landing }}
</div>
</div>
</div>
</div>
</article>
Plantilla para la imagen y el texto del producto
El código correspondiente a la parte superior, donde mostramos la imagen del producto, acompañada de un título y un párrafo, (paragraph--bloque-imagen-y-textos.html.twig) será:
{%
set classes = [
'paragraph',
'd-lg-flex',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished'
]
%}
<style>
@media (min-width: 992px) {
.field--name-field-imagen-producto {
width: 550px;
}
}
</style>
{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% block content %}
<div class="row no-gutters d-flex">
<div class="imagen-producto d-sm-column">
{{ content.field_imagen_producto }}
</div>
</div>
<div class="row no-gutters d-flex">
<div class="texto-producto d-sm-column">
<h2>{{ content.field_texto_superior.0 }}</h2>
<p>{{ content.field_textos_producto.0 }}</p>
</div>
</div>
{% endblock %}
</div>
{% endblock paragraph %}
Plantilla para el Bloque formulario
Para la plantilla, encargada de modificar el aspecto gráfico correspondiente al formulario, que además incluye la etiqueta html <hr />, con algunos estilos en línea, (paragraph--bloque-formulario.html.twig), será:
{%
set classes = [
'paragraph',
'd-flex flex-column',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished'
]
%}
{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% block content %}
<hr style="height: 5px; background-color: #333333;margin-top: 40px; margin-bottom: 40px"/>
<div class="titular text-align-center flex-row"><h2>{{ content.field_titulo_formulario }}</h2></div>
<div class="formulario">
{{ content.field_formulario_bloque }}
</div>
{% endblock %}
</div>
{% endblock paragraph %}
Media Queries | Diseño responsivo
Video de Youtube
Si piensas dedicarte a la maquetación web, es necesario que conozcas y entiendas bien, lo que en CSS se denomina como Media Queries.
Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).
Se utilizan para:
- Aplicar estilos condicionales con las reglas-at
@mediae@importde CSS. - Indicar medios específicos en los elementos
<link>,<source>y otros elementos HTML.
Si quieres conocer más a fondo, acerca del uso e implementación de las Media queries, puedes consultar la Página de Mozilla Developers
CÓMO UTILIZAR MEDIA QUERIES EN TUS DESARROLLOS CON DRUPAL
En Drupal, como ya sabrás, siempre encontraremos varias maneras de implementar soluciones a nuestros problemas. En esta ocasion, explicaré las opciones más comunes para aplicar Media queries, en tus proyectos.
APLICANDO MEDIA QUERIES USANDO INTERFAZ DE USUARIO DRUPAL
Si no tienes demasiado experiencia utilizando Drupal, la mejor forma de comenzar a experimentar sería mediante la interfaz de usuario. Para trabajar con CSS y Javascript, podrás hacerlo al instalar el módulo llamado Asset Injector, que te permitirá crear hojas de estilos personalizables, sin la necesidad de salir de la interfaz de usuario.
Para aprende a instalar y trabajar con Asset Injector Haz clic aquí
APLICANDO MEDIA QUERIES EN UN SUBTHEME DRUPAL
Quiénes tienen algo más de experiencia en maquetación, podrán aplicar sus estilos, a través de las hojas de estilo CSS dentro del subtheme o tema personalizado, que hayan configurado para su proyecto de Drupal.
Si quieres aprender, acerca de la creación y configuración de tus temas personalizados para Drupal, te dejo un par de enlaces, donde encontrarás documentación y videos, explicándote todos los pasos necesarios:
Cómo crear un tema personalizado con Bootstrap 3 En Drupal 9
Trabajando con Subteme Bootstrap Barrio, Plantillas, Paragraphs y Permisos
Añadir CSS Personalizado en tu Sutheme Drupal 8/9
EJEMPLO COMPLETO DE MEDIA QUERIES
Ahora que ya conoces un poco más, acerca del uso e implementación de los Media queries, aquí te dejo un ejemplo completo de un archivo con las diferentes variaciones, para que puedas crear tus estilos personalizados a cada dispositvo. Sólo tendrás que ir añadiendo tu código, aplicado a la clase o Id del elemento, en las líneas que están marcadas como /* CSS */.
/*
##Device = Desktops (Escritorio)
##Screen = 1281px pantallas de escritorio de alta resolución
*/
@media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait/Vertical)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape/horizontal)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Baja resolución Tablets, Mobiles (Landscape/horizontal)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = La mayoría de los Smartphones Móviles (Portrait/Vertical)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
Emulsify Drupal | Storybook
Video de Youtube
Texto
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
Ya que tenemos arrancando y funcionando, todo lo que vamos a necesitar, para comenzar con nuestra implementación usando diseño de patrones, empezaremos por realizar los primeros cambios que marcarán el estilo y apariencia de nuestra web. Para ello, realizaremos la exploración de los archivos del Storybook o guía de estilos, para ir conociendo las opciones disponibles y sacar el mayor provecho de ello.
Paso 1 - Definición de la paleta de colores:
El primer lugar donde comienza nuestro viaje hacia la personalización de nuestra guía de estilos, será la definicición de la paleta de colores que vamos a utilizar en nuestra web. Para ellos tendremos que abrir varios archivos, que iremos explicando paso a paso.
Si abrimos nuestra guía de estilos, encontraremos la Paleta de colrores, dentro del menú Colors, tal y como muestro en la siguiente imagen, desde aquí podremos comprobar en tiempo real, cada uno de los cambios que realicemos relacionados con este apartado.
Ahora que ya tenemos claro, dónde comprobaremos los cambios aplicados, abriremos el primero de los archivos de configuración, relacionados con esta parte, que encontraremos, dentro de "NUESTRO-THEME-PERSONALIZADO/components/00-base/01-colors/_00-colors-vars.scss". Se trata de un archivo, en formato SASS, donde se definen todos los colores, utilizando variables.
Una vez entiendas el concepto, será fácil comenzar a aplicar los cambios, aunque no tengas conocimientos previos de SASS, ya que al ejecutar el comando para arrancar la guía de estilos (npm run develop), ésta se encargará de realizar las compilaciones para que todo se vea de acuerdo a lo que se ha definido.
Vamos a realizar una rápida comprobación de que todo funciona correctamente, y de que no tendremos que ejecutar comando de SASS, para ver los resultados inmediatamente; en la última línea del archivo encontraremos la variable "$blue: #005de0;", vamos a cambiar el código del color por el de uno completamente diferente ($blue: #ff6600;) y guardaremos los cambios, sin hacer nada más, a continuación, volveremos a la guía de estilos y veremos de inmediato el cambio, en el color llamado PRIMARY.
El otro de los archivos, relacionado con la paleta de colores, ubicado justo debajo el anterior, es el llamado _01-colors-used.scss, si lo abrimos, veremos que existen dos variables principales, que definen dos Perfiles de color ($defaultColors y $darkColors), para nuestra instalación, que se mostrarán en función del navegador, el modo default se muestra para todos navegadores en general y el modo Dark, sólo en aquellos navegadores que soporten este tipo de presentación, como los dispositivos MAC.
Dentro de cada uno de estos perfiles, están todas las variables que se encuentran definidas en el anterior archivo, con el nombre que se muestra dentro de la paleta. Esta es una de las razones por las cuales al realizar el cambio código de color en el archivo de variables, se aplica automáticamente al resto de archivos relacionados.
Esto quiere decir, que además de los colores existentes, podremos agregar nuestros nombres personalizados y asignarles las variables que hayamos definido en otro archivo para poder emplearlas al momento de aplicar nuestros estilos.
Aplicando lo colores dentro de nuestra hoja de estilos
Durante el proceso de creación de nuestro proyecto, puede que en algún caso necesitemos utilizar, alguno de estos colores, en un elemento en concreto, para que el color se aplique correctamente, en lugar de llamar a la variable de forma directa, tendremos que emplear la función clr(), de esta foma, mantendremos el concepto de "centralizar" y obtendremos mejores resultados al utlizar el diseño de patrones.
El siguiente código, muestra la forma en que se aplica el color a los enlaces del menú principal, dentro del archivo _00-main-menu.scss, ubicado en "NUESTRO-THEME-PERSONALIZADO/components/02-molecules/menus/main-menu/ _00-main-menu.scss.
&--open {
background-color: clr(background);
display: block;
left: 0;
overflow-y: scroll;
position: absolute;
top: 134px;
right: 0;
width: 100%;
}
Configuración de los nombres de los colores en el Storybook
Por último, pero no menos importante, está el archivo donde se definen los nombres de los colores que se muestran dentro de nuestra guía de estilos, se trata del archivo colors.yml. Podremos comprobarlo, si cambiamos el nombre de cualquiera de los colores y, sin hacer nada más que guardarlo, abrimos la guía de estilos.
Una vez tengamos configurada correctamente la paleta de colores, todos los cambios relacionados con esta parte, estarán centralizadas, fáciles de modificar, y además, dichos cambios se aplicarán autormáticamente, a través de todo el proyecto Drupal.
Emulsify Drupal | Patrones, componentes y vistas
Video de Youtube
Texto
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
Llegados a este punto, ya tenemos al menos los conocimientos básicos, sobre el diseño de patrones o atómico, también conocido como "Pattern Labs", además de haber realizado, un pequeño recorrido por la estructura de archivos de la guía de estilos o storybook, que nos generó la instalación del módulo Emulsify y de nuestro tema personalizado, dentro del proyecto Drupal 9, con el cual estamos trabajando en este curso.
Es el turno de comenzar a aplicar este diseño de patrones, dentro de una de las plantillas Twig de Drupal 9, para entender mejor las posibilidades ofrecidas, por esta nueva forma de trabajo, cuyo fin principal, además de permitir que los diseñadores puedan trabajar paralelamente con los programadores, sin previos conocimientos sobre Drupal, ni dependencias entre ellos; la posibilidad de "Centralizar" y "Reutilizar" al máximo todos los componentes, disminuyendo así el tiempo de implementación, en todas sus fases.
Aplicando Pattern Labs en las plantillas Drupal 9
Paso 1 - Activación del modo Debug o Depurador de Drupal:
Ya que el diseño de patrones, implica la modificación de las plantillas que vienen por defecto en Drupal, lo primero que deberíamos hacer antes de comenzar con esto, será activar el modo debug o depurador, para conocer el nombre de cada pantilla, de acuerdo con los nodos, campos o vistas que estemos modificando. Existen dos meneras de hacerlo:
Opción 1: Consiste en renombrar el archivo default.services.yml, ubicado dentro de la carpeta /web/sites/default, y a continuación cambir los valores de debug y cache, como se muestra en la imagen.
Opción 2: Configurando el archivo settings.local, tal y como te explico en Configuración desarrollo local Drupal 8 Haz clic aquí.
Una vez hayas activado el modo depurador, ejecutarás los comandos drush cr y drush updb, para borrar la caché de drupal y actualizar la base de datos. Entonces al hacer clic en la tecla F12 o seleccionar la opción explorar del navegador, verás los nombres sugeridos por drupal para las plantillas, como te muestro en la siguiente imagen.
Paso 2 - Explorar plantillas por defecto generadas por Emulsify
Como ya hemos mencionado antes, uno de los propósitos del Diseño de patrones es reutilizar siempre que podamos, por esta razón, cuando se genera el Tema personalizado, Emulsify crea varias pantillas Twig, que nos pueden servir, tanto como guia para entender la manera en que trabaja o como base para generar plantillas más complejas.
Si abrimos la carpeta Templates, veremos varias de ellas, clasificadas por su tipo, esta estrucutra nos facilita la ubicación y nos marca la guia de trabajo que deberíamos mantener durante nuestro desarrollo.
Paso 3 - Explorar nuestros contenidos y opciones a implementar
Es muy importante tener claro que nuestra mentalidad debe ser "NO REINVENTEMOS LA RUEDA", esto significa, que deberíamo evaluar constantemente, a medida que vayamos avanzando en nuestro proyecto, para saber si es necesario crear un nuevo componente o simplemente reutilizar uno que ya esté listo.
Por ejemplo, si vamos a la carpeta llamada VIEWS, econtraremos dentro la plantilla para una Vista del tipo lista sin formato, con el nombre views-view-unformatted--frontpage.html.twig, esto significa que si en nuestra página principal pensamos tener un listado de artículos, productos o de imágenes, sólo tendríamos que crear una vista del tipo correspodiente y obtendríamos un resultado al instante.
En la siguiente imagen, he generado algunos artículos, utilizando el módulo Devel y sin hacer nada más, como por defecto, los artículos vienen configurados para mostrarse en la página principal del sitio, obtuve lo que te muestro a continuación:
Si abrimos la plantilla por dentro, encontraremos el siguiente código...
{% embed "@organisms/grid/grid.twig" with {
grid_type: 'card',
grid_label: title
} %}
{% block grid_content %}
{% for row in rows %}
{{ row.content }}
{% endfor %}
{% endblock %}
{% endembed %}
Eplicación:
Lo primero que vemos aquí es la inclusión o importación del modelo o patrón para este tipo de vista, en este caso a través de embed en lugar de include, a continuación se definen el tipo de patrón para los contenidos que se mostrará dentro del las cuadrículas, usando CARD, y el campo título de la vista.
Si vamos a la documentación de la Página Oficial de Symfony, podremos leer la siguiente explicación:
" La etiqueta incrustada combina el comportamiento de incluir y extender. Le permite incluir el contenido de otra plantilla, al igual que lo hace include. Pero también le permite anular cualquier bloque definido dentro de la plantilla incluida, como cuando se extiende una plantilla.
Piense en una plantilla incrustada como un "esqueleto de micro diseño ".
En la siguiente parte del patrón de diseño, se define un bloque, dentro del cual estará contenida la vista completa, por eso verás que al final están las etiquetas de cierre correspondientes al cierre del bloque y al cierre del embed declarado al principio.
Emulsify Drupal | Generando tema base
Video de Youtube
Texto
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
IMPORTANTE: Emulsify nos permite crear un BASE THEME a partir de Emulsify NO un Subtheme
Si eres de l@s que estás interesad@ en aprender a implementar, las utilizar tendencias en maquetación y diseño web, este es uno de los principales módulos que deberías considerar conocer, ya que te ayudará, en caso de que quieras darle un Giro de 360º a tus proyectos en Drupal, utilizando los componentes y el conocido como Diseño Atómico. Si quieres aprender más sobre esta tendencia revolucionaria, tienes el curso Introducción a Pattern Lab y Drupal 9 usando Emulsify.
Emulsify Drupal, según su página oficial, "es una herramienta de código abierto para crear sistemas de diseño con componentes reutilizables y pautas claras para los equipos. Emulsify ayuda a las organizaciones a escalar su diseño al tiempo que reduce los costos, agiliza los flujos de trabajo y mejora la accesibilidad".
A diferencia de otros themes contribuidos de Drupal, su instalación supone varias diferencias con respecto al resto. Su propósito fundamental, es ofrecernos todo lo que vayamos a necesitar para crear un Base Theme para Drupal, utilizando componentes.
Por esta razón, he creado esta guía paso a paso, de la instalación del módulo, desde su Página oficial
Prerrequisitos:
-
Yarn (optional)
Instalación del módulo Emulsify Drupal para Drupal 9
Ya que desde la página de Drupal han anunciado hace tiempo, que el final del soporte tanto para Druapl 7 como para Drupal 8, terminará previsiblemente, a finales de este mismo año 2021, he decidido enfocarme en la instalación para Drupal 9, pero puedes seguir la guía con los cambios para otras versiones que están en la misma página.
Paso 1 - Descarga del módulo usando composer
A estas alturas, ya debes estar totalmente familiarizado con la instalación de módulos y themes en Drupal, utilizando el gestor de paquetes Composer, que nos facilitará enormemente las tareas de descarga o actualización de nuestros proyetos.
Así que, nos colocaremos en la carpeta raíz del proyecto y en este caso, el comando a utilizar será el siguiente:
composer require emulsify-ds/emulsify-drupal
Paso 2 - Preparación para generar el Tema Base
Aquí es donde comienzan las diferncias, con respecto a otras instalaciones, como por ejemplo la del módulo Bootstrap, en este caso, al descargar el módulo se ha creado la carpeta contrib, dentro de la carpeta themes y dentro podremos ver todos los archivos relacionados con Emulsify, a continuación, nos moveremos hacia dicha carpeta, para poder generar un base theme que heredará todas las características y funcionalidades necesarias. O sea, que escribiremos en consola lo siguiente para movernos hasta la carpeta del theme padre:
cd web/themes/contrib/emulsify-drupal
Paso 3 - Generar el Tema base
Una vez colocados dentro de la carpeta del Theme padre, podremos ejecutar el siguiente código, para que se autogeneren todos los archivos relacionados con nuestro nuevo Tema base o personalizado:
php emulsify.php "THEME NAME"
Si quieres conocer alguna otras opciones puedes ejecutar también el comando:
php emulsify.php -h
Paso 4 - Descargar las dependencias del Base Theme
Como he mencionado al principio, esta instalación rompe con lo que estábamos acostumbrados, esto significa, que tendremos que colocarnos dentro de la carpeta de nuestro nuevo_base_theme, que acabamos de generar, para poder comenzar con la descarga del resto de dependencias que hace tan pontente este tipo de instalación:
cd ../../custom/base_theme_name/
Paso 5 - Instalación de dependencias para el Base Theme
Este proceso suele tardar algo más de lo habitual, ya que tendrá que descargar un considerable número de archivos, destinados a facilitarnos la vida de aquí en adelante, por lo que no deberías inmpacientarnos. En mi caso en particular, tuve que abrir una segunda pestaña en mi consola, para asegurarme de que no se había quedado bloqueada la descarga, podemos usar cualquiera de las siguientes opciones:
yarn
npm install
Paso 6 Construcción del Tema base
Ya que tenemos descargardo, todo lo que vamos a necesitar para comenzar con nuestra implementación, nos toca construir la estructura, antes de poder utilizarlos en nuestro proyecto, también tenemos dos opciones a elegir:
yarn build
npm run build
Paso 7 - Habilitar el base theme y sus dependencias
Como ya tenemos todo a punto y listo para comenzar, nos toca activar el theme y sus dependencias, para ello utilizaremos la herramienta Drush, además tendremos que movernos a la carpeta principal para poder ejecutar el comando, fíjate que en lugar de utlizar en se emplea then, que es el comando correcto a partir de las versiones de drush =>9:
drush then base_theme_name -y && drush en components emulsify_twig -y
Paso 8 - Activación del Tema Base
Ahora sí, ya podemos activar nuestro theme para comenzar a soltar nuestra imaginación y creatividad, para ello, volveremos a utlizar la herramienta Drush:
drush config-set system.theme default base_theme_name -y
Comprobación
Si nos vamos a la página principal de nuestro proyecto, ahora podremos ver el cambio en la estructura y diseño para comenzar con esta nueva aventura...
Arrancando la Guía de Estilos
Si todo funciona correctamente, podremos arrancar nuestra guía de estilos, para comenzar a trabajar con el diseño, en paralelo con el desarrollo de nuesro proyecto Drupal, ejecutando el siguiente comando desde dentro de la carpeta de nuestro tema personalizado
npm run develop
Patternlab en Drupal | Metología BEM
Video de Youtube
Texto
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
Uno de los cambios más significativos, al utilizar Emulsify y Pattern Lab en nuestros desarrollos, con respecto todo lo conocido hasta ahora, en cualquier proyecto de Drupal, es la implementación de la Metodología BEM, que afecta a todas las plantillas y componentes que vayamos creando a medida que generamos nuestra estructura.
El objetivo principal de esta metodología, es simplificar al máximo, tanto la estructura de cada componente, como la gestión de sus clases y estilos, dentro de nuestros archivos css, facilitando de esta forma, el mantenimiento y comprensión de todas las posibles variantes o transformaciones de color, tamaño, dimensiones, etc., sobre cualquiera de los elementos de nuestro proyecto.
En la siguiente imagen, a pesar de que se trata de un proyecto Drupal 9, con un diseño a medida, creado a partir de un Subtheme personalizado con Bootstrap Barrio, puedes apreciar la intrincada estructura de <DIV></DIV>, que se ha generado, para que poder llegar hasta el elemento Botón.
¿Qué cambios implica la metodología BEM?
El concepto principal es simplificar cualquier estructura en tres partes fundamentalmente, que son el Bloque, el Elemento y los Modificadores. Esto permitirá dividir todo en componentes más fáciles de reutilizar y mantener.
La metodología BEM, propone la siguiente forma para nombrar nuestros componentes:
class="nombrebloque": Para identificar el elemento padre o div principal.
class="nombrebloque--elemento": Se añaden dos guiones bajos para el nombre del elemento, es decir, aquello que esté contenido dentro del bloque
class="nombrebloque--elemento-modificador": Esta nueva clase, permitirá introducir la variaciones, por ejemplo, de color, tamaño, etc, para un elemento que se comparte dentro de varios componentes.
En la siguiente imagen, sacada desde su página oficial, nos explican una propuesta de implementacíon, en el caso de configurar un componente ATOM, del tipo botón. El nombre del Bloque, en este caso sería la clase button, que cómo puedes ver está presente al pricipio, en los tres elemementos.
El Elemento, sería la clase button--state, que hace a la posibilidad de añadir una característica específica, a medida que vayamos utilizando dicho componente y por último está el Modificador de esta clase, que añade un dichas variaciones al estado del botón, button--state-danger. Presta atención a la nomemclatura en cada uno de los casos, para que tengas claro, a qué se refiere cada uno de ellos.
Si quieres conocer más sobre la Metodología BEM, visita su Página Oficial.
¿Cómo aplicar BEM con Emulsify en Drupal 9?
En el caso de Drupal, al implentar Emulsify, en algunos casos, los guiones medios son sustituidos por guiones bajos, y como utilizaremos SASS, ya que es compatible con Emulsify, podremos aplicar estilos de manera muy simplificada.
Ya que tenemos instalado y arrancado nuestra guía de estilos Storybook, que explicamos en el capítulo Emulsify Drupal, podremos echar un vistazo al componente BOTON, dentro de la carpeta de componentes ATOMS:
Ahora, vamos a utilizar nuestro IDE para explorar y explicar un poco, la implementación de BEM que nos propone Emulsify, en este proyecto desarrollado con Drupal 9, para ello navegaremos hasta la carpeta dentro de /themes/custom/MISUBTHEME/components/01-atoms/buttons y a continuación abriremos el archivo button.twig, donde veremos lo siguiente:
{#
/**
* Available variables:
* - button_content - the content of the button (typically text)
*
* Available blocks:
* - button_content - used to replace the content of the button with something other than text
* for example: to insert an icon
*/
#}
{% set button_base_class = button_base_class|default('button') %}
{% set additional_attributes = {
class: bem(button_base_class, button_modifiers, button_blockname),
} %}
<button {{ add_attributes(additional_attributes) }}>
{% block button_content %}
{{ button_content }}
{% endblock %}
</button>
Explicación:
{% set button_base_class = button_base_class|default('button') %}
Lo primero que podemos observar es la declaración una variable, cuyo valor es el nombre del Bloque, en este caso será la clase button_base_class, una vez importemos este bloque dentro de nuestras plantillas de Drupal, podremos asignarle un valor dinámico, dependiendo de las necesidades para nuestro proyecto, la forma de realizar este paso lo explicaremos en detalle más adelante.
{% set additional_attributes = {
class: bem(button_base_class, button_modifiers, button_blockname),
} %}
En esta línea, en el caso específico del botón, se están definiendo las clases que generarán, de forma dinámica, los nombres equivalentes, para el Bloque, Elemento y el Modificador, respectivamente, concatenando la clase button_base_class y añadiendo los guiones correspondientes; esto quiere decir, que si explorarmos el código en el navegador, verás que se han generado, el nombre del Bloque, y luego, con dos guiones, en el caso del Elemento y uno el el caso del Modificador.
Quizás el botón, al ser una de las estructuras más simples, no te permite ver todo lo que genera Drupal automáticamente, pero si exploras la molécula, llamada Main, encargada de generar la plantilla de ejemplo para el menú principal, en el navegardor, verás un claro ejemplo de todo. donde la clase toggle-expand es el nombre del bloque, toggle-expand__open, es el nombre del elemento y si quisiéramos aplicar un cambio de color, toggle-expand__open_red
Añadiendo las clases personalizadas en nuestros componentes en Drupal
Una vez hayamos declarado las variables, podremos añadir valores personalizados, dinámicamente en nuestros componentes, mediante la funcionalidad de Twig para agregar atributos.
Si te fijas en el nombre que está entre los paréntesis, podrás comprobar que es el mismo que se declara al principio, en la variable, por lo que podrás pasar como parámetros los nuevos valores, para cada uno de estos "atributos adicionales" y adaptarlos a las necesidades específicas del proyecto.
<button {{ add_attributes(additional_attributes) }}>
En la siguiente imagen, podrás ver cómo se puede alterar uno de los valores, declarados en un componente, que en este caso está dentro de otro, llamado CARD y cuál es el resultado final, al explorar el código generado en el navegador:
Patternlab en Drupal | Prerrequisitos
Video de Youtube
Texto
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
IMPORTANTE: Emulsify nos permite crear un THEME a partir de Emulsify NO un Subtheme
Desde la aparición de Pattern Lab y su adaptación para poder implementarlo con Drupal 8, se han ido realizando un gran número de cambios, tanto en la estructura de todos los módulos relacionados, especialmente Emulsify Drupal, como en la manera de activar y utilizar comandos, librerías y el código dentro de las plantillas, que permiten conectar nuestro diseño con el proyecto.
En este capítulo trataré de abarcar todos los prerrequisitos, que necesitarás conocer, antes de comenzar a trabajar de lleno con Pattern Lab y Emulsify en Drupal 9. Y que tengas la información más actual relacionada, ya que en el momento en que escribo este artículo, si visitas la Página Oficial de Emulsify, y ves sus videos, te darás cuenta, de que no están actualizados desde su lanzamiento en 2016, a pesar de que casi todo ha sido modificado para adaptarlo a Drupal 9 y posteriores.
Novedades y Prerrequisitos en Pattern Lab para Drupal 9
El módulo Pattern Lab no es compatible para Drupal 9
La primera noticia es bastante impactante, ya que los primeros cuatro videos, que están publicados en la Página Oficial de Emulsify, en el apartado de Videos y tutoriales, nos muestran las pantallas y algunos comandos y ejemplos, implementando el módulo Pattern Lab, compatible con Drupal 8, pero que ha sido totalmente sustituido por el nuevo módulo Emulsify Drupal, cuya instalación ya tienes disponible dentro de este curso y que nos permite generar un Theme basado en Emulsify, no un Subtheme, como estábamos acostumbrados.
Las Páginas de referencia para Twig ya no son de Sensiolbas sino de Symfony
Esto también es bastante importante, ya que lo enlaces que aparecen en casi todos los videos relacionados con Pattern Lab y Drupal, nos llevan a los enlaces de la documentación de la empresa Sensiolabs, que ahora ya están bajo el dominio de Symfony. Por lo tanto, si quieres aprender sobre el uso de las funcionalidades como include, embed o extends de Twig deberías visitarte la Página Oficial de Synfony para Twigs
La compatibilidad con Drush ha cambiado
Como todo evoluciona, también es el turno de actualizarnos, con respecto a los comandos drush de los videos, relacionados con la instalación y ejecución de Emulsify Drupal, el cambio más importante es que el comando yarn start o npm start, que nos permitía arrancar nuestra Guía de estilos, ha sido cambiado por el siguiente comando:
npm run storybook
yarn develop
npm run develop
Nuevos módulos para trabajar con las plantillas Twig y Emulsify
Otro de los cambios más importantes en esta evolución, sobre la implementación de Pattern Lab en Drupal 9, es la creación de varios módulos, que nos facilitarán la compatibilidad entre las plantillas y el código, y que al principio teníamos que instalar desde el repositorio github de four kichen, a continuación te añado el enlace a las páginas de cada uno de ellos:
-
Components! El módulo Componentes facilita que un tema organice sus componentes. Permite que los temas (y módulos) registren los espacios de nombres de Twig y proporciona algunas funciones y filtros adicionales de Twig para usar en las plantillas de Drupal.
-
Twig Attributes Twig Attributes permite a los desarrolladores establecer atributos HTML (como clases o una identificación) en una plantilla Twig principal a elementos en una plantilla secundaria, eliminando la necesidad de crear una anulación de plantilla o implementar un enlace de preproceso solo para agregar un atributo.
-
Emulsify Twig Este módulo proporciona dos extensiones Twig utilizadas en el Emulsify Design System.
-
Twig Field Value Twig Field Value permite a los usuarios de Drupal 8 obtener datos parciales de matrices de renderizado de campo.
-
Twig Typography Este módulo proporciona un filtro Twig que integra la biblioteca PHP Typography y la aplica a cadenas.
-
Twig Render This Este módulo le permite representar campos y entidades en sus plantillas Twig.
-
More Global Variables Este es un pequeño módulo que brinda a los usuarios algunas variables globales que luego pueden imprimirse en cualquier plantilla de ramitas.
-
Twig Tweak Twig Tweak es un pequeño módulo que proporciona una extensión Twig con algunas funciones y filtros útiles que pueden mejorar la experiencia de desarrollo.
-
BEM Un tema base de Drupal obstinado que proporciona clases de estilo BEM en todas partes.
-
Devel Que nos servirá para depurar nombres de las variables
-
Devel Kint Extras Los complementos de Kint responsables de mostrar los métodos disponibles de los objetos y las propiedades de las clases estáticas se eliminaron del módulo Devel para Drupal 8 desde la versión 3.0. Este módulo vuelve a agregar esas características como un módulo externo.
-
kint-php/kint: Añade funcionalidades a Devel y se instala con composer "composer require kint-php/kint"
Requisitos de instalación implementación Guia o Storybook en Drupal 9
Como ya sabrás, esta clase de implementación está pensada para que los diseñadores y desarrolladores puedan trabajar en paralelo, por lo tanto, una vez esté funcionando el Drupal9 y se haya generado el Theme basdo en Emulsify, podremos acceder a la guía de diseño con el comando mencionado al principio e instalar y configurar algunas herramientas para comenzar a diseñar.
Errores con Twig
En toda implementación existe la posibilidad de encontrarnos con algunos errores, uno de ellos es el uso del include en las plantillas Twig. Te dejo el enlace al issue reportado en la Página de Drupal https://www.drupal.org/project/drupal/issues/2817553