web-dev-qa-db-fra.com

Rendre les valeurs directement dans un modèle de paragraphe twig

Je travaille avec le module de paragraphe et j'ai créé un type de paragraphe appelé Bloc d'accroche d'image qui est un - référence d'entité à un type de conten (teaser d'image, plusieurs références possibles). Ce type de contenu a 5 champs (Image, liste, 2x texte + lien) et je voudrais rendre les valeurs directement dans le modèle de paragraphes (paragraphe - image-teser-block.html.twig ).

Ce que je pourrais faire est d'utiliser {{content}} ou {{content.field_image_teaser}} pour afficher le code HTML dans le modèle de paragraphe, puis modifier le champ modèles. Mais parce que j'ai beaucoup de types de paragraphes différents et chacun a beaucoup de champs, je me retrouverais avec des tonnes de modèles (imaginez 10 paragraphes différents avec 6 champs chacun -> 60 fichiers de modèles différents) et ce n'est pas vraiment efficace travailler.

Alors, comment obtenir les valeurs (pas de rendu HTML) dans le fichier paragraphe - image-teser-block.html.twig comme ça:

<div class="wrapper">
    {% for item in imageTeaserBlock %}
        <article style="background-image: url('{{item.img.url}}');">
            <a href="{{item.link}}">
                <div>{{item.listLabel}}</div>
                <div>
                    <div >{{item.title}}</div>
                    <h2 >{{item.subtitle}}</h2>
                </div>
            </a>
        </article>
    {% endfor %}
</div>

Je pense que le même problème s'applique également aux types de contenu qui sont des références d'entité à d'autres types de contenu.

theming8
4
benandunt

Je suis nouveau sur Drupal aussi et j'essayais de faire exactement la même chose. J'ai simplement mis le nom de la machine de l'entrée que j'essayais d'afficher dans le twig template ie - {{field_image_caption}} - a fait le plein du cache et il est apparu comme par magie. J'espère que ça aide.

<div class="slice h-clearfix">
    <div class="l-col-12 l-content t-content article-content">
        <div class="l-col-10 l-Push-1 l-padding">
            <div class="article-image">
                {{ field_image }}
                <div class="article-img-social">
                    <div class="article-caption">
                    PHOTO CREDIT: {{ field_image_caption }}
                    </div>
                <div class="article-img-share share-article-image"></div>
            </div>
        </div>
    </div>
</div>
1
Frazer Findlater

Une des façons de le faire est comme ça.

Collectez toutes les valeurs dont vous avez besoin et définissez-le sur une variable, puis utilisez cet objet dans votre modèle twig. Ci-dessous, un exemple ...

{%
  set c2a = {
    boxed: paragraph.field_boxed.value,
    component_achtergrond: paragraph.field_component_achtergrond.value|replace({' ': '_'}),
    tekst:content.field_tekst,
    afbeelding:content.field_afbeelding,
    afbeelding_url: file_url(content.field_afbeelding['#items'].entity.uri.value),
    uitlijning_kolommen: paragraph.field_uitlijning_kolommen.value|replace({' ': '_'}),
    breedste_kolom: paragraph.field_breedste_kolom.value|replace({' ': '_'}),
  }
%}

{% set afbeelding_style_background = "style=background-image:url(#{c2a.afbeelding_url});background-size:cover" %}

<div class="component c2a">
  <div class="{{ c2a.boxed ? '' : c2a.component_achtergrond }}">
    <div class="container" {{ c2a.uitlijning_kolommen == 'visual_background' ? afbeelding_style_background}}>
      <div class="{{ c2a.boxed ? 'box ' ~ c2a.component_achtergrond : '' }}">

        <div class="flexbox {{ c2a.breedste_kolom }} {{ c2a.uitlijning_kolommen }}">

          {% if c2a.uitlijning_kolommen != 'visual_background' %}
            <div class="visual">{{ c2a.afbeelding }}</div>
          {% endif %}

          <div class="descriptor">{{ c2a.tekst }}</div>
        </div>

      </div>
    </div>
  </div>
</div>
0
kevinius