Image is not displaying from a list of images

1

Hi, When i get image from page.media it shows images in alphabetically order which does not match the other information and also {{image.url|raw}} not working. When i try to get with this method it does not show image:

"> {% for team in teams.header.images %}

<div class="col-sm-6 col-lg-3 text-center mt-2">
    <img src="{{ team.url.path }}" class="img-fluid">
    <h3>{{ team.person_name }}</h3>
    <p>{{ team.role }}</p>
    <p>{{ team.person_description }}</p>
</div>

{% endfor %}"

2

You can try:

            {% set team_image = page.media[team.image] %}
            {{ team_image.html(team.name,team.name,'')|raw }}
3

Thanks for your time. It is not working.
By the way this is how my data is stored in frontmatter:


images:
    -
        person_name: 'Hamish McMurray'
        role: Director
        person_description: 'BMM’s Managing Director...'
        url:
            hamish_mcmurray.jpg:
                name: hamish_mcmurray.jpg
                type: image/jpeg
                size: 33663
                path: hamish_mcmurray.jpg
    -
        person_name: 'Trent Gouguard'
        role: Director
        person_description: 'As the Director of our organization....'
        url:
            trent_gouguard.jpg:
                name: trent_gouguard.jpg
                type: image/jpeg
                size: 31687
                path: trent_gouguard.jpg
    -
4

Did you come up with this structure yourself? No wonder it doesn’t work, because you can’t access team.url.path. It should probably be something like team.url['hamish_mcmurray.jpg'].path

5

Yes it works like that

page.media.images[‘hamish_mcmurray.jpg’].url

but when i try to access dynamically inside a loop it shows nothing:

page.media.images[‘team.url’].url

I have tried everything inside the brackets like team.url, team.path, team.url.path etc

6

In short, there’s no way to properly loop your frontmatter images and show them with the structure you have currently. Why do you need image path as the key in the URL?

7

Could you post the blueprint you are using to get this?:

person_name: 'Trent Gouguard'
        role: Director
        person_description: 'As the Director of our organization....'
        url:
            trent_gouguard.jpg:
                name: trent_gouguard.jpg
                type: image/jpeg
                size: 31687
                path: trent_gouguard.jpg
8

The path key is automatically added

9

sure

title: Teams
form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        content:
          type: tab
          title: Content
          fields:
            header.description:
              type: textarea
              label: Description
            header.images:
              name: images
              type: list
              label: Images
              fields:
                .person_name:
                  type: text
                  label: Person Name
                .role:
                  type: text
                  label: Role
                .person_description:
                  type: textarea
                  label: Person Description
                .url:
                  type: file
                  label: Image File
                  multiple: false
                  destination: "self@"
                .alt:
                  type: text
                  label: Alt Text
10

Try to:

<img src="{{ page.url }}/{{ (team.url|first).name }}" class="img-fluid">

Handling images via the file field is more complex than using filepicker or even pagemediaselect.

In my opinion, I would not use the word ‘url’ for the image, since it is used to call the path of the images. I propose the following.
First in your blueprint the following (change ‘url’ to ‘image’):

.image:
      type: filepicker
      folder: 'self@'
      label: Select a file
      preview_images: true
      accept:
        - .png
        - .jpg

Now your .md file would look like this:

title: Teams
body_classes: modular
description: 'Description'
images:
    -
        person_name: Pedro
        role: Developer
        person_description: 'Entusiasta de Grav'
        image: image.png
        alt: Alt description

Second, in your twig template the following:

{% for people in page.header.images %}
        {% set image =  page.media[people.image] %}
        <div class="col-sm-6 col-lg-3 text-center mt-2">
            <img src="{{ image.url|e }}" class="img-fluid">
            <h3>{{ people.person_name }}</h3>
            <p>{{ people.role }}</p>
            <p>{{ people.person_description }}</p>
        </div>
{% endfor %}
1 Like