A continuación, veremos cómo mostrar los campos más usados en los bloques de drupal.

 

Nota: en caso que necesites un campo que no esté en los ejemplos, usa el código de un campo del mismo tipo y solo reemplaza el nombre.

 

1. Título

Los bloques de drupal por defecto tienen un campo de título.

 

Para mostrarlo usamos este código, los prefix deben ir, ya que son los que permiten que se muestre el botón de edición

{{ title_prefix }}
    {% if label %}
        <h2 class="text-center"{{ title_attributes }}>{{ label }}</h2>
    {% endif %}
{{ title_suffix }}

 

En caso que por diseño, el componente no requiera título, se debe colocar los prefijos solos

{{ title_prefix }}
{{ title_suffix }}

 

 

2. Body

Este campo viene por defecto, sin embargo se puede eliminar en caso de no ser necesario.

Obtener así:

{% set body = content.body[0] %}

 

Ejemplo de Uso:

{% if body %}
    <div class="{{class_block}}__content-body mt-5">
         {{ body }}
    </div>
{% endif %}

 

 

3. Lista de texto.

Cómo ejemplo de este tipo de campo tenemos a la variación de color, el cual es esencial para el nivel de personalización que manejamos, permitiéndonos elegir cualquier color de la tipografía de fondo.

Aquí debemos tener presente que tenemos el nombre, que es lo que vera el usuario al diligenciar el campo y nombre de sistema, que es lo que nos llegará por medio de twig.

Obtener así:

{% set color_variation = content.field_color_variation['#items'].value %}

 

Ejemplo de Uso:

{% if color_variation %}
  {% set class_variation = class_block ~ "--bg-" ~ color_variation %}
  {% if color_variation != 'white' and color_variation != 'gray' and color_variation != 'clean' %}
    {% set class_variation = class_variation ~ " co-white" %}
  {% endif %}
{% endif %}
<section{{ attributes.addClass(classes, class_variation) }}>

 

4. Enlace

Obtener así: En este tipo de campo, requerimos obtener dos variables, la url y el texto del link

{% set link_text = content.field_link[0]['#title'] %}
{% set link_url = content.field_link[0]['#url'] %}

 

Ejemplo de Uso:

{% if link_url %}
  <div class="{{class_block}}__link me-3 mb-3">
    <a class="button-primary" href="{{ link_url }}" target="{{'pdf' in link_url|render|trim ? '_blank' : '_self'}}">
      {{ link_text }}
    </a>
  </div>
{% endif %}

 

 

4. Imagen (limitada)

Las entidades pueden ser limitadas a un número establecido, en este caso solo se podría anexar a este campo un solo elemento.

 

Obtener así: En este tipo de campo, requerimos obtener dos variables, la url y alt de la imagen

{% set image_url = file_url(content.field_image[0]['#media'].field_media_image.entity.uri.value) %}
{% set image_alt = content.field_image[0]['#media'].field_media_image.alt %}

 

Ejemplo de Uso: Hay dos formas de mostrar una imagen dependiendo de las necesidades del componente.

 

Mostrando con un elemento img

{% set image_alt = content.field_image[0]['#media'].field_media_image.alt %}
  <figure class="{{class_block}}__image w-100">
      <img src="{{ image_url }}" alt="{{ image_alt }}" />
  </figure>
{% endblock %}

 

Colocar la imagen como fondo del elemento: Se puede hacer usando estilos en línea.

<section{{ attributes.addClass(classes) }} style="background-image: url({{image_url}});">
</section>

 

 

5. Imagen (Ilimitada)

Las entidades cuando son ilimitadas, se puede añadir la cantidad de elementos que el usuario desee, este modo de multimedia es poco utilizado, normalmente se usa un paragraph, sin embargo, existe un componente en particular que ese ajusta perfecto a este modo, el cual es un slider hecho exclusivamente de imágenes. (gallery-carousel).

 

Obtener así:  Para esta clase de campo vamos a realizar lo siguiente

1. Guardamos el campo de imágenes en una variable, card_items.
2. Creamos un if para ejecutar el código en su interior, solo si el campo card_items tiene información
3. Hacemos un for para recorrer card_items asignando cada elemento a la variable item .
4. Extraemos la entidad de cada item. y se guarda en card_item
5. Obtenemos url y alt de cada imagen.
6. Finalmente colocamos el html para mostrar las imágenes

{% set card_items = content.field_images['#items'] %}

{% if card_items %}
  {% for item in card_items %}
      {% set card_item = item.entity %}
      {% set image_url = file_url(card_item.field_media_image.entity.uri.value) %}
      {% set image_alt = card_item.field_media_image.alt %}
        <div class="card {{class_block}}-card px-3">
            <article class="card__wrapper {{class_block}}-card__wrapper">
              {% if image_url %}
              <figure class="card__image {{class_block}}-card__image m-0">
                <img src="{{image_url}}" alt="{{image_alt}}" class="w-100"/>
              </figure>
              {% endif %}
            </article>
        </div>
  {% endfor %}
{% endif %}

 

 

6. Boolean

Para este campo se debe tener presente que, al momento de crear el campo se tiene que reemplazar los valores predeterminados de “Activado” y “Desactivado”, por los valores numéricos de 1 y 0 respectivamente.

En este ejemplo usamos un campo para definir si el texto va alineado a la izquierda o no.

 

Obtener así:  Esto devuelve verdadero en caso de que el campo sea igual a 1, de lo contrario será falso.

{% set is_left = '1' in content.field_is_left_aligned['#items'].value %}

 

Ejemplo de Uso: En este ejemplo se usa la variable en un row, donde si is_left es verdadero, mostramos la clase de bootstrap5 justify-content-start y si es falso mostramos justify-content-center

<div class="{{class_block}}__items row g-5 {{is_left ? 'justify-content-start' : 'justify-content-center'}}">
</div>

 

Si quieres saber  ¿Cómo mostrar los paragraph en drupal?