Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Image is not displaying from a list of images

Started by Shafqat 2 years ago · 9 replies · 171 views

2 years ago

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 %}

HTML

<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 years ago

You can try:

TWIG

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

2 years ago

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

YAML


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
    -

2 years ago

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

2 years ago

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

2 years ago

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?

2 years ago

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

YAML

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

last edited 07/30/24 by Pedro M

2 years ago

The path key is automatically added

2 years ago

sure

YAML

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

2 years ago

Try to:

TWIG

<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'):

YAML

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

Now your .md file would look like this:

YAML

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:

TWIG

{% 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 %}

Topic	Replies	Views	Activity
Well done Grav Team General · by Jerry Hunt, 3 days ago	2	70	5 hours ago
Grav 2, Admin Next, API and Migrate are now in production! General · by pamtbaau, 10 hours ago	1	45	10 hours ago
Welcome to the new Grav Forums! General · by Andy Miller, 22 hours ago	0	43	22 hours ago
How active is Grav? General · by Marcel, 12 months ago	6	341	4 days ago
Contents in bin folder delete itself during core updates General · by Duc , 5 days ago	3	35	5 days ago

Suggested topics