Displaying image file from blueprints file field

Started by Muut Archive 10 years ago · 8 replies · 739 views

10 years ago

I have declared following custom field in themes blueprint:

YAML

header.object_photos:
              name: photos
              type: list
              label: Photos
              fields:
                .custom_file:
                  type: file
                  label: Photo
                  multiple: false
                  destination: 'self@'
                  random_name: false
                  avoid_overwriting: false
                  filesize: 50
                  accept:
                    - image/*
                .description:
                  type: text
                  label: Description

And I'm trying to loop trough that list, to display image and description in my template. Description works nicely, but I'm havind trouble with image:

TWIG

{% if page.header.object_photos %}                     
   {% for image in page.header.object_photos %}
      {{ image.custom_file.cropResize(500, 70).html() }}
      {{ image.description }}
   {% endfor %}
{% endif %}

When I look at my page's markdown file, then there I have picture files path.

YAML


object_photos:
    -
        description: Test1
        custom_file:
            user/pages/01.Kodu/korterelamu-roosikrantsi-8b/roosikrantsi.jpg:
                name: roosikrantsi.jpg
                type: image/jpeg
                size: 2467042
                path: user/pages/01.Kodu/korterelamu-roosikrantsi-8b/roosikrantsi.jpg
---

10 years ago

I think you need to get the image from the page media:

TWIG


{% if page.header.object_photos %}                     
   {% for image in page.header.object_photos %}
      {{ page.media[image.custom_file].cropResize(500, 70).html() }}
      {{ image.description }}
   {% endfor %}
{% endif %}
---

10 years ago

Thanks! Description part seems to work, but i'm getting an error for:

TWIG

{{ page.media[image.custom_file].cropResize(500, 70).html() }}

An exception has been thrown during the rendering of a template ("Illegal offset type in isset or empty") in "partials/base.html.twig" at line 158.

Seems like media[] needs quotation marks inside the squared brackets?

10 years ago

try dumping the file to make sure the filename is as expected:

TWIG

{{ dump(image.custom_file) }}

Then make sure that filename exists on this page. I think you are getting null or "" for that value though, hence the illegal offset.

10 years ago

@rhukster – Tried dumping custom_file. And result was null like you said.
How should I fix it?

10 years ago

Mhm, not sure right now if it works, but try:

TWIG


{{ dump(image.custom_file|first) }}
---

10 years ago

@ponderboy – nope. I'm getting ""
Is it working at all with images placed in lists?

10 years ago

I'd say yes. I don't have the time to dig into deeply. Another quick snippet from one of my partials:

TWIG


{% if page.header.object_photos %}                     
   {% for image in page.header.object_photos %}
      {% set file = image.custom_file|first %}
      {{ dump(file.name) }}
      {{ page.media[file.name].cropResize(500, 70).html() }}
      {{ image.description }}
   {% endfor %}
{% endif %}
---

9 years ago

Thanks man! Got this thing finally working.

Topic	Replies	Views	Activity
About the Archive category Archive · by Deleted User, 9 years ago	0	1350	9 years ago
Hey buddies! Archive · by Muut Archive, 9 years ago	2	935	9 years ago
There is a way to do a "if condition" in MD page? Archive · by Muut Archive, 9 years ago	2	4061	9 years ago
Official docker image of grav (+admin +gitsync) Archive · by Muut Archive, 9 years ago	1	2948	9 years ago
Weird Grav + caddy + iOS + https problem Archive · by Muut Archive, 9 years ago	3	1119	9 years ago

Suggested topics