Antes de leer este contenido, deberías haber visto los dos artículos precedentes a este.

 

Los paragraph son elementos compuestos por campos tal como los bloques, pero que solo puede ser usados dentro de un bloque, para tener esto un poco más claro mostraremos a continuación un cuadro comparativo entre un Bloque y un Paragraph

 

Función/entidad	Bloque	Paragraph
Colocar dentro del diseño de una página.	Sí	No
Colocar en Zonas de la página (Diseñó de bloques)	Sí	No
Se le puede agregar campos personalizados.	Sí	Sí
Se puede agregar a distintos Bloque personalizados	No	Si

En pocas palabras, lo paragraph están hechos para ser usados por los bloques y normalmente se usan para crear cards.

 

 

1. ¿Cómo mostrar un paragraph?

Teniendo de antemano la creación del paragraph y el campo el bloque anexando el paragraph, vamos a ver que es lo que debemos hacer para mostrarlo en un twig.

Para este ejemplo vamos a usar el componente de Slider Mini

Obtener así:

1. Guardamos el campo que contiene los paragraph, en la 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. Mostramos los campos aquí

{% set card_items = content.field_slider_items['#items'] %}
{% if card_items %}
  {% for item in card_items %}
      {% set card_item = item.entity %}
{# Mostramos aquí los campos #}
  {% endfor %}
{% endif %}

 

 

2. Mostrar campos

Los campos en los parapraph, se muestra de manera diferente que en los bloques.

 

 

2.1 Imagen

Obtener así:

{% set image_url = file_url(card_item.field_image.entity.field_media_image.entity.uri.value) %}
{% set image_alt = card_item.field_image.entity.field_media_image.alt %}

Ejemplo de uso:

{% if image_url %}
      <figure class="{{class_block}}-card__image-icon m-0 mb-3">
           <img src="{{ image_url }}" alt="{{ image_alt }}">
      </figure>
{% endif %}

 

 

2.2 Campo de texto (Texto sin formato)

Obtener así:

{% set title = card_item.field_title.value %}

 

Ejemplo de uso:

{% if title %}
   <h2 class="{{class_block}}-card__title mb-3">
       {{ title }}
   </h2>
{% endif %}

 

 

2.3 body

Obtener así:

{% set body = card_item.field_body.value %}

 

Ejemplo de uso:

{% if body %}
  <div class="{{class_block}}-card__body mb-5">
    {{ body|raw }}
  </div>
{% endif %}

 

 

2.4 Enlace

Obtener así:

{% set link_url = card_item.field_link.uri %}
{% set link_title = card_item.field_link.title %}

 

Ejemplo de uso:

{% if link_url %}
  <div class="{{class_block}}-card__cta d-flex my-3 mx-auto mx-md-0">
    <a href="{{link_url}}" class="{{class_block}}-card__button button-primary">
      {{link_title}}
    </a>
  </div>
{% endif %}

 

 

2.5 Documentos adjuntos

Obtener así:

{% set document_url = file_url(card_item.field_document.entity.field_media_document.entity.uri.value) %}
{% set document_text = 'Ver Documento >>' %}

 

Ejemplo de uso:

{% if document_url %}
  <div class="{{class_block}}__cta" >
     <a href="{{document_url}}" class="button-text" target="_blank" rel="noopener noreferrer">
            {{ document_text }}
      </a>
   </div>
{% endif %}