template

Radix | Descarga, instalación y configuración

Crea un Subtema con Bootstrap 4 y 5, Sass, ES6 y BrowserSync integrados

     A pesar de que sigue cobrando fuerza la tendencia de utilizar Drupal Desacoplado o Headless, ya que permite implementar soluciones con Javascript, que amplian las posibilidades para el Frontend o apariencia en tus proyectos, además de ofrecer otras ventajas, como la carga de tus contenidos. Existen otras posibilidades, que nos permitirán desarrollar toda clase de proyectos, con las mismas prestaciones y sin salir de Drupal tal y está concebido.

     Una de estas soluciones, la encontraremos en el tema Base conocido como Radix, cuya implementación permite integrar dentro de su estructura, la posiblidad de utilizar diferentes versiones de Bootstrap, Sass, ES6 y BrowserSync; lo cual permite a los maquetadores, conseguir el mismo resultado y beneficios, que si aplicaran un enfoque Desacoplado.

   CÓMO INSTALAR RADIX EN DRUPAL

     PRERREQUISITOS

       Al igual que otros temas Base, utilizando en Drupal, que incluyen funcionalidades extra, en el caso de Radix, necesitaremos tener instalado en nuestro servidor, Node.js y Npm, para completar la configuración del Subtheme.

     Por esta razón, utilizaremos Lando, para facilitar este proceso, de esta manera, sólo tendremos que concentrarnos en el resto de requisitos, descritos en su página oficial.

     Si todavía no conoces Lando, y quieres saber cómo se instala, Haz clic aquí

     Una vez instalado lando, puedes crear la carpeta donde instalarás tu proyecto de Drupal, y a continuación, añadir el archivo de configuración .lando.yml, con el siguiente contenido, adapatándolo a los detalles de tu proyecto:

name: drupal9
recipe: drupal9
config:
  webroot: web
  php: '8.0'

proxy:
  appserver:
    - drupal9.lndo.site

services:
  node:
    type: node
  drupal9:
    type: mariadb
    portforward: true
    creds:
      user: drupal9
      password: drupal9
      database: drupal9

tooling:
  npm:
    service: node
  node:
    service: node
  gulp:
    service: node
  yarn:
    service: node

     Si lo prefieres, también puedes realizar la instalación con el tipo de servidor que tengas instalado, tomando en cuenta que deberás tener instalado Node.js y NPM.

     INCOMPATIBLE CON DRUSH 11:

     Es muy importante, que antes de comenzar con el proceso de generación de un Subtema, a partir de Radix, tomes en cuenta, de que no será posible si tu versión de Drush es mayor de 10, ya que a día de hoy, todavía no es compatible con Drush 11. 

     Así que en nuestro caso, nos aseguraremos de instalar la versión de drush anterior a la 11, para ello, utilizaremos el siguiente comando de composer:

lando composer require drush/drush:10.*

   CÓMO GENERAR UN SUBTEMA CON RADIX

     Para poder generar un tema personalizado, tomando como base Radix, tendremos que seguir lo siguientes pasos:

  1. DESCARGAR Y ACTIVAR EL MÓDULO COMPONENTES! DE DRUPAL:

    lando composer require drupal/components
    lando drush en components

  2. DESCARGAR Y ACTIVAR EL THEME RADIX (PARA TENER DISPONIBLE SUS COMANDOS)

    lando composer require drupal/radix
    lando drush then radix

  3. GENERAR EL SUBTEMA:

    Para esto, necesitaremos especificar la ubicación de nuestro tema Radix, dentro del comando drush, o nos devolverá un error de "comandos no disponibles".
    Si hemos instalado Drupal usando Composer, la ubicación será "web/themes/contrib"; el comando a utilizar es el siguiente:

    lando drush --include="web/themes/contrib/radix" radix:create SUBTHEME_NAME

  4. ACTIVAR Y CONFIGURAR EL SUBTEMA:

    Ahora que se ha generado el nuevo Subtema, podremos activarlo como predeterminado y realizar algunos cambios de configuración, a nivel de la interfaz y ejecutar algunos comandos por consola para que terminen de descargarse y activarse otros elementos del Subtema.

   CONFIGURACIONES EXTRAS EN EL SUBTEMA

     Una vez hayamos activado nuestro tema, notaremos que todavía faltan algunos ajustes, para que todo se vea aproximadamente parecido a lo que esperamos. A continuación te detallo estos últimos pasos necesarios para poner correctamente en marcha tu nuevo subtema:

  1. Redistribución de Bloques
    Siempre que instalamos un nuevo Tema o Subtema, Drupal cambia las posiciones de sus bloques, adaptándolos a la configuración del tema, por lo tanto, si queremos que todo funcione correctamente, tendremos que dirigirnos a la página de administración de los bloques, en la url "estructura/bloques" y recolocar todos los elementos, dentro de las zonas correspondientes:

     

  2. Deshabilitar la combinación de archivos CSS y JS
    Durante el proceso de desarrollo, siempre se recomienda que desativemos la opción que nos viene por defecto en Drupal, que combina los archivos CSS y JS, cuyo propósito es reducir el tiempo de carga de nuestra web y así incrementar su velocidad.
    Para encontrar esta opción, nos iremos a la url "/admin/config/development/performance", y desmarcaremos ambos check, al menos mientras estemos en nuestro entorno de desarrollo.

     

  3. Configuración del BrowserSync
    Esta opción nos permitirá comprobar en tiempo real, todos los cambios que vayamos añadiendo a nuestro tema, en lo que se respecta a los estilos css.
    Para habilitar esta opción, tendremos que editar el archivo proxy.js, dentro de "subtema/config".

    Una vez actualizada la variable, dentro del archivo proxy.js, ejecutaremos el siguiente comando para que empiece a funcionar el proceso de sincronización:

    npm run watch

