Render values directly in a twig paragraph template

Question

I'm working with the paragraph module and I've created a paragraph type called Image Teaser Block wich is an entity reference to a content type (Image Teaser, multiple references possible). This content type has 5 fields (Image, list, 2x text + link) and I'd like to render the values directly in the paragraphs template (paragraph--image-teser-block.html.twig).

What I could do is using {{content}} or {{content.field_image_teaser}} to render the HTML in the paragraph template and then change the field templates. But because I have many different paragraph types and each has a lot fields I would end up with tons of templates (imagine 10 different paragraphs with 6 fields each -> 60 different template files) and that's not really efficient to work.

So how can get the values (not rendered HTML) in the paragraph--image-teser-block.html.twig file like that:

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

I think the same issue applies also to content types wich are entity references to other content types.

Answer 1

I'm new to Drupal also and was trying to do the exact same thing. I simply put the machine name of the input I was trying to show in to the twig template i.e - {{ field_image_caption }} - flsuhed the cache and it magically appeared. Hope that helps.

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

Answer 2

One of the ways to do this is like this.

Collect all the values that you need and set it to a variable, then use that object in your twig template. Below is an example...

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