Unsure how to display a file (image) that has been uploaded

Archive
1

I have created a member.yaml and member.html.twig file with some basic text fields like name and age which I am able to print out on the front end by looping over the following which is working fine:

—html

{{ member.name }}

{{ member.age}}

```

I want to now be able to uploaded an image per member using the field type of “file” not the standard page media as the examples I have seen so far require the user to type the file name into the image field which isn’t user friendly. When I use the field type “file” and upload an image I can see it being saved into the /users folder in the right place but I don’t understand how to print it out.

I have tried following the same syntax as printing out normal text fields but it doesn’t work e.g.

—html

{{ member.image }}

```

What I have noticed is the structure is different for the file upload in the group.md file in the users folder:

—html
title: Group
members:
-
name: 'Bob Smith’
age: '20’
image:
user/pages/01.home/_group/IMG_3850.JPG:
name: IMG_3850.JPG
type: image/jpeg
size: 1142286
path: user/pages/01.home/_group/IMG_3850.JPG


I haven't been able to find anything in the Grav doc about how to do this but I could be misunderstanding how the file upload field is supposed to be used.
2

If you upload a file into a ‘page’ then it should be available as a media file, just like any other:

{{ page.media['IMG_3850.JPG'].html }}
3

It’s a modular page so I can’t called the image out by its actual name, it needs to be dynamically done.

Each member has an image attached to it and an unlimited number of members could be added to the page via the admin screen.

4

How do you know which image to display then? Or do you want to display them all? If so simply loop over page.media.imagesand display them. Simply example.

5

Thanks @rhukster that example got me on the right track, each image belongs to a member, and there could be an unlimited members added via the admin page.

The solution was a loop within a loop as I needed a specific image to be linked with a specific member.

member.yaml

title: Members
'@extends':
    type: default

form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        members:
          type: tab
          title: Members
          fields:
            header.members:
              name: members 
              type: list
              label: Members
              fields:
                .name:
                  type: text
                  label: Name
                  help: Member's name.
                .image:
                  type: file
                  label: Image
                  multiple: false
                  destination: 'self@'
                  random_name: false
                  avoid_overwriting: false
                  limit: 10
                  filesize: 5
                  accept:
                    - image/*

member.html.twig

<div class="members">
  <h1>{{ page.title }}</h1>  
  {# loop over each member #}
  {% for member in page.header.members %}
    <div class="member">
      <h2>{{ member.name }}</h2>
      <h3>{{ member.position }}</h3>      
      {# loop over each member specific image #}
      {% for image in member.image %}
         {{ page.media[image.name].cropZoom(600,600).quality(100).html() }}
      {% endfor %}      
    </div>
  {% endfor %}
</div>
---
6

This is pretty much what I’ve been looking for. I’ll test it tomorrow as well :slight_smile: thanks for this little loop. I assume it can be printed as a link with an image inside, no?

7

It’s working for I wanted to do. Thanks a lot @steroyle for this little trick