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 %}"
You can try:
{% set team_image = page.media[team.image] %}
{{ team_image.html(team.name,team.name,'')|raw }}
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
-
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
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
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?
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
The path key is automatically added
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
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 %}
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 2 | 306 | 3 weeks ago | ||
| 0 | 309 | 3 weeks ago | ||
| 0 | 263 | 3 weeks ago | ||
| 0 | 264 | 4 weeks ago | ||
| 2 | 335 | 1 month ago |