Categoria

Drupal 9 - Breakpoints (Parte 2), imágenes y media

Aprende a configurar los estilos reponsivos para tus imágenes en Drupal.

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

     Ahora que ya hemos aprendido Cómo crear breakpoints y habilitarlos usando nuestro tema personalizado, el siguiente paso consistirá en crear y configurar, los estilos que se aplicarán en nuestras imágenes responsivas, para que Drupal pueda seleccionar y mostrar el tamaño adecuado en cada uno de los dispositivos.

     Los estilos permitirán reducir considerablemente el tiempo de descarga, tanto de las imágenes de nuestra web, como de la web misma, haciéndola más atractiva y útil para todos los usuarios, y lo más importante, sin perder el impacto que nos añaden unas buenas imágenes, a nivel gráfico, de cara al público que nos visita.

     Cuando trabajamos con Drupal, tenemos la posibilidad de crear estilos personalizados, para todas nuestras imágenes, que serán aplicados una vez las hayamos subido al servidor utilizando la interfaz de usuario, esto significa que, aunque nuestra imagen original fuera, por ejemplo, más ancha que alta, podríamos redimensionarla o recortarla, para que se ajustara a nuestras necesidades, sin la necesidad de utilizar ningún programa de retoque fotográfico.

     Además, los estilos de imágenes podrán ser reutilizados, manipulando la interfaz de usuario, en todo tipo de contenidos, vistas, bloques u otros elementos como paragraphs.

     Un ejemplo práctico en el que podríamos utilizar los estilos personalizados, sería una página web en la que los usuarios pudieran subir productos, o sus propias imágenes para un blog interactivo de cocina. Si dejáramos en manos de los usuarios el tamaño de las imágenes, podríamos arriesgarnos a romper la estética general de la web; pero si definimos las dimensiones exactas para las imágenes, siempre conservaremos la misma apariencia, ya que cada imagen subida se adaptaría automáticamente, una vez hayan sido guardados los cambios en el contenido recién creado por el usuario.

     Para definir los estilos que aplicaremos en nuestras imágenes dentro de Drupal, nos iremos a la url "/admin/config/media/image-styles", y desde allí podremos crear nuevos estilos, o reutilizar algunos de los que vienen creados por defecto, en todas las instalaciones de Drupal.

     Al definir estilos personalizados, es recomendable que utilicemos las medidas que vamos a aplicar, como parte del nombre del estilo, de esta forma será más fácil de identificarlos cuando los necesites.

     Aunque los estilos nos permiten modificar varias de las características, como la dimensión o la proporción de la imagen, entre otras, no nos convierten dichas imágenes en responsivas o adaptables, automáticamente. Es por esta razón que hemos habilitado el módulo Responsive Image, que está integrado como parte de los módulos del núcleo de Drupal, a partir de la versión 8, aunque no viene activado por defecto.

     Una vez hayamos activado dicho módulo, veremos que se añade otra opción relacionada con los archivos del tipo MEDIA, llamado Estilos adaptables de la imagen. Podremos comprobarlo desde la url "/admin/config/media", y si hacemos clic sobre el enlace, veremos una ventana parecida a la de los estilos de imagen, pero con dos nuevos tipos de estilo preconfigurados.

     Si luego hacemos clic en el botón editar del primero de los estilos, y luego desplegamos el selector llamado Grupo de salto de pantalla, veremos el listado de los temas disponibles en nuestro proyecto, y uno de ellos será nuestro tema personalizado, ya que lo hemos configurado previamente.

     Cómo crear estilos y aplicarlos a imágenes en cada Breakpoint o punto de quiebra.

             Ahora que ya conoces dónde y cómo se crean los estilos de imágenes, si queremos aplicarlos en nuestras imágenes responsivas, tendremos que hacerlo en dos fases:

     1.- Crear el estilo en los estilos de imágenes, para después añadirlos a nuestros estilos responsivos.
     Para ello, iremos a la url "/admin/config/media/image-styles", que mencionamos al principio de este artículo y crearemos varios estilos con el propósito de redimensionar nuestras imágenes proporcionalmente, equivalente a las medidas de cada uno de los Breakpoints o puntos de quiebra que hemos configurado.

2.- Crear nuestros estilos resposivos y configurarlos con sus respectivos Breakpoints o puntos de quiebra.
     Una vez hayamos creado todos los estilos de imagen, en nuestro caso, los seis estilos equivalentes a cada uno de los Breakpoints o puntos de quiebra, podremos, añadir nuestro primer Estilo adaptable a la imagen, por ejemplo Estilos Imagen Artículo y a continuación añadir en la siguiente pantalla, cada estilo asociado a cada Breakpoint.
 

     3.- Añadir el estilo que acabamos de configurar al campo imagen de nuestro contenido.
     Los estilos de las imágenes se aplicarán para la presentación del contenido, por lo tanto, seleccionaremos la pestaña "Gestionar Presentación", y a continuación, seleccionaremos "Imagen adaptable", en el selector para poder seleccionar luego el nombre del estilo que acabamos de crear.

     4.- Una vez guardados los cambios podremos comprobar, si exploramos el elemento en el navegador. Veremos que se ha añadido la etiqueta <picture> y que se mostrarán varias opciones en función del dispositivo en el que se esté mostrando nuestra web.

Categoría

Suscribirse a template