sitebuilder

View mode, Twig y Vistas

webmaster — Tue, 09 May 2023 13:50:48 +0000

View mode, Twig y Vistas

En Drupal, además de poder trabajar con tipos de contenido a medida, cuyos campos y comportamiento, nos permiten obtener casi cualquier tipo de estructura posible; existe la opción de mostrar esos mismos contenidos, modificando su presentación o la información expuesta; con esta alternativa podremos aplicar cambios como, por ejemplo, estilos de CSS, dependiendo de los permisos de los usuarios, o descomponer nuestro proyecto en "componentes" reutilizables, que podremos modificar individualmente, sin tener que reescribir el tipo de contenido original.

Esta alternativa es conocida como View Modo o "Modo de Vista" y básicamente nos permite recolocar, presentar u ocultar los campos de cualqueir tipo de contenido o entidad dentro de un proyecto de Drupal.

Donde econtrar el Modo de vista en un contenido Drupal

Drupal viene por defecto con dos tipos de contenido Artículo y Página básica, para ver el modo de vista de cualquiera de ellos, tendremos que acceder a la pestaña de Gestionar presentación del tipo de contenido que desamos consultar, en la url "/admin/structure/types/manage/article/display".

Al acceder, por defecto, en la pestaña de un artículo verás algo parecido a la siguiente imagen, con los campos que trae una instalación nueva de Drupal.

View Mode en vistas Drupal

Una de las mejores formas de trabajar, utilizando View Modes, de los contenidos en Drupal, es através de las vistas.

Por defecto, a partir de Drupal 8, econtraremos una vista llamada Frontpage, encargada de mostrar los artículos creados, sin la necesidad de modificar nada más.

Para comprobarlo, sólo tenemos que añadir algunos artículos a nuestro proyecto Drupal, completando todos sus campos y a continuación, al visitar la página frontal, haciendo clic en el logo de Drupal, veremos un listado de todos nuestros artículos.

Cómo utilizar View Modes en una vistas Drupal

Si exploramos la configuración de la vista Frontpage, a la que podremos acceder desde la url "/admin/structure/views/view/frontpage", podremos entender muy fácilmente, como se emplea un View Mode, dentro de una vista de Drupal.

Observando el apartado Formato, dentro de la página de configuración de la Vista Frontpage, comprobaremos que está configurada para Mostrar contenidos, con el View Mode Resumen.

Esto quiere decir, que si volvemos a la pestaña Gestionar Presentación, del tipo de contenido Artículo y buscamos el apartado Resumen, veremos que los campos activados corresponden a los que vemos en la página de inicio de Drupal, gracias a la vista Frontpage.

Cómo cambiar el View Mode en una vista Drupal

Para añadir o modificar un View Modo dentro de una vista en Drupal, solo tendremos que hacer clic en el enlace que se refiere al modo de vista utilizado, en el apartado Mostrar, de la pantalla de configuración de la vista.

Al hacer clic, se abre un desplegable, con todos los View Modes, disponibles para la entidad o el contenido que estemos mostrando en la misma.

En el caso de la vista Frontpage, por defecto está empleádose el View Mode Resumen, para asegurarnos de que entendemos como modificarlo, haremos clic sobre Resumen y a continuación seleccionaremos, cualquiera de las opciones disponibles, en mi caso, seleccionaré RSS y luego guardaré los cambios, antes de regresar a la página pricipal, para ver el resultado.

Modo de vista personalizado

Ahora que ya conocemos el objetivo de utilizar los Modos de vista (View Modes), podremos ir un poco más allá; vamos a crear y activar nuestro propio modo de vista, para que modifique nuestros contenidos.

Para crear un modo de vista personalizado, iremos a la página de configuración de los modos de vista, para ello, tenemos varias opciones:

Llendo a la pestaña Gestionar Presentación, dentro del contenido que desamos modificar y desplegarnos hasta la parte inferior izqierda, para acceder mediante el enlace que encontraremos al final.
Accediendo a la url: "/admin/structure/display-modes/view"
Si tienes activado el módulo admin_toolbar, mediante el menú desplegable de administración.

