Lost image after filtering

Support
1

Hi. Has a parent page Sites. It contains child pages site_item (no modular). When loading the parent page everything is fine

3792732221
3792732221.jpg643×573 92.8 KB

But after filtering by category (top button), filtration occurs, but missing images.
2749284
As you can see, the title of the picture is visible (small letters).
Ie link in the html code there, but the kart is not being rendered!
Why is this possible?
Below is my code. Very long suffered, to display images from child pages added using blueprints.

                  {% for p in page.collection %}
                    <div class="collection-item-2 w-dyn-item w-col w-col-4">
                      <a class="project-wrapper style-2 add-shadow w-inline-block" href="{{ p.url }}">
                       <div>

                    {% for thumb_image in p.header.content.thumb %}
                          <img src="{{ thumb_image.path }}" alt="{{ p.title }}" title="{{ p.title }}">
                    {% endfor %}

                    </div>
                    <div class="project-content">
                      <h5 class="project-type"></h5>
                      <h3 class="project-title">{{ p.title }}</h3>
                    </div>
                    <div class="arrow-bottom uper"></div>
                  </a>
                </div>
              {% endfor %}

Tried to get a picture adaptive, but does not work:

                    {% for thumb_image in p.header.content.thumb %}
                      {{ p.media[thumb_image.name].derivatives(500,1600,300).sizes('(max-width: 479px) 87vw, (max-width: 767px) 92vw, (max-width: 991px) 94vw, 86vw').html(page.title, page.title) }}
                    {% endfor %}

{{ dump(thumb_image) }}

array:4 [
"name" =&gt; "sauna1-thumb.jpg"
"type" =&gt; "image/jpeg"
"size" =&gt; 198944
"path" =&gt; "user/themes/my/images/content/sauna1-thumb.jpg"
]
2

As I understand it, the goal is to get the parent page the data from .yaml child pages.
In this case, you need to bring thumbnail pictures from the field:

        header.content.thumb:
          type: file
          label: Превью
          destination: 'theme@:/images/content'
          accept:
            - image/*

And to do it right. If at all possible? I see a lot of limitations in Grav, regarding the use of content on other pages.

3

So solved the problem. If the images of the blueprints can not be a taxonomy, you need to use the main field for the images:

380298745
380298745.jpg696×832 64.2 KB

In this case, the first image is the main image, the second is the thumbnail.
Code output thumbnail images from the child page like this:

                  {% for p in page.collection %}
                   <div class="collection-item-2 w-dyn-item w-col w-col-4">
                     <a class="project-wrapper style-2 add-shadow w-inline-block" href="{{ p.url }}">
                    <div>
                    {% for image in p.media.images[1:] %}

                    	{{ image.derivatives(500,1600,300).sizes('(max-width: 479px) 91vw, (max-width: 767px) 95vw, (max-width: 991px) 47vw, 30vw)').html(page.title, page.title) }}
                   
                 	{% endfor %}
                    	
                    </div>
                    <div class="project-content">
                      <h5 class="project-type"></h5>
                      <h3 class="project-title">{{ p.title }}</h3>
                    </div>
                    <div class="arrow-bottom uper"></div>
                  </a>
                </div>
              {% endfor %}

Code output the main picture to show on a child page after clicking the link:

          {% for image_full in page.media.images[:1] %}

             {{ image_full.derivatives(500,1600,300).sizes('(max-width: 479px) 87vw, (max-width: 767px) 92vw, (max-width: 991px) 94vw, 86vw').html(page.title, page.title) }}
        
          {% endfor %}

And filtering works and the code is simple. But I’m still not satisfied with the output images from custom fields. Anyone have any thoughts on this?