Score:0

Alternate Paragraph row output in paragraphs.html.twig - output index

US flag
user110890

How do I alternate output specifically in the twig template paragraph.[myfield].html.twig? Is there any way to return the row id of a Paragraph row? My goal is to achieve something like

IF row index = 1
Show div X
IF row index = 2
Show div Y
IF row index = 3
Show div Z

...but am unsure how the for loop would look.

paragraph.[myfield].html.twig:

{#
/**
 * @file
 * Default theme implementation to display a paragraph.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
 *   - paragraph.id(): The paragraph ID.
 *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
 *   - paragraph.getOwnerId(): The user ID of the paragraph author.
 *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
 *   and methods for the paragraph object.
 * - content: All paragraph items. Use {{ content }} to print them all,
 *   or print a subset such as {{ content.field_example }}. Use
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - attributes: HTML attributes for the containing element.
 *   The attributes.class element may contain one or more of the following
 *   classes:
 *   - paragraphs: The current template type (also known as a "theming hook").
 *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
 *     "Image" it would result in "paragraphs--type--image". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
 *     preview would result in: "paragraphs--view-mode--preview", and
 *     default: "paragraphs--view-mode--default".
 * - view_mode: View mode; for example, "preview" or "full".
 * - logged_in: Flag for authenticated user status. Will be true when the
 *   current user is a logged-in member.
 * - is_admin: Flag for admin user status. Will be true when the current user
 *   is an administrator.
 *
 * @see template_preprocess_paragraph()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}


{% set paragraph_parent = paragraph.getParentEntity() %}
{% set layout = paragraph_parent.field_layout.0.value %}


 {% block paragraph %}
    {% block content %} 
      {% if layout == "1" %}
          <div class="col-md-6" style="border: 1px solid red;">
            {{ content.field_text_flex.0 }}
        </div>
      {% endif %}
  
      {% if layout == "2" %}
         {% for row in rows %}
          {% set isEven = loop.index % 2 == 0 %}
              {% if isEven %}
                  <div class="col-md-3" style="border: 1px solid red;">
                      {{ content.field_text_flex.0 }}
                  </div>
              {% else %}
                  <div class="col-md-9" style="border: 1px solid red;">
                      {{ content.field_text_flex.0 }}
                </div>
              {% endif %}
         {% endfor %}
       {% endif %}
    
    

    {% if layout == "3" %}
    <div class="col-md-4" style="border: 1px solid red;">
        {{ content.field_text_flex.0 }}4
    </div>
    {% endif %}
    

   {% endblock %}
   {% endblock paragraph %}
   
   
  
Chris Happy avatar
cg flag
Could you post `paragraph.[myfield].html.twig`?
Score:1
cg flag

Look at TWIG's loop.index special variable in the for loop documentation.

{% for row in rows %}
    {% set isEven = loop.index % 2 == 0 %}

    {% if isEven %}
       <!-- Is even -->
    {% else %}
       <!-- Is odd -->
    {% endif %}

{% endfor %}

You could also use:

{% set isEven = loop.index % 2 is same as(0) %}
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.