Repeater in Repeater Tailor Twig

Need Help
#1

Hello everyone!

I have a problem with my twig knowledge.

I have a nested repeater inside a tailor setup. I am not able to solve my problem with google.

My repeater of images is in a repeater and i am not able to output the content of the second repeater.

This is my code

{% for contentrepeater in block.contentrepeaters %}
        <div class="uk-grid-large uk-grid-margin-large" data-uk-grid>
            <div class="uk-width-1-2@m">
                <div class="uk-margin">
                    {% if images.imagerepeaters %}
                    {% for images in imagerepeaters %}
                    <img class="el-image" alt="{{ images.imagesAlt }}" src="{{ images.images|media }}" data-sizes="(min-width: 900px) 900px" data-width="900" data-height="588" loading="lazy">
                    {% endfor %}
                    {% else %}
                    It is not working?
                    {% endif %}
                </div>
            </div>
            <div class="uk-width-1-2@m">
                <h2 class="uk-h3 uk-heading-line">
                    <span>{{ contentrepeater.headline }}</span>
                </h2>
                <p class="uk-text-meta">{{ contentrepeater.subheadline }}</p>
                <div class="uk-panel uk-margin">
                    {{ contentrepeater.textarea|md }}
                </div>
            </div>
        </div>
        {% endfor %}

Every works fine in the first repeater. But no images are shown from the second repeater.
May someone can help me out!

Thanks in advance

#2

Instead of {% if images.imagerepeaters %}

Try {% if images.imagerepeaters|length %}

1 Like
#3

thanks for your help, but that doesn’t work too.

It seems that the second repeater in the repeater is not working.

#4

Just caught it. So you’re referencing the images field, but it’s inside the repeater. Should be contentrepeaters.images.imagesrepeater or something along the lines of that

#5

Can you share your blueprint file or field definitions?

#6

I now get it work. This is my markup for twig:

{% for images in contentrepeater.imagesrepeaters %}
<li class="uk-width-3-4">
   <div class="uk-panel">
     <img class="el-image" alt="{{ images.imageAlt }}" src="{{ images.image|media }}" data-sizes="(min-width: 900px)900px" data-width="900" data-height="588" loading="lazy">
   </div>
</li>
{% endfor %}

My blueprint looks like this:

uuid: 341e9e03-f773-4f10-bb0a-b0407c43e123
handle: Blocks\ConsultingContent
type: mixin
name: Consulting Content

fields:
    contentrepeaters:
        type: repeater
        titleFrom: title_when_collapsed
        itemsExpanded: false
        form:
            fields:
                imagesrepeaters:
                    type: repeater
                    titleFrom: title_when_collapsedd
                    itemsExpanded: true
                    form:
                        fields:
                            image:
                                label: Bild
                                type: mediafinder
                                mode: image
                                maxItem: 1
                                required: true
                                span: left
                            imageAlt:
                                label: Bildbeschreibung
                                type: text
                                span: right
                headline: 
                    label: Ăśberschrift
                    type: text
                    span: left
                subheadline:
                    label: Zusatztext
                    comment: Wird unterhalb der Ăśberschrift als kleiner Text angezeigt.
                    type: text
                    span: left
                subheadline_switch:
                    label: Zusatz anzeigen?
                    type: switch
                    default: true
                    span: left
                textarea:
                    label: Text
                    type: richeditor
                    size: large

What i still don’t get is how can I loop through the repeater. For example if there is one image in the second repeater and in one repeater are two images. What if I want to have different markups for one and two or more images?

Thank you for your help

#7

What I would suggest is using the fileupload form widget. I think this would allow you to get different markups for the images. Here’s an example:

images:
    label: Bild
    type: fileupload
    mode: image
    required: true
    span: left

The reason why I suggest this is because each image that you upload to that would have it’s own alt, and title. You can click the uploaded file and add that there. You would just have to change your markup to display that content.

{% for images in contentrepeaters.imagerepeaters %}
    {% for image in images %}
        <img alt="{{ image.title ~ ' ' ~ image.description }}" src="{{ image.path }}">
    {% endfor %}
{% endfor %}

The above may not fit your setup, but could help with content stuff and simplify things a bit.

If you want to continue using the markup that you have now, the blueprint you’re using has an error. Change maxItem: 1 to maxItems: 1

1 Like
#8

This is a good idea!

I will try it this way!

Thanks for your help!

1 Like