plantillas

Gutenberg | Módulo Drupal

Video de Youtube
URL de Video remoto
Texto

      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.

 

gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony

 

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.

 

Gutenberg Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

 

gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony

     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.

 

gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony

     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.

 

Gutenberg Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Landing Page Drupal | Plantillas Twig (Parte 2) - Bootstrap y Flexbox

Video de Youtube
URL de Video remoto

     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
Landing Page Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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
Landing Page Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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
Landing Page Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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_landingfield_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
Landing Page Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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
Landing Page Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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 %}

 

Gestionar plantillas con Layout Builder

Video de Youtube
URL de Video remoto
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

      Hoy en día, como profesionales dedicados al desarrollo de páginas web, uno de los mayores retos con los que deberemos enfrentarnos, en cada nuevo proyecto, es el asunto de nuestros puntos fuertes.

     Esto significa, que para las empresas o clientes, en general, ya no nos vale el argumento de que "Soy solo programador" o "Yo solo sé maquetar"; y con esto no pretendo justificar en lo absoluto el famoso perfil "Full Stack", que se han sacado de la manga algunos, para pagar menos y exigir más a sus empleados, sino que, aunque seamos programadores o maquetadores, el conocimiento, al menos básico, de otras herramientas relacionadas, nos permitirán ahorrar tiempo y no depender tanto de otros perfiles, para implementar algunos cambios durante el proceso de desarrollo.

     Una de las razones por las que tanto me gustó Drupal desde el principio, es su versatilidad, lo cual nos permite, sin importar nuestro perfil profesional, con algo de ayuda basada en documentación relacionada, crear proyectos web, tanto a nivel de backend como de frontend. 

     Por eso, en esta ocasión, hablaremos sobre la implementación del módulo "Layout Builder", integrado en Drupal a partir de la versión 8. Con este módulo podremos crear, personalizar o modificar plantillas, para la presentación de nuestros contenidos, utilizando sólo la interfaz de usuario, sin la necesidad de manipular o conocer a fondo el uso de las plantillas Twig.

Requisitos:

     - Tener una web Drupal en funcionamiento, con varios contenidos preferiblemente con taxonomías, imágenes y textos, para que puedas comprobar los cambios una vez implementados.

     Si no tienes contenidos, o prefieres generar contenido de prueba, para realizar tus configuraciones, puedes utilizar el módulo Devel Generate, integrado en el módulo Devel, con el cual podrás generar todo el contenido que necesites basándote en los tipos de contenido que prefieras, haciendo únicamente un par de clics.

     Aquí tienes la explicación de Cómo generar contenidos de prueba con el módulo Devel Haz clic aquí

     - Activar los módulos Media y Media Library, que también se incluyen el en núcleo de Drupal, a partir de la versión 8 y que nos permitirán trabajar con características adicionales relacionados con multimedia (imágenes, videos, audio).

     - Layout Builder Component Attributes: te permitirá añadir clases a tus secciones y bloques dentro de Layout Builder

    - Asset Injector (Opcional): Te permitirá añadir CSS o JS directamente en base de datos a través de la interfaz. Es muy útil para realizar pruebas sobre aplicación de estilos, antes de añadirlos directamente en los archivos CSS o pasárselos al maquetador que se encargará de ejecutarlos.

Cómo gestionar plantillas con Layout Builder en Drupal 9

     Paso 1 Activación de módulos Layout Builder, Media y Media Library:

          Con la activación y combinación de estos módulos, incluidos en el núcleo de Drupal, a partir de la versión 8, podremos comenzar a configurar nuestras plantillas, utilizando la interfaz de usuario, además de brindarnos la oportunidad de reutilizar imágenes subidas previamente o añadir otros elementos como videos o archivos de audio, gracias a la los módulos Media y Media Library.

     Paso 2 Descarga y activación de módulo Layout Builder Component Attributes:

          Debido a que el Layout Builder funciona íntegramente con la base de datos de Drupal, no contamos con la posibilidad de tener archivos físicos con los que trabajar, por esta razón, para añadir los estilos a nuestras plantillas y sus elementos relacionados, necesitaremos necesitaremos de éste, creado para ofrecer esta posibilidad. 

    Paso 3 Activación del Layout Builder dentro de nuestros contenidos:

         Después de tener activados todos los módulos necesarios, relacionados con nuestras plantillas, es el momento de activarlo dentro de nuestro contenido, para comenzar a trabajar.

          Para ello, tendremos que dirigirnos a la url "/admin/structure/types/manage/article/display", porque en nuestro ejemplo, hemos optado por utilizar los artículos que vienen por defecto, en cualquier instalación de Drupal.

      Después, podremos elegir cuál o cuáles de los Modos de Vista, relacionados con nuestro contenido serán los seleccionados para trabajar con esta opción. Es posible que, en algunos casos, con modificar el Modo Default, sea suficiente para lograr nuestros objetivos.

Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Tan pronto como hayamos activado el módulo para nuestro Modo de Vista, si volvemos a nuestro contenido, en el modo de vista afectado, podremos ver la pestaña "Diseño" o "Layout", que nos permitirá acceder a las opciones nuevas de edición.

Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 4 Comenzar con la edición de la plantilla:

          A partir de este momento, lo siguiente será añadir "Secciones",  haciendo clic sobre "Section", y se nos abrirá una ventana en la parte derecha de la pantalla, con las diferentes secciones o Columnas, donde podremos colocar nuestros elementos. 

         Estos elementos pueden ser Bloques, Vistas, Campos, etc.

Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 5 aplicar estilos temporales a la plantilla:

          Debido a que todos los cambios relacionados con el Layout Builder se guardan en base de datos y no en archivos físicos, si queremos añadir estilos css en nuestras plantillas, tendremos que descargar y activar el módulo Layout Builder Component Attributs Haz clic aquí y una vez configurado para que nos muestre las opciones que deseamos, entonces, podremos ver una opción más disponible al hacer clic en editar la sección.

Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

          Aunque esta opción nos permite añadir estilos relacionados con nuestra base de datos, en realidad lo recomendable es que se utilicen como recurso temporal, ya que todos los estilos de cualquier proyecto web deberían guardarse directamente en el archivo css.

