Obtener URI media desde un paragraphs en Twig | Get image URI from paragraph
Para extraer la url de un campo media e imprimirlo en tu plantilla Twig, tanto si el campo está en el primer nivel del Paragraphs o dentro de un Paragraphs, que está anidado en otro.
Los ejemplos se puedes aplicara contenidos, productos o paragraphs en Drupal.
Colorbox
El módulo Colorbox nos ofrece la oportunidad de mostrar imágenes dentro de un Popup con navegador integrado en el caso de que tengamos varias imágenes asociadas al campo que lo utiliza.
Podremos utilizarlo en un campo tipo imagen de cualquier contenido o dentro de una vista.
CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:
Paso 1 - Descargar el módulo:
Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación.
Además tendremos que descargar la librería The Colorbox plugin 1.x y colocarla en el directorio "libraries" dentro de nuestro proyecto.
Recuerda que si no tienes creada la carpeta "libraries", tendrás que crearla y colocarla el el directorio raíz si haz descargado Drupal directamente o dentro del directorio web, si haz utilizado Composer para descargar Drupal 9.
Paso 2 - Configuración del campo:
Una vez que tienes descargado y activado el módulo Colorbox, ya sólo nos queda configurar el campo en el que presentaremos las imágenes, éste puede ser de uno o varios valores, o sea, que te permita cargar una o varias imágenes.
Para configurar el modo de visualización de un campo en el que utilizarás Colorbox, deberás ir al menú "estructura/tipo de contenido/TU TIPO DE CONTENIDO" y luego seleccionar la pestaña "gestionar presentación" para poder elegir colorbox como opción.
Paso 3 - Comprobación:
Una vez configurado el modo de visualización de tu campo, al hacer clic sobre la imagen verás el nuevo aspecto que muestra, si el campo permite más de una imagen, automáticamente verás en la parte inferior izquierda, un navegador que te permitirá recorrer todas las imágenes.
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/colorbox
2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Admin Toolbar 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 colorbox -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.
Posibles fallos y solución:
The DOMPurify library is not installed.
Slick paragraphs
En Drupal siempre contarás con varias opciones para crear tus contenidos o ampliar las funcionalidades de tu proyecto, a partir de la versión 8, con la aparición de Paragraphs, se crearon una gran cantidad de nuevas posibilidades para que esto fuera posible.
Una de estas es la oportunidad de crear un Carrusel con más opciones de personalización que en el pasado, por esta razón te voy a contar cómo configurarlo para que puedas añadirlo a tu proyecto.
Cómo instalar y configurar el módulo:
Paso 1 Descargar el módulo:
Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.
Paso 2 Activación del módulo :
Para activar el módulo Slick Paragraphs, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en slick_paragraphs -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.
Cómo crear un carrusel de imágenes:
1.- Crear un contenido Tipo Paragrphs:
Cómo una de las dependencias del Slick Paragraphs es el módulo que revolucionó Drupal, llamado "Paragraphs" y ya lo tenemos activado, ahora podremos crear una la estructura correspondiente a una diapositiva con todos los elementos que deseamos mostrar en el carrusel, para ello accederemos a la siguiente url y añadiremos el tipo "diapositiva".
/admin/structure/paragraphs_type/add
2.- Añadir los campos de la diapositiva:
Si lo que tenemos pensado es un carrusel donde mostrar por ejemplo las ofertas de temporada, lo lógico sería que cada Diapositiva tenga al menos tres campos: Imagen de la campaña, el nombre de la campaña y algún texto adicional para describir o tal ves un enlace que nos lleve a la página de productos o al detalle de la campaña; por lo tanto, lo que necesitaremos en este momento es añadir tantos campos como vayamos a necesitar.
/admin/structure/paragraphs_type/slide/fields
3.- Creando el Carrusel:
Ya tenemos preparada nuestra diapositiva con todos los elementos que vamos a mostrar cada vez que se mueva el carrusel, por lo tanto, el siguiente paso que nos queda es crear nuestro "Carrusel", como la idea es que nuestro carrusel se muestre en la página principal, crearemos un Bloque personalizado
/admin/structure/block/block-content/types
Con un campo tipo "Paragraphs" al que llamaremos "carrusel_home", y dentro de este campos, vamos a permitir que se añadan tantas diapositivas como haga falta.
Lo siguiente será seleccionar el otro tipo paragraphs al que llamamos "diapositiva" para completar el proceso de nuestro carrusel.
Ahora ya podrás crear tu carrusel con todas las diapositivas que necesites, también podrás realizar otras configuraciones del carrusel, desde la pestaña de visualización del campo:
Imprime los valores alt y title desde un campo media en Drupal
Para cumplir con algunos requerimientos de SEO, es necesario que podamos extraer los valores de texto alternativo "alt" y el título de la imagen, cuando el campo con el que estamos trabajando en Drupal, es de tipo Media, cambiar la estructura, con respecto al tradicional campo tipo imagen.
Cómo configurar el formato WebP en todas tus imágenes con Drupal 9
Optimización de Imágenes para buscadores
Cuando estamos desarrollando cualquier tipo de proyecto web, es muy importante considerar los recursos (librerías, imágenes, renderizado, etc), que restarán velocidad de descarga, a nuestra web y por lo tanto, podrían provocar un rechazo a visitarla, por parte de los usuarios o el abandono durante la navegación a través de ella.
Hoy hablaré sobre una de las maneras, o formatos disponibles para que nuestras imágenes no influyan negativamente, en el resultado que deseamos obtener, es decir, que puedan ser atractivas a la vista, sin sacrificar su aspecto, a causa de una baja resolución.
A estas alturas, ya deberías conocer, las facilidades que ofrece el uso de algunos formatos con relación a otros, cuando trabajemos con imágenes en nuestros proyectos, ej.: (JPG vs PNG o GIF vs PNG), pero hoy quiero que conozcas otra alternativa de formato de imágenes, llamado (WebP).
Qué es WebP
Webp o «weppy» que es como muchos lo pronuncian, es un formato gráfico en forma de contenedor que surge en el año 2010 de la mano de Google y que soporta tanto la compresión con pérdida como sin ella. Un formato derivado del estándar de vídeo VP8 desarrollado por On2 Technologies y que Google adquirió ese mismo año.
A partir de ese momento, fue el propio Google quien desarrolló aún más este formato añadiendo nuevas características y el que se encargó de que el propio motor de su navegador Chrome, comenzase a soportar este formato de compresión. En definitiva, se trata de un formato de archivo creado por Google para reducir el tamaño de las imágenes y así disminuir el tiempo de carga de estas. Algo que, por otra parte, se ha convertido en una necesidad debido a que hoy en día, la mayor parte del tiempo que navegamos por Internet, lo hacemos desde el móvil. De esta manera se produce un ahorro en el ancho de banda y, por lo tanto, una carga más rápida de las imágenes de aquellas webs que utilizan este formato de imagen.
Convertir al formato WebP
Cómo ya imaginarás, internet nos ofrece múltiples conversores de formato para imágenes, en línea, además de gratuitos; el problema es que si tu web tiene un montón de imágenes, generalmente, para utilizar estos servicios, deberás hacerte con una cuenta de pago, según la cantidad de imágenes que quieras convertir.
Cómo transformar tus imágenes a WebP en Drupal 9
Dentro de las múliples ventajas que nos ofrece Drupal, relacionadas específicamente con el tratamiento de las imágenes, ya sea mediante el uso de módulos para la descarga rápida, como Módulo Lazy-load o el Módulo CDN, también integra, a partir Drupal 9, la opción de convertir automáticamente todas tus imágenes al formato WebP, desde la ventana de Estilos de Imágen, en la url "t/admin/config/media/image-styles"
La novedad en el proceso, es que además de las opciones que nos permitían cortar, redimensionar o girar nuestras imágenes, ahora contamos con una nueva opción en el selector llamada CONVERTIR, donde podremos seleccionar varios formatos, para transforar nuestras imágenes sin la necesidad de recurrir a herramientas o programas externos. Drupal hace el trabajo duro por nosotros...
Una vez hayamos configurado nuestro estilo para las imágenes, nos aparecerá disponible para aplicarlo en cualquier luegar, como en la presentación dentro de una vista o en cualquier contenido con un campo IMAGEN o MEDIA.
