This is what I have:
I have three twig files:
- block--paragraph-images.html.twig (which extends block.html.twig)
- field--field-paragraph-image-block.html.twig (the paragraph field which is located in the custom block type, block--paragraph-images.html.twig.)
- paragraph--field-paragraph-image.html.twig (which houses three fields: field_paragraph_image, field_paragraph_title, and field_paragraph_text).
I can access the individual fields in the paragraph--field-paragraph-image.html.twig from the block--paragraph-images.html.twig, but it only shows the first entry. I need to loop through the paragraph fields in the field--field-paragraph-image-block.html.twig. I'm trying to execute everything from the block--paragraph-images.html.twig to keep the files more manageable. Is this doable?
What I have below only shows the first index in the array. If I uncomment the loop statement, it shows around 12 each of the first index in the array. What I need is each paragraph index to show only once in a grid.
0, image, title, text
1, image, title, text
2, image, title, text
Any help and direction is appreciated.
{% block content %}
{# block fields #}
{% set paragraph_count = content.field_paragraph_image_block['#items']|length %}
{% set paragraph_count_css = 'grid-cols-' ~ paragraph_count %}
{# paragraph fields #}
{% set paragraph_title = content.field_paragraph_image_block.0["#paragraph"].field_paragraph_title.value %}
{% set paragraph_text = content.field_paragraph_image_block.0["#paragraph"].field_paragraph_text.value %}
{% set media_id = content.field_paragraph_image_block.0["#paragraph"].field_paragraph_image.target_id %}
<div class="block__content image-paragraph mb-0 grid gap-4 {{ paragraph_count_css }} " >
{% set paragraph_classes = [
'paragraph-image-effect',
'image-count-' ~ paragraph_count,
] | sort | join(' ') | trim %}
{# {% for item in content.field_paragraph_image_block %} #}
<div class="{{ paragraph_classes }}">
{{ drupal_entity('media', media_id) }}
{{ paragraph_title }}
{{ paragraph_text }}
</div>
{# {% endfor %} #}
</div>
{% endblock %}