Una vez dentro de la página de configuración, haremos clic en el enlace Añadir una nueva modo de vista de Contenido, ubicado en la parte inferior de cada uno de los contenidos, bloques, paragraphs, media, etc.

Luego rellenaremos el campo con el nombre para nuestro View Mode, ej.: ModoVistaPersonalizado y a continuación, guardaremos los cambios y volveremos a la pestaña Gestionar Presentación, para activarlo, dentro de nuestro contenido.

Cuando hayamos guardado el nuevo View Mode, volveremos a la pestaña Gestionar presentación, nos desplazaremos hasta el final y a continuación, marcaremos el nuevo View Mode, que encontraremos dentro del listado.

Crear plantilla Twig para View Mode

Requisitos:

Instalar un Theme personalizado. Para descubrir varias opciones disponibles HAZ CLIC AQUI
Activar el modo debug o depurador de Drupal. HAZ CLIC AQUÍ

Cuando tengamos activado el modo Debug, seleccionaremos inspeccionar, desde el navegador, para ver las sugerencias generadas por Drupal, relacionadas con los posibles nombres para las plantillas de nuestros Modos de Vista.

Al igual que con cualquier otra plantilla de un nodo en Drupal, copiaremos el modelo, cambiaremos el nombre y a continuación, podremos comenzar a personalizarla.

webmaster Mar, 09/05/2023 - 15:50

Layout Paragraphs | Módulo Drupal

webmaster — Wed, 26 Apr 2023 08:52:06 +0000

Layout Paragraphs | Módulo Drupal

En el curso Landing Page | Creación y configuración con Drupal 9, aprendimos a configurar desde cero, un tipo de contenido, llamado Landing Page, cuya estructura principal estaba formada paragraphs, permitiendo así una mayor flexibilidad sobre el orden de todos sus componentes.

También pudimos comprobar, que es posible añadir más funcionalidades, que modifiquen específicamente a cada Paragraphs, como la de permitir configurar un color, gracias al módulo Color Field; o incluir un formulario dentro de un paragraphs, gracias a los campos referenciados de Drupal.

En el caso de nuestro ejemplo, resulta fácil la manipulación de los componentes Paragraphs, desde la interfaz del usuario, ya que no representan una gran cantidad; pero, ¿qué ocurre si en lugar de tener unos pocos Paragraphs, queremos ofrecer al usuario un mayor abanico de posiblidades?

Si exploramos el fomulario de creación de nuestra Landing Page, podremos comprobar a qué nos referimos; ya que la interfaz del usuario de Drupal, añade cada nuevo paragraphs justo debajo del anterior, y, a pesar de que podemos plegar u ocultar cada uno de los paragraphs, durante el proceso de edición, no contamos con una opción gráfica "Verdaderamente amigable", para usuarios con conocimientos básicos sobre edición de contenidos.

Layout Paragraphs

Para facilitar el proceso de edición de contenidos, cuando tenemos un gran número de paragraphs, disponibles para el usuario editor, contamos con otro módulo llamado Layout Paragraphs, cuyo objetivo es, precisamente, permitirnos añadir, editar, arrastrar o eliminar los paragraphs dentro de nuestros contenidos.

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

2.- Descargándolo manualmente el módulo desde la página oficial del Layout Paragraphs 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 layout_paragraphs -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.

Configuración del módulo

Una vez descargado y activado el módulo, el siguiente paso será configurar el campo o los campos, del tipo paragraphs, para que podamos ver el cambio que nos ofrece este módulo, a nivel de la interfaz de usuario, facilitando la manipulación de los paragrphs.

En nuestro ejercicio con la Landing Page, creamos un campo tipo paragraphs, en el que añadimos cada uno de los Bloques o Paragraphs que deberían estar disponibles para que el usarios los añadiera, editara o modificara, según sus necesidades.