Layout Builder Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Media Queries | Diseño responsivo

Video de Youtube
URL de Video remoto

     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:

     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 */
  
}

Twig | Introducción a la programación de plantillas

Twig | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Twig, Introducción

El lenguaje Twig es una evolución, adaptada a todo público, que facilita su aplicación, a pesar de que no tengas muchos conocimientos sobre programación php.

Twig es amigable tanto para el diseñador como para el desarrollador al adherirse a los principios de PHP y agregar funcionalidad útil para entornos de creación de plantillas.

Las características clave son...

Rápido: Twig compila plantillas en código PHP optimizado simple. La sobrecarga en comparación con el código PHP normal se redujo al mínimo.

Seguro: Twig tiene un modo de caja de arena para evaluar el código de plantilla que no es de confianza. Esto permite que Twig se use como lenguaje de plantilla para aplicaciones en las que los usuarios pueden modificar el diseño de la plantilla.

Flexible: Twig funciona con un lexer y un analizador flexibles. Esto permite al desarrollador definir sus propias etiquetas y filtros personalizados y crear su propio DSL.

Twig es utilizado por muchos proyectos de código abierto como Symfony, Drupal8, eZPublish, phpBB, Matomo, OroCRM; y muchos marcos lo admiten, así como Slim, Yii, Laravel y Codeigniter, solo por nombrar algunos.

 

Te dejo los enlaces, para que puedas comenzar a utilizar Twig, en tus plantillas de Drupal, tanto de contenidos, como de las vistas

 

Puedes encontrará más información sobre Twig, en su Página Oficial. HAC CLIC AQUÍ

Bootstrap 3, cómo crear Subtema

Video de Youtube
URL de Video remoto
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 pesar de que Bootstrap ha evolucionado considerablemente en los últimos años, mejorando su implementación, así como ampliando las opciones disponibles, para facilitar el diseño de páginas web que puedan adaptarse a todos los dispositivos, todavía existen en el mercado muchas webs que funcionan perfectamente con la implementación de la versión 3 de Bootstrap.

Por esta razón, en este artículo te voy a contar cómo crear un Subtema o tema personalizado, utilizando Bootstrap 3 para tu web de Drupal 9. Aunque también podrás implementarlo de la misma forma en cualquier proyecto Drupal 8.

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

          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 bootstrap -y

Cómo crear un subtema basado en Bootstrap 3

     Paso 1: Copiar el modelo starterkits

     Una vez descargado el Tema Bootstrap 3, tendremos que ir a la carpeta llamada starterkits y dentro encontraremos la carpeta que nos servirá como modelo para crear un subtema con todas las características heredadas, llamada "THEMENAME".

     Copiaremos esta carpeta y la colocaremos al mismo nivel del tema principal, dentro de la ubicación "themes/custom". 

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Si no tienes la carpeta custom creada, deberías crearla para facilitar la organización de tu código, separando los módulos y temas contribuidos, de los que son diseñados o modificados por ti.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 2: Sustituir la palabra THEMENAME por el nombre de tu Subtema.

     Ahora que ya tienes la carpeta modelo llamada "THEMENAME", copiada dentro de la ubicación "themes/custom", tendrás que sustituir esta palabra en todos los archivos, tanto en el nombre como en su interior, donde esté presente.

     Te recomiendo que empieces una por una, desde la parte superior, y vayas comprobando el interior de cada archivo al que le hayas cambiado el nombre, antes de continuar con los demás cambios.

     Si no sustituyes el nombre en todos los archivos necesarios o en su interior, es posible que no puedas activar el subtema o te falle una vez activado. Tómate el tiempo que necesites para renombrarlo todo, antes de activar el tema.

     IMPORTANTE!!!

     Cuando estés renombrando todos los archivos dentro de la carpeta "THENENAME", presta especial atención en el llamado: "THEMENAME.starterkit.yml", ya que en este, además de sustituir la palabra "THENENAME", deberás sustituir "starterkit" por info, quedando el nombre completo del archivo, por ejemplo "drupadicto.info.yml", y luego asegúrate, como en el resto de archivos, de renombrar en su interior.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 3: Activación y configuración del tema

      En el momento en que ya tengas sustituido el nombre en todos los archivos correspondientes, podrás activar el tema para que sea el predeterminado en tu proyecto Drupal 9. 

     Para ello, tendrás que dirigirte a la url "/admin/appearance", donde encontrarás el listados de todos los temas disponibles, activados o no.

     Si te vas a la parte inferior, encontrarás los temas desinstalados, donde uno de ellos debería ser el tuyo. De lo contrario, vuelve a revisar tus archivos, porque te habrá faltado algún lugar dónde sustituir el nombre adecuadamente y por eso no te lo reconoce Drupal.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Finalmente, cuando hayas activado tu Subtema, podrás realizar varias configuraciones, específicas según tus necesidades, desde las pestañas de la parte superior izquierda, que aparecerán al hacer clic en configuración, justo al lado de la imagen de tu tema.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

    Entre estas configuraciones, cabe destacar la posibilidad de seleccionar del listado de "Diseños predefinidos", para facilitar un cambio de aspecto rápido, vistoso y además responsive para tu web.