twig

Imprimir archivos Media en Twig Drupal 8,9, o superior

webmaster — Fri, 19 Jan 2024 08:37:38 +0000

Imprimir archivos Media en Twig Drupal 8,9, o superior

Descripción

Si quieres imprimir la url de un archivo (Video, Image o Mp3), dentro de tus plantilla twig, es necesario que utilices una de las tres opciones disponibles.

webmaster Vie, 19/01/2024 - 09:37

Instrucciones

Para imprimir la url o uri, de un archivo que ha sido cargado utilizando el módulo Media de Drupal, copia el siguiente código en tu plantilla, dependiendo del tipo de archivo subido y sustituye el nombre del campo. En los siguientes ejemplos te muestro cómo imprimir una imagen subida con Media y cómo imprimir un enlace de descarga (Con soporte multi-idioma), para video y audio.

{# Imprime la url de una Imagen #} 
<img src="{{ file_url(content.field_image[0]['#media'].field_media_image.entity.uri.value) }}" />

{# Imprime la url de un archivo tipo Video #} 
<a href="{{ file_url(content.field_video[0]['#media'].field_media_video_file.entity.uri.value) }}">{{ 'Download'|t }}</a> 

{# Imprime la url de un archivo tipo Audio #} 
<a href="{{ file_url(content.field_audio[0]['#media'].field_media_audio_file.entity.uri.value) }}">{{ 'Download'|t }}</a>

{# Imprime la url de un archivo tipo PDF o TXT #} 
<a href="{{ file_url(content.field_archivo_media[0]['#media'].field_media_document.entity.uri.value) }}">{{ 'Download'|t }}</a>

Notas

Puedes instalar el módulo Twig Tweak, que te permite otras opciones para utilizar en Twig.

Paginador

Categoría

Portada

Imprimir valores desde un Nodo dentro una Twig Paragraphs

webmaster — Mon, 09 Oct 2023 21:24:07 +0000

Imprimir valores desde un Nodo dentro una Twig Paragraphs

Descripción

Cómo imprimir valores de un Nodo que contiene campos del tipo Paragraphs, usando Twig.

webmaster Lun, 09/10/2023 - 23:24

Instrucciones

Si estás intentando imprimir valores desde un nodo, dentro de una plantilla tipo Paragraphs, podrás hacerlo siguiendo estos pasos

Declara la variable que hará referencia al elemento padre (Nodo dentro del cuál habitan los paragraphs)
```
{% set parent = paragraph._referringItem.parent.parent.entity %}
```
Añade el campo del nodo que quieres imprimir, utilizando como base la variable que haz declarado.
```
{{ parent.title.value }}
```

```
Id del Nodo: {{ parent.nid.value }}
```

Título del Nodo: {{ parent.title.value }}

Enlace hacia el Nodo: <a href="{{ parent.title.value }}">{{ parent.title.value }}</a>

Paginador

Categoría

Portada

SDC Module | Componentes sin desacoplar

webmaster — Fri, 06 Oct 2023 07:50:08 +0000

SDC Module | Componentes sin desacoplar

Con la aparición de diversos frameworks basados en javascript, como Node.js, Angular o Vue.js, cuyas ventajas principales, son la muestra de contenidos con mayor velocidad de carga, o agregar efectos visuales a tu web, sin perjudicar su rendimiento; no era extraño esperar, que la comunidad de Drupal, se pusiera manos a la obra, para insertar estas funcionalidades, dentro del ecosistema encargado de la parte gráfica, gracias a su sistema de plantillas Twig.

Tras varios intentos, finalmente ha salido a la luz en módulo SDC o Single Directory Components, cuyo principal objetivo es el de permitir, la creación de un directorio, dentro de un módulo o theme personalizado , para alojar en su interior, todos los componentes gráficos, de forma individual, incluyendo en cada uno, todas las dependencias para su funcionamiento, como los archivos relacionados con CSS y Javascript. Este enfoque es el punto fuerte, implementado por los frameworks mencionados anteriormente.

SCD Module - Instalación

Como el resto de módulos integrados en el núcleo de Drupal, podremos activar el SDC o Single Directory Components, desde el listado de móldulos, accediendo a la url "/admin/modules".

Actualmente el módulo sólo tiene una dependencia con Serialization, que también está incluido en el núcleo de Drupal, por lo tanto, podrás activarlo sin sorpresas, al hacer clic en el botón de instalar.

Requerimientos antes de crear componentes

Para que podamos comenzar a trabajar con nuestros componentes, además de activar el módulo SDC, necesitaremos contar con un Theme personalizado, para modificar la apariencia del proyecto.

Podremos realizar modificaciones en los componentes, a través de módulos personalizados, pero en mi caso yo me centraré en explicarte cómo generar tus componentes, para que interactúen con el theme principal de tu proyecto.

En el siguiente capítulo, comenzaremos a crear nuestro primer componente, pero primero necesitarás tener ya activado tu theme personalizado, así que te dejo el enlace para que puedas ir preparándote y que puedas continuar con el ejercicio. Utilizaré Boostrap Barrio, pero tú puedes elegir el que prefieras.

Haz clic aquí para crear tu theme personalizado

webmaster Vie, 06/10/2023 - 09:50

Imprimir valores traducidos en un Twig paragraphs

webmaster — Tue, 08 Aug 2023 14:57:02 +0000

Imprimir valores traducidos en un Twig paragraphs

Descripción

Es posible que te hayas encontrado con la necesidad de imprimir algún contenido, dentro de un paragraphs en un sitio multi-idioma.

En mi caso me tocó hacerlo con el witget de Turitop, para un sitio en dos idiomas, así que comparto el ejemplo por si te hace falta.

La solución es implementar una preprocess function:

webmaster Mar, 08/08/2023 - 16:57

Instrucciones

Activa el modo debug, para conocer el nombre de la plantilla para el paragraphs donde quieres imprimir el valor.

Añade la siguiente función preproceso, dentro del archivo (.theme) en tu tema personalizado.

function ishow_preprocess_paragraph(&$variables) {
  $variables['lang_id'] = $variables['paragraph']->language()->getId();
}

Añade el siguiente código dentro de la plantilla y sustituye los valores, según lo que quieras imprimir, en la línea del idioma correspondiente.

CONTENIDO PLANTILLA paragraphs.html.twig

{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% block content %}
{{ content }}
{% endblock %}
</div>
{% endblock paragraph %}

ESTO PASA A CONVERTIRSE EN LO SIGUIENTE

{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}
   {#{{ content }}#} #Anulo la variable content, para que sólo se muestre el valor del widtget Turitop
{% if lang_id == 'en' %} 
  <div class="load-turitop" data-service="P1" data-lang="en"  data-embed="box"></div>
{% else %}
        <div class="load-turitop" data-service="P1" data-lang="es"  data-embed="box"></div>
{% endif %}
    {% endblock %}
    <script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="I437" data-ga="no" data-buttoncolor="green" data-afftag="ttafid"></script>
  </div>
{% endblock paragraph %}

Paginador

Categoría

Portada

Obtener URI media desde un paragraphs en Twig | Get image URI from paragraph

webmaster — Sun, 04 Jun 2023 18:09:40 +0000

Obtener URI media desde un paragraphs en Twig | Get image URI from paragraph

Descripción

Para extraer la url de un campo media e imprimirlo en tu plantilla Twig, tanto si el campo está en el primer nivel del Paragraphs o dentro de un Paragraphs, que está anidado en otro.

Los ejemplos se puedes aplicara contenidos, productos o paragraphs en Drupal.

webmaster Dom, 04/06/2023 - 20:09

Instrucciones

1. Instala el módulo Twig Tweak.

2. Lee sobre la utilización del filtro en Twig Twek: Cheat sheet(File URL Filter)

También puedes instalar el módulo Twig Field Value.

/* Puedes declarar una variable my_image*/

{% set my_image = product.FIELD_IN_PRODUCT['0']['#paragraph'].FIELD_IN_PARAGRAPH | file_url %}

/* Puedes acceder al valor directamente con el siguiente ejemplo */
{{ product.FIELD_IN_PRODUCT['0']['#paragraph'].FIELD_IN_PARAGRAPH | file_url }}

/* En este ejemplo tienes un campo media dentro de un paragraphs, que a su vez está anidado en otro*/
{{ content.CAMPO_PARAGRAPH_PRINCIPAL['0']['#paragraph'].CAMPO_MEDIA | file_url }}

Paginador

Categoría

Portada

Corregir Drupal ~10.0 and TWIG ~3.0 Unexpected token name of value if (end of statement block expected)

webmaster — Mon, 15 May 2023 09:05:54 +0000

Corregir Drupal ~10.0 and TWIG ~3.0 Unexpected token name of value if (end of statement block expected)

Descripción

Si estás tratando de implementar algún carrusel para Drupal 10, siguiendo ejemplos que haz encontrado en internet, esto te ayudará a corregirlo.

webmaster Lun, 15/05/2023 - 11:05

Instrucciones

Si el código que intentas implementar, es parecido a este:

    {# We repeat the loop for the carousel items. #}
    <div class="carousel-inner" role="list">
      {% for key, item in items if key|first != '#' %}
        <div class="featured-image__slide-{{ key + 1 }} item{% if loop.first %} active{% endif %}" role="listitem">{{ item.content }}</div>
      {% endfor %}
    </div>

La solución, es sacar la parte del if, fuera de la declaración inicial del for...

 {# We repeat the loop for the carousel items. #} 
   <div class="carousel-inner" role="list"> 
    {% for key, item in items if key|first != '#' %}
     {% if key|first != '#' %} 
      <div class="featured-image__slide-{{ key + 1 }} item{% if loop.first %} active{% endif %}" role="listitem">{{ item.content }}</div>
     {% endif %}
    {% endfor %} 
   </div>

Paginador

Categoría

Portada

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

Cómo ajustar el imágenes en card Bootstrap

webmaster — Mon, 03 Apr 2023 11:42:45 +0000

Cómo ajustar el imágenes en card Bootstrap

Descripción

How to get images in Bootstrap's card to be the same height/width?

Si estás acostumbrado a trabajar con Boostrap, es posible, que algunas ocasiones, tengas que ajustar el tamaño de las imágenes, para que se adapten al contenedor dentro de una tarjeta .card, de bootstrap.

webmaster Lun, 03/04/2023 - 13:42

Instrucciones

Añade estos estilos a tu clase card

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Paginador

Categoría

Portada

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

Módulo personalizado | Creación de plantilla

webmaster — Sat, 18 Mar 2023 22:12:00 +0000

Módulo personalizado | Creación de plantilla

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 hemos decidido que estamos dispuestos a seguir aprendiendo Drupal, porque nos apasiona obtener nuevos conocimientos, que solucionarán posibles retos en nuestro futuro próximo, o porque nos encanta ampliar nuestras posibilidades, tanto a nivel laboral como personal. Ya que la puesta en marcha de proyectos web, podrían representar el inicio hacia una carrera prometedora.

Ahora que ya tenemos claro Cómo crear un módulo en Drupal 9, en esta ocasión nos vamos a concentrar, en la creación de una plantilla personalizada, con el objetivo de tomar el control sobre la presentación de los datos relacionados con el mismo. Para lograr nuestro propósito, tendremos que implementar uno de los "hooks" o funciones prefabricadas de Drupal que nos permitirán lograr toda clase de objetivos, en este caso será function hook_theme, la que se encargará registrar las implementaciones de un tema o "theme", dentro de nuestro tema o módulo personalizado.

En este capítulo vamos a crear un módulo personalizado, al que añadiremos un controlador, que nos imprimirá en pantalla una página y posteriormente, también añadiremos mediante la function hook_theme en el archivo ( MIMODULO.module ) los datos y configuraciones que nos permitirán pasar por parámetros el título y otros contenidos que mostraremos en ella.

Finalmente, añadiremos el archivo routing ( MIMODULO.routing.yml ), para poder acceder a esta página una vez haya sido activado nuestro módulo personalizado. Este ejemplo te permitirá conocer la manera en que podrás implementar plantillas personalizadas en tus módulos.

Requisitos

- Cómo crear un módulo en Drupal 9

Cómo crear módulos con su Controlador y Plantilla en Drupal 9

Paso 1 Creación de tu módulo:

Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"

Paso 2 Creación del archivo .module para implementar la function_hook_theme():

En el archivo MIMODULO.module es donde podremos implementar los hooks o funciones de php en Drupal, en este ejemplo utilizaremos la function hook_theme, que se encarga de registrar las implementaciones del tema dentro de un módulo o tema personalizado, esto quiere decir, que las implementaciones declaradas por este hook o función especifican cómo un arreglo o array de renderización particular debe ser renderizada como HTML.

Los párametros que utilizaremos en este ejercicio, estarán dentro de un array que nos devolverá la función y son, el nombre de la función y dentro de de ella, las variables que pasaremos posteriormente al controlador, para crear la página que imprimiremos una vez activado el módulo.

Dentro de las variables, a su vez, tendremos un array de items, donde colocaremos todos las noticias que queremos presentar en la página una vez renderizada y el título de la página que será del tipo String.

<?php

/**
 * Implement hook_theme().
 */
function listado_noticias_theme($existing, $type, $theme, $path) {
    return [
      'listado_noticias' => [
        'variables' => ['items' => [], 'title' => '' ]
      ]
    ];
}

Paso 3 Creación del Controlador o Controller:

El Controlador o Controller es quien nos permitirá crear la página que se mostrará, una vez activado nuestro módulo, al renderizar los datos que hemos definido previamente en nuestra function hook_theme.

Para que pueda generarse nuestra página, vamos a añadir a nuestra clase controlador, un método al que llamaremos "page()", y dentro tendremos dos arrays, uno que contendrá el listado de noticias que vamos a recorrer usando nuestra function hook_theme, y otro con los datos que obtendremos al conectar con la información recibida desde la function hook_theme.

Una vez creada nuestra clase controller con el nombre ListadoNoticiasController.php, dentro tendremos la siguiente estructura de código.

<?php

namespace Drupal\listado_noticias\Controller;

use Drupal\Core\Controller\ControllerBase;

class ListadoNoticiasController extends ControllerBase {

  public function page(){

    $items = [
      ['title' => 'Noticia 1'],
      ['title' => 'Noticia 2'],
      ['title' => 'Noticia 3'],
      ['title' => 'Noticia 4'],
    ];

    return [
      '#theme' => 'listado_noticias',
      '#items' => $items,
      '#title' => 'Listado de noticias'
    ];

  }

}

El primer array, es un array de objetos, ya que cada noticia podrá tener tantos elementos como queramos especificar, para este ejemplo, sólo añadiremos el título, pero puedes añadir tantos como necesites, siempre tomando en cuenta la estructura ( "clave" => "valor" ), ya que los objetos, en realidad también son arrays.

$items = [
  ['title' => 'Noticia 1'],
  ['title' => 'Noticia 2'],
  ['title' => 'Noticia 3'],
  ['title' => 'Noticia 4'],
];

El segundo array, que tendremos dentro de nuestro método "page()", es el que nos devolverá nuestro método al llamarlo, contendrá los parámetros necesarios para renderizar los datos recibidos desde la function hook_theme, y que harán posible la impresión en pantalla, de nuestros contenidos en formato de una página, al activar el módulo.

En el primer parámetro del array, estamos llamando a nuestra función tema, que configuramos usando la function hook_theme, el segundo parámetro son los items, que hemos definido como una de las variables que pasamos y el último, será el título de la página, que también definimos mediante la función.

Esto hará posible, que posteriormente podamos recorrer el primer array de items y mostrarlos en la plantilla correspondiente, que todavía no hemos creado.

return [
  '#theme' => 'listado_noticias',
  '#items' => $items,
  '#title' => 'Listado de noticias'
];

Paso 4 Creación de la ruta para acceder a la página renderizada:

Una vez terminada la configuración de los datos que vamos a presentar en nuestra página, al invocar el método "page()", necesitaremos un modo de acceso, mediante url, para que podamos acceder a esta página y ver sus datos.

En esta tarea nos ayudará el archivo listado_noticias.routing.yml , dentro de este archivo vamos a definir la url hacia nuestra página, el namespace para que drupal pueda encontrar en nuestro controlador el método que mostrará los datos y finalmente los permisos asociados a nuestro contenido, que serán los permisos por defecto, para que cualquier usuario que entre a la web, pueda verlo sin problemas.

Es muy importante respetar los espacios al escribir los datos dentro del archivo rounting, se recomienda evitar la tecla tab para hacerlo y en su lugar, es mejor la barra espaciadora del teclado, contando con dos espacios a cada nueva línea que vayamos añadiendo.

listado_noticias.listado:
  path: '/listado-noticias'
  defaults:
    _controller: '\Drupal\listado_noticias\Controller\ListadoNoticiasController::page'
  requirements:
    _permission: 'access content'

Paso 5 Creación de la plantilla:

La última fase de este desarrollo, antes de activar el módulo, será la creación de nuestra plantilla, para dar formato a la presentación de los datos, una vez activado nuestro módulo.

Para los nombres de las plantilla, se debe utilizar el guión medio "-", en lugar del guión bajo "_", y el nombre que debemos utilizar será el mismo de nuestra función tema, que hemos declarado en el function hook_theme.

Por lo tanto, el nombre que tendremos que utilizar en este ejemplo será "listado-noticias.html.twig", además, colocaremos nuestras plantillas dentro de una carpeta llamada templates, siguiendo con la estructura habitual de drupal para todos sus módulos.

Ahora que ya tenemos la plantilla creada, sólo resta imprimir los valores usando las dobles llaves, ej.: {{ title }} y en el caso de las noticias, crearemos un "ciclo for", para poder recorrer el array de items y acceder a todos sus datos relacionados.

<h3>{{ title }}</h3>
   <ul>
     {% for noticia in items %}
       <li>{{ noticia.title }}</li>
     {% endfor %}
   </ul>

Ya podemos activar nuestro módulo y luego al acceder a la url que hemos definido dentro del archivo listado_noticias.routing.yml, veremos nuestra página con todos los datos que habíamos configurado.

webmaster Sáb, 18/03/2023 - 23:12