Por lo tanto, tendremos que acceder a las pestañas Administrar la visualización del formulario y luego en la de Gestionar Presentación, buscar el campo al que activaremos la funcionalidad del módulo Layout Paragrarphs y la seleccionaremos dentro de las opciones disponibles. Por último guardaremos los cambios y borraremos la cache de Drupal, para ver el resultado.

Una vez guardados los cambios en la configuración de los campos, si volvemos a editar nuestro contenido, podremos apreciar un cambio considerable en la forma de gestionar los paragraphs.

Entre los cambios están:

Posibilidad de previsualizar el contenido de los paragraphs, tal y como se muestran en el frontend.
Capacidad para añadir nuevos paragraphs por medio de un buscador
Capacidad de arrastrar y cambiar de posición todos los paragraphs entre sí.
Capacidad para duplicar Paragraphs

Combinando Paragraphs con Layout Builder

Uno de los objetivos principales de este módulo, es ofrecer la posibilidad de combinar el uso de Pagragraphs, con el Layout Builder integrado en Drupal, a partir de Drupal 8, con esta combinación, podremos preconfigurar secciones de una o varias columnas, para poder insertar en ellas, todos los paragraphs que necesitemos.

Cómo crear una sección

La sección, no es más que otro componente del tipo Paragraphs, que tendremos que añadir al listado principal, si queremos que funcione.

La particularidad de una SECCIÓN, es que tendremos que marcar la opción de Layout Paragraphs, en la parte inferior, para que pueda ser utilizada con ese fin.

Al configurar este nuevo paragraphs, al que llamaremos SECTION, o como te apetezca, nos aparecerá dentro de las opciones disponibles, cuando presionamos el icono de suma (+), que aparecer en la parte superior e inferior de nuestra nueva interfaz de usuario, para la edición de los paragraphs.

webmaster Mié, 26/04/2023 - 10:52

Asset Injector

webmaster — Sun, 16 Apr 2023 15:03:17 +0000

Asset Injector

Este módulo te pemitirá añadir y editar CSS y/o Javascript, sin la necesidad de salir de la interfaz de usuario de administrador en Drupal. Además, podrás limitar las páginas en las que se ejecutan o aplican, solamente seleccionando el tipo de contenido en el selector dentro de la pantalla de configuración del módulo.

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

2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Asset Injector 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 asset_injector -y

webmaster Dom, 16/04/2023 - 17:03

Media y Media Library

webmaster — Sun, 16 Apr 2023 14:09:28 +0000

Media y Media Library

Añade la funcionalidad de reutilizar tus imágenes para todos tus contenidos.

Sabías que, aunque ya existe un campo field_image, en nuestros contenidos por defecto de Drupal 9, también existe la posibilidad de añadir otro campo mucho más potente, gracias a los módulos incluidos en el Núcleo de Drupal, llamados Media y Media Library y que al activarlos, además de permitir agregar y reutilizar imágenes, también nos ofrece la oportunidad de utilizar formatos de Video externo o local, archivos de audio y muchas otras posiblidades?

Es por esto que en esta ocasión, te comentaré cómo instalar y configurar un campo de imágenes, para tus contenidos, utilizando estos dos módulos, que ya te vienen por defecto en Drupal 9, pero que tendrás que activarlos si quieres comenzar a utilizarlos.

CÓMO ACTIVAR MEDIA Y MEDIA LIBRARY

A diferencia de otros módulos, en esta ocasión, sólo tendremos que acceder a la url "/admin/modules", y una vez allí, buscaremos en el filtro el nombre de ambos y podremos activarlos de inmediato.

Una vez activados, podremos añadir nuevos campos de tipo Media, en todos nuestros contenidos. Pero antes, hechemos un vistazo al listado de archivos de tipo Media. Para ello, accederemos a la url "/admin/content/media", donde veremos el listado de todos los archivos cargados a través del módulo, en formato Tabla o Cuadrícula.

