Images instead of icons in Features

Hi, in my features.yaml I replace icon filed to image

title: Features
'@extends': default

form:
  fields:
    tabs:
      fields:
        features:
          type: tab
          title: Features
          fields:
            header.class:
              type: select
              label: Layout
              default: small
              size: medium
              options:
                small: Small   = 4 / 3 / 2 columns
                standard: Standard  = 3 / 2 / 1 columns

            header.features:
              name: features
              type: list
              label: Features

              fields:
                .bimg:
                  type: file
                  label: Image
                .header:
                  type: text
                  label: Header
                .text:
                  type: text
                  label: Text
                .url:
                  type: text
                  label: Link

Now I try to echo images, but can`t. I have looked at the forum. Tried different solutions. But it is not possible to display images instead of icons. If I do like in this example, I get a 500 error
I found this example code

<div class="modular-row contact {{ page.header.class }}">
    <div class="g-grid pure-g-r">
        <div id="listing" class="g-block pure-u-2-3">
            {% include "forms/form.html.twig" %}
        </div>
        <div class="columns">
                {% for feature in page.header.features %}
                   <div class="column {{ columns }}">
                      {% if feature.url %}<a href="{{feature.url}}">{% endif %}
                      <div class="feature-icon">
{% if page.header.features %}                     
   {% for image in page.header.features %}
      {% set file = image.bimg|first %}
      {{ page.media[file.name].cropResize(500, 70).html()|raw }}
   {% endfor %}
{% endif %}
                         {{ feature.image.url|e }}
                         {% if feature.header %}
                            <h6>{{ feature.header }}</h6>
                         {% endif %}
                      </div>
                      {% if feature.url %}</a>{% endif %}
                      <div class="feature-content">
                         {% if feature.text %}
                         <p>{{ feature.text }}</p>
                         {% endif %}
                      </div>
                   </div>
                {% endfor %}
                </div>
    </div>
        </div>
    </div>
</div>

But it outputs all images for each block Features

@NataliaB, Format your Twig code properly and have a good look at it. It seems that while looping the features, the images are being looped…

Also please note a warning from the docs i’ve shown you before in post Create own modular template with custom fields - #8 by pamtbaau

The file field is intended to be used by configuration , theme , and plugins blueprints, NOT page blueprints . For pages, you should use the existing pagemedia field and then utilize the filepicker field to select the files.

Ok. I added like filepicker.

title: Features
'@extends': default

form:
  fields:
    tabs:
      fields:
        features:
          type: tab
          title: Features
          fields:
            header.class:
              type: select
              label: Layout
              default: small
              size: medium
              options:
                small: Small   = 4 / 3 / 2 columns
                standard: Standard  = 3 / 2 / 1 columns

            header.features:
              name: features
              type: list
              label: Features

              fields:
                .header:
                  type: text
                  label: Header
                .text:
                  type: text
                  label: Text
                .url:
                  type: text
                  label: Link
                .myimg:
                  type: filepicker
                  folder: 'self@'
                  label: Select a file
                  preview_images: true
                  accept:
                  - .png
                  - .jpg 
                  - .svg 

In Features tabs I selected images

Now my code look like this:

{% if feature.myimg %}					  
<img src=" {{ page.media.images[ feature.myimg ].url }} "/>
{% endif %}

Now its work. In discussion, a solution is born!
Many, many thanks! :pray: :pray: :pray: