responsive

Gutenberg | Módulo Drupal

webmaster — Wed, 19 Apr 2023 14:33:36 +0000

Gutenberg | Módulo Drupal

Aunque en mi opinión, una de las cosas que me enamoró de Drupal en cuanto lo conocí, es la posibilidad de manipular, personalizar y saber encontrar, prácticamente dónde y cuando ocurren la mayoría de sus funcionalidades, entiendo que el objetivo principal de cualquier herramienta de desarrollo, debería ser facilitarnos la vida, además de ofrecernos grandes posibilidades a nuestro alcance.

Como cada proyecto requiere de diferentes requisitos para llevarse a cabo, y por lo general, uno de los más importantes, es el tiempo que tendremos que invertir hasta su puesta en producción, muchos desarrolladores web prefieren apostar por otros CMS o construir desde cero proyectos enteros, para sentir que tienen mayor control sobre sus creaciones.

No obstante, creo que con un pequeño conocimiento sobre cómo instalar Drupal 9 usando Composer y un breve vistazo a cómo gestionar usuarios y permisos, complementado con la ayuda del Módulo Gutenberg, conocido mayormente por usuarios de Wordpress, podrías llegar a tener lo que haz estado buscando hace tiempo, una plataforma simple de manipular, pero potente, con posibilidad de adaptación a la mayoría de webs sencillas.

Es por esta razón que a continuación, te voy a mostrar cómo puedes utilizar las opciones que integra este módulo a la interfaz de usuario, facilitándote de forma notable, la creación de nuevos contenidos en Drupal 9.

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/gutenberg

2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Gutenberg 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 gutenberg -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 utilizar Gutenberg

Una vez activado el Módulo Gutenberg, veremos que se ha añadido una nueva opción, en la parte inferior izquierda de todos los contenidos, llamada Gutenberg Experience y que al activarla podremos ver dos listados con todos los nuevos bloques, tanto del propio módulo como de el núcleo de Drupal, que podremos activar o no, para que estén disponibles como parte de las opciones del tipo de contenido en que se han activado, modificando inmediatamente la interfaz de creación de dicho contenido.

La idea principal de Gutenberg, es que convierte todos los elementos que podamos añadir, en bloques individuales, con sus propias opciones, disponibles en el momento en que seleccionamos dicho bloque o elemento, haciéndolo mucho más gráfico el método para añadir, modificar o reutilizar dicho elemento.

Para comenzar a añadir contenidos o "Bloques" en nuestro tipo de contenido, veremos un símbolo de más dentro de un círculo y al hacer clic sobre éste, se desplegarán las diferentes opciones disponibles para agregar y una vez seleccionado el elemento que deseamos añadir y se añade, inmediatamente cambiará el panel de la derecha de la pantalla, adaptándose a las opciones disponibles para él.

De entre sus opciones más llamativas, está la posibilidad de arrastrar directamente los elementos hasta la posición deseada desde el escritorio de tu ordenador, la integración con módulos como Media o Imagen, insertar directamente elementos embebidos como vídeos, sonidos, etc, o la posibilidad de crear "Bloques" de contenido reutilizables en cualquier otro lugar de la web.

El objetivo de utilizar Gutenberg, es que todos tus tipos de contenido, sólo tengan el campo "Body" y dentro de este campo se podrán añadir, editar o eliminar el resto de elementos que se mostrará en tus páginas, incluyendo imágenes o incluso bloques del núcleo de Drupal.

Gutenberg Cloud

Una de las opciones más novedosas de este módulo, es la posibilidad de añadir "bloques" de contenido, directamente desde su repositorio en la web Gutenbergcloud.org, mediante el sistema de CDN, por lo que dichos bloques, con características, estilos y funcionalidades prediseñados, no se guardan como el resto de contenidos en la base de datos de Drupal. Por el contrario, se añaden como etiquetas dentro del campo "BODY", que añade Drupal por defecto cada vez que creamos un nuevo tipo de contenido.

Para añadir esta funcionalidad, sólo habría que activarla como cualquier otro módulo y una vez hecho esto, se añadirá como una de las opciones disponibles para agregar en el listado de bloques cuando hagamos clic en el selector.

Por desgracia, esta funcionalidad no es compatible para todas las versiones de Drupal 9, por lo menos al momento de escribir este artículo. Pero sí podrás utilizarla en cualquier instalación de Drupal 8 o menor que la 9.1.

webmaster Mié, 19/04/2023 - 16:33

Imprime imagen en una views template

webmaster — Wed, 01 Mar 2023 09:41:05 +0000

Imprime imagen en una views template

Descripción

Este código te permite acceder a la url de la imagen e imprimirla desde una plantilla tipo views-field

webmaster Mié, 01/03/2023 - 10:41

Instrucciones

Crea una vista del tipo fields (Campos)
Activa el modo debug o depurador para conocer las sugerencias sobre nombres para tus plantillas
Añade todos los campos que quieres que aparezcan en tu plantilla de la vista para que puedas acceder.
Para el campo imagen, dentro de la configuración de la vista, selecciona imprimir url de la imagen, como se muestra más abajo

* De esta manera podrás añadir clases a tu campo imagen directamente desde la plantilla.

<img class="img-responsive" src="{{ fields.field_portada_articulo_guia.content|striptags }}" alt="">

Paginador

Categoría

Portada

Modelo CSS para varios dispositivos

webmaster — Tue, 28 Feb 2023 19:45:04 +0000

Modelo CSS para varios dispositivos

Descripción

Crea una hoja de estilos css, específica para dispositivos te permite corregir errores más rápidamente.

Para ver la explicación en video HAZ CLIC AQUI

webmaster Mar, 28/02/2023 - 20:45

Instrucciones

Para diseñar tu web adaptable a varios dispositivos:

Descarga o copia el código que está debajo dentro de un archivo responive.css
Si trabajar con Drupal, tendrás que añadir la librería dentro del .libraries de tu tema personalizado, respetando los espacios
global-styling: version: VERSION js: js/global.js: {} css: component: css/style.css: {} css/responsive.css: {} css/colors.css: {}
Refresca caché para comprobar que tu tema está reconociendo la nueva hoja de estilos

/* =======================================
            MOVILES
=========================================*/
/* Telefonos en vertical (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  /* logo header */


}

/* Telefonos en horizontal (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {


}

/* =======================================
            TABLETS
=========================================*/
/* Tabletas y Ipod (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {



}

/* =======================================
            ESCRITORIO
=========================================*/
/* Ordenadores y Laptops (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
 

}

/* =======================================
            EXTRA LARGOS
=========================================*/
/* Pantallas grandes (large desktops, 1200px and up) */
@media (min-width: 1200px) {

 

}

Paginador

Categoría

Portada

Cómo configurar el formato WebP en todas tus imágenes con Drupal 9

webmaster — Sun, 26 Feb 2023 15:30:40 +0000

Cómo configurar el formato WebP en todas tus imágenes con Drupal 9 webmaster Dom, 26/02/2023 - 16:30

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.

Categoría