Desde este listado, podremos ejecutar cambios en Bloque o por grupos, seleccionando ya sea por medio de filtros o marcando el check junto a cada uno de los nombres, como podemos hacer cuando estamos dentro del listado de contenidos de Drupal. Además, contamos con un buscador y un filtro que funcionan de la misma manera que en contenidos.

AÑADIENDO UN CAMPO MEDIA

El campo media, se añade igual que cualquier otro campo, seleccionaremos añadir campo y a continuación la nueva opción Media, que veremos en el desplegable.

Los siguientes pasos en la configuración, variarán en función de lo que esperamos añadir, por ejemplo un campo para una sola imagen, un video, un archivo de audio o varias imágenes.

webmaster Dom, 16/04/2023 - 16:09

Menús | Creación, edición y manipulación en Drupal 8 y 9

webmaster — Sat, 15 Apr 2023 12:15:47 +0000

Menús | Creación, edición y manipulación en Drupal 8 y 9

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

Al realizar cualquier instalación de Drupal, por defecto, una vez arrancado el sitio, podremos ver que se nos han activado algunos elementos y funcionalidades, que nos servirán de referencia para la posterior configuración y desarrollo de nuestra web.

Dentro de este grupo, encontraremos los Menús, parte fundamental de cualquier proyecto web, que facilita la navegación y accesos, tanto de los usuarios visitantes, como de los administradores del sitio.

En el caso de Drupal, veremos cinco tipos de Menús activados por defecto: el Menú Administrador, Menú principal, el Menú Usuario, el Menú herramientas y el Menú del Pie de página.

Todos ellos, al igual que la mayoría de elementos disponibles, a partir de Drupal 8, estarán dentro de Bloques, que podremos mover, según nuestras necesidades, además de controlar quiénes podrán acceder a los mismos, a través de la configuración de permisos de los usuarios.

Para administrar los bloques, iremos a la página de administración de bloques ubicada en la url: "estructura/diseño de bloques". Si quieres aprender más sobre la manipulación de bloques, visita este enlace Cómo crear un bloque programáticamente en Drupal 9. Tan pronto como aprendas a manipular los bloques, te será más fácil administrar las posiciones donde se mostarán los diferentes Menús de tu proyecto.

Ahora que ya tienes claro, dónde y cómo manipular los Bloques, deberías dedicar un rato a repasar o conocer la manipulación de los permisos, para que puedas controlar los accesos, según tus necesidades, a los diferentes menús y sus respectivos enlaces, mediante la gestión de permisos y usuarios; por defecto, la instalacíon de Drupal te crea un usuario administrador, pero te recomendaría crear, tan pronto como puedas, un segundo usuario, al que le vayas dando permisos específicos y así poder comprobar, lo que puede ver o hasta dónde puede acceder; de esta manera, al entregar el proyecto o publicarlo, evitarás dar permisos innecesarios, y correr el riesgo de que te borren o cambien alguna configuración erróneamente.

Para conocer más sobre cómo crear usuarios y gestionar sus accesos y permisos, puedes visitar el siguiente enlace Gestionar usuarios, roles y permisos en Drupal.

Menús activados por defecto al instalar Drupal

Menú Administrador

Como su nombre lo indica, es el Menú que permite administrar todo el sitio. Para poder verlo necesitarás tener los permisos de administrador. Por esta razón es recomendable crear un segundo usuario, con los permisos limitados, para que no pueda destruir, alguna configuración, por error.

Este menú, aparece en la parte superior del sitio, justo debajo de la barra del navegador, por defecto ofrece una navegación limitada, por lo que se recomienda descargar y activar el módulo Admin Menu, para ofrecerte más opciones y facilidades cuando estés navegando por las diferentes secciones del sitio web.

Para descargar y conocer cómo utilizar el módulo visita este enlace: Admin Toolbar

Menú Principal

Este es el menú creado por defecto, para que los usuarios puedan navegar a través de las diferentes secciones de tu web, podrás configurar tus tipos de contenido, para que se añadan a este menú automáticamente.

