4

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.

  • 1
    I'm not sure about the paragraph module, but in normal content type templates it's as simple as {{ content.field_name }} have you tried using {{ dump() }} from the template to see what variables are available to you? – Matt Jul 26 '16 at 20:10
  • Yes, I know about that I can render a field with {{content.field_name}}. But this just renders the some HTML. One example: I have a field type of Link. This field type can have unlimited number of values. So I enter sth. like that: Url: example1.com Linktext: Link 1 Url: example2.com Linktext: Link 2 With {{content.field_link}} this would render to a-tags and I won't be able to access the URL or the Linktext directly. And dump or kint doesn't help because it's not working. – benandunt Jul 27 '16 at 5:26
  • It's difficult to theme fields on a higher level. There are some easy fields, like text fields, but images are the worst. The image render element at this stage has only some information about the image format and the image object itself. The values to render the image will be extracted from the object two or three levels deeper. – 4k4 Jul 27 '16 at 7:42
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>

  • It's no exactly what I mean. In my case the field can have multiple entries. – benandunt Aug 9 '16 at 14:03
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.