Attach different CSS classes to first and second link

Question

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?

Answer 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' %}

Answer 2

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.

Answer 3

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.