También agregar elementos y contenidos, de forma manual desde la pantalla de administracion de los menús, ubicada en la url: "/admin/structure/menu"

Mostrar elementos del Submenú

Es muy importante saber, que por defecto, el menú principal viene configurado para mostrar sólo el primer nivel de sus elementos, por esta razón, si nuestro sitio tiene Submenús, que deberían desplegarse, tendremos que habilitar esta opción desde la administración de bloques, haciendo clic en el botón configurar y posteriormente, cambiando la opción a Ilimitado, en el apartado llamado Número de niveles a mostrar, de lo contrario, sólo se mostarán aquellos elementos que se encuentren en el primer nivel.

Otra opción que deberemos activar, siempre que nuesto menú tenga (Submenús), es la llamada Mostrar expandido, que tambíen viene desactivada por defecto. Si no activamos esta opción, no podremos ver ningún Submenú, aunque hayamos realizado el paso anterior en la administración de Bloques.

La opción Mostrar expandido, deberá activarse en cualquier Menú que contenga Submenús. Puede que las configuraciones iniciales se borren cada vez que instalemos un nuevo Theme, por lo que te recomiendo dejar esta parte para cuando hayas decidido la plantilal o Theme que utilizarás en tu proyecto.

Menú Usuario

Este menú, por defecto, ofrece las opciones de identificarse como usuario (Iniciar/Cerrar sesión) y acceder a los detalles relacionados con nuestra cuenta. Por defecto aparece en la parte superior derecha del sitio, en las versiones más actuales de Drupal, al igual que los demás Menús, podrás modificar su posición, limitar los accesos para que se pueda mostrar u ocultar, según tus necesidades, además de ampliar o quitar las opciones.

Menú Herramientas

Por defecto se activa en la barra izquierda de nuestro proyecto, junto al buscador de Drupal. Su contenido irá creciendo en función de los permisos del usuario, facilitando el acceso a configuraciones u opciones específicas. Al igual que los anteriores, podrás cambiar su posición, opciones de mostar/ocultar, de acuerdo con las necesidades de tu proyecto y/o limitar su acceso, mediante la configuración de los permisos correspondientes.

Añadir enlaces manualmente

Para añadir un nuevo enlace, dentro de cualquier menú, sólo tendrás que navegar a la pantalla de configuración de los menús, que mencionamos la prinicipio y, a continuación, una vez seleccionado el menú en el cual quieres añadir un nuevo enlace, presionar el botón añadir enlace y completar los campos.

En el caso de que quieras agregar un contenido existente, bastará con que escribas una letra en el campo del enlace y Drupal te mostrará el listado de contenidos disponibles para que puedas seleccionarlo. Esta es la manera recomendada, ya que si copias la url de forma manual, podrías tener fallos en el caso de que actualizaras el contenido.

Si lo que necesitas es añadir un enlace, como parte de un Submenú, podrás hacerlo de dos maneras distintas:

Opción 1 : seleccionar el elemento padre o Menú padre de tu enlace, en el momento que estés añadiendo el contenido.

Opción 2: Una vez creado tu enlace, arrastrarlo y colocarlo debajo del elemento o Menú padre.

RECUERDA GUARDAS LOS CAMBIOS ANTES DE DEJAR LA PÁGINA DE CONFIGURACIÓN.

Módulos complementarios para trabajar con Menús en Drupal 9

Como siempre, Drupal ofrece un listado de módulos, destinados a ampliar o modificar las opciones por defecto de cada uno de sus componentes partes, a continuación te muestro algunos de estos módulos, que podrías necesitar en tu siguiente proyecto:

Menu Link Attributes

Este módulo compatible con la versión 8/9, te permitirá añadir, entre otras opciones, clases o IDs a tus enlaces para que puedas manipularlos a través de CSS o Javascript, según las necesidades de tu proyecto. Puedes descargarlo desde su Página Oficial de Drupal

Menu Admin per Menu

Este módulo compatible con la versión 8/9, te permitirá otorgar permisos de administrador a roles por menú sin darles permiso de administrador completo. Puedes descargarlo desde su Página Oficial de Drupal

Menu Item Role Access

Este módulo agrega un campo de rol opcional a los elementos del menú que enumera todos los roles disponibles. Un usuario que tenga acceso para editar elementos del menú podrá seleccionar los roles que tienen acceso para ver este elemento del menú. Puedes descargarlo desde su Página Oficial de Drupal.

Simple Menu Icons

Este módulo compatible con la versión 8/9, te permitirá añadir iconos en lugar de simples enlaces en tus menus de drupal, desde la misma interfaz de usuario. Puedes descargarlo desde su Página Oficial de Drupal

webmaster Sáb, 15/04/2023 - 14:15

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

webmaster — Fri, 24 Mar 2023 08:59:37 +0000

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

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.

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.

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>

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:

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.

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

webmaster Vie, 24/03/2023 - 09:59

Gestionar plantillas con Layout Builder

webmaster — Sun, 19 Mar 2023 17:18:06 +0000

Gestionar plantillas con Layout Builder

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.

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.

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.

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.

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.

webmaster Dom, 19/03/2023 - 18:18

Básicos Sitebuider | Editor de contenidos o usuario por interfaz

webmaster — Sun, 19 Mar 2023 08:23:39 +0000

Básicos Sitebuider | Editor de contenidos o usuario por interfaz

webmaster Dom, 19/03/2023 - 09:23

Curso Gratuito

/basicos-usuario-editor

Webform Drupal | Formularios, configuraciones y extras

webmaster — Sat, 18 Mar 2023 17:35:57 +0000

Webform Drupal | Formularios, configuraciones y extras

webmaster Sáb, 18/03/2023 - 18:35

Curso Gratuito

/webform-drupal-formularios-configuraciones-y-extras

Drupal 10| Instalación en Ubuntu 20.04 con Lando y WSL2

webmaster — Sat, 18 Mar 2023 16:29:35 +0000

Drupal 10| Instalación en Ubuntu 20.04 con Lando y WSL2

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

Como muchos de ustedes sabrán, Drupal 10 verá la luz oficialmente a mediados de este año, evolucionando una vez más hacia su objetivo, de convertirse en la herramienta para el desarrollo de aplicaciones web y móviles más versátil, robusta y confiable que existe en el mercado actual.

En esta nueva versión, además de reestructurar su código interno, para aplicar cambios y mejoras, relacionados tanto con la nueva versión de Php 8, como con el framework Symfony, en el cual se basa desde su versión 8; Drupal 10 incluirá incluirá otros cambios notables, como por ejemplo, la sustitución de su tema por defecto, Bartik, por el nuevo tema Olivero, que ya podemos ver en Drupal 9, en su versión de desarrollo. Con el que pretende ofrecer las ventajas de una apariencia moderna, combiandad con la integración de otras funcionalidades como el Layout Builder o el uso del módulo Media para incorportar imágenes, videos y otros archivos.

A pesar de que todavía faltan algunos meses para su lanzamiento oficial, ya podemos comenzar a explorarlo, en nuestro entorno local, gracias a la herramienta de desarrollo basada en contenedores de Docker, llamada Lando y que hemos utilizando en otras ocasiones. Para más información sobre Lando Haz clic aquí

Así que en esta ocasión, instalaremos un proyecto Drupal 10, utilizando Lando en nuestro entorno local. Tengo la distribución Ubuntu 20.04 de Linux, ejecutándose en el subsitema de Linux para Windows WSL2, pero puedes realizar los mismos pasos si tienes un ordenador con Linux de manera nativa.

Prerrequisitos:

- Tener instalado en tu servidor local Lando. Si todavía no lo haz hecho y quieres aprender cómo hacerlo, Haz clic aquí

Cómo instalar Drupal 10 en local utilizando Lando

Paso 1 - Crear archivo de configuración:

Para comenzar, iniciaremos sesión con nuestro usuario NOROOT_USER, para evitar cargarnos nada por error y poder ejecutar comandos sudo. luego nos moveremos hasta la ubicación que pensamos para este proyecto y crearemos un archivo de configuración con el nombre TU_PROYECTO.sh, y dentro incluiremos el siguiente código, modificando las líneas que implican el nombre de nuestro proyecto:

# Initialize a drupal10 recipe using the latest Drupal 10 version
mkdir drupal10-app \
  && cd drupal10-app \
  && lando init \
    --source remote \
    --remote-url https://ftp.drupal.org/files/projects/drupal-10.0.x-dev.tar.gz \
    --remote-options="--strip-components 1" \
    --recipe drupal10 \
    --webroot . \
    --name drupal10-app

# Start it up
lando start

# Install a site local drush
lando composer require drush/drush

# Install drupal
lando drush site:install --db-url=mysql://drupal10:drupal10@database/drupal10 -y

# List information about this app
lando info

Explicación:

En las primeras líneas, se creará la carpeta para nuestro proyecto y, a continuación, se moverá para añadir el arhivo de configuración de Lando e iniciará el proceso de la descarga desde el repositorio oficial de Drupal.

Deberías sustituir, si lo prefieres, todas las líneas donde ves drupal10-app, que en este caso se refiere tanto al nombre de la carpeta donde estará alojado el proyecto de Drupal, como al nombre que dará Lando una vez instalado y que podrás comprobar si abres el archivo de cofiguración .lando.yml.

# Initialize a drupal10 recipe using the latest Drupal 10 version
mkdir drupal10-app \
  && cd drupal10-app \
  && lando init \
    --source remote \
    --remote-url https://ftp.drupal.org/files/projects/drupal-10.0.x-dev.tar.gz \
    --remote-options="--strip-components 1" \
    --recipe drupal10 \
    --webroot . \
    --name drupal10-app

Las siguientes líneas son las encargadas de arrancar Lando, mediante el comando lando start, esto permitirá ejecutar los comando incluido en Lando, para el resto de configuraciones.

# Start it up
lando start

Una vez arrancado Lando, en las siguiente líneas, comenzará la instalación del proyecto Drupal 10, utilizando esta vez el comando de drush site:install, que permite instalar un proyecto Drupal desde cero, con todo lo necesario para comenzar a trabajar.

# Install drupal
lando drush site:install --db-url=mysql://drupal10:drupal10@database/drupal10 -y

Al finalizar todo el proceso de descarga, instalación y configuración de tu sitio Drupal 10, el último paso será mostrarte la información de tu proyecto, para que puedas conprobar sus valores, relacionados con el usuario, puertos, base de datos, etc.

# List information about this app
lando info

Ya podrás acceder a la url de tu proyecto, haciendo clic en el enlace que te muestra la pantalla, donde verás la bienvenida a tu proyecto, sin estar indentificado.

Cómo puedo comenzar a administrar mi proyecto Drupal

Al instalar Drupal, utilizando el comando drush site: install, éste genera un usuario por defecto, llamado admin, pero su contraseña asociada es un valor Ramdom, por lo tanto, para poder entrar como administradores y comenzar a trabajar en nuestro proyecto de Drupal 10, utilizaremos el comando para resetear los valores del usuario admin por defecto. Si quires más información sobre las opciones del comando drush site: install, haz clic aquí.

lando drush uli

Recuerda que estamos trabajando con Lando, es por esta razón, que en lugar de utilizar drush directamente, pondremos siempre delante la palabra lando. Esto generará un enlace, que deberemos copiar en el navegador, a partir del dominio completo de nuestro sitio web y automáticamente, accederemos a la pantalla de configuración de Drupal, donde podremos ver y modificar todos los detalles relacionados con nuestro usuario administrador.

Si quieres explorar más información sobre este tema, antes del siguiente artículo, puedes visitar la documentación oficial de Lando para Drupal

webmaster Sáb, 18/03/2023 - 17:29