0

I have a Paragraph type 'Call to action' with one link field field_link.

I have another Paragraph type where I call the 'Call to action' paragraph as an Entity reference revisions field. With Allowed number of values set to 2.

So the editor is able to insert two Call to action links.

I want to attach 2 specific CSS classes to both links:

On the first link:

<a href="" class="button-one">Button one</a>

On the second link:

<a href="" class="button-two">Button two</a>

How do I loop through, so I am able to attach different classes?

Update:

In paragraph--call-to-action.html.twig I added:

{% block paragraph %}

{% for item in content.field_link %} {% if loop.index == 1 %} Button one {% elseif loop.index == 2 %} Button two {% endif %} {% endfor %}

{% endblock paragraph %}

But now it's rendering always the 2 buttons? What's wrong here?

3 Answers 3

1

I figured how to loop through an entity reference field. Because I am looping from inside a paragraph twig through another paragraph (entity reference) I have to loop the children:

{% for item in content.field_name|children %}

So the children did the trick! Then you can do something like:

{% set link_class = loop.index == 1 ? 'primary' : 'secondary' %}
0

You are limiting the number of links via the Drupal UI, plus you don't have to style instance99 if you had more than two links.

I would keep it simple.

Twig:

{% for item in content.field_link %}
  <a href="" class="button instance{{ loop.index }}">
    Button one
  </a>
{% endfor %}

Styles:

a.button {
  background: #f3f3f3;
  color: #333;

  &.instance1 {
    color: #444;
  }

  &.instance2 {
    color: #555;
  }
}

Adding an additional class will provide better scalability as well.

0

You can create a custom twig template to the call to action paragraph type.

Some code like this might work:

{% for item in content.field_link %}
  {% if loop.index == 1 %}
    {% set class == 'button-one' %}
  {% elseif loop.index == 2 %}
    {% set class == 'button-two' %}
  {% endif %}
  <a class="{{ class }}" href="{{ item.url }}">{{ item.title }}</a>
{% endfor %}

When creating a for loop in twig you always have the loop.index available. Loop.index is 1 indexed thats why you have to check if index is 1 or 2.

5
  • If you only want the custom buttons some places you can maybe add a checkbox to the field, that you can check if you want custom fields, and then check for the field in twig.
    – user72672
    Jul 4, 2019 at 18:18
  • No this is not the case. It should be possible with an index or loop or something isn't it? I have a Paragraph type (Slide) where you can insert a Title, image and one, or two buttons! The buttons are the Entity reference revisions field from the Paragraph type Call to action (with one field field_link). The first link should get class="button-one" and the second button should get class="button-two"
    – meez
    Jul 4, 2019 at 18:24
  • I have updated my code, try that.
    – user72672
    Jul 4, 2019 at 18:31
  • Have you cleared cache?
    – user72672
    Jul 4, 2019 at 19:08
  • Let us continue this discussion in chat.
    – user72672
    Jul 4, 2019 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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