Displaying images from pages/images

Hello there,
I’ve been really excited to pick up Grav for my new project, however while browsing documentation i came across this note "If you want to put all your images in a single folder, you can put them in a user/pages/images folder. That way you can reach them via page.find(’/images’).media[‘my-image.jpg’] "

  • yet when I created this folder and used that line with twig {{}} in my template, the picture does not show up. My setup is just a simple out of the box Grav Core on Apache server running on Windows with Xampp. Can somebody help me out with this one, am I missing something obvious? I don’t really want to use any other method, this one should work. Thank you!

Hi, I’m pretty sure that here you are trying to display a (Medium) object rather than text you can see. If you add .html() to that, it should output something like an <img> tag.

If you want to see what you are getting when you try to output a Twig expression, try enabling the debug bar and console and then you can use (e.g.) {{ dump(page.find(’/images’).media[‘my-image.jpg’]) }} to see its value in the Console tab.

There are other properties and operations for the Medium object (like url()) if you want more control over the html markup.

Thanks for your reply!
I forgot to mention that i’ve already tried .html() - it didnt do the trick
Part from that i’ve tried to set debugger to enabled: true in system.yaml and it doesnt show up. Tried on linux this time, 777 permissions on everything.

It’s probably because you did not add an md file to your /pages folder. If you want to get the page object (which contain media) of another page, an md file is required.

This should solve your problem.

I’ve tried your solution and it didnt work.
Something must be wrong since even debug toolbar is not showing

Any more ideas? I’ve tried everything, markdown markup also does not display the image. The issue should be easy to reproduce since it already happened on two diferent machines with both Linux and Windows

@update I’ve managed to get Debug Toolbar working, for some reason Admin Panel settings override yml settings…
Anyway i’ve done dump() and got NULL…

Glad you got the debug toolbar working, couldn’t live without it :stuck_out_tongue:

Admin panel I think modifies your settings for your local environment (e.g. dev server only), rather than global settings (someone correct me if I am wrong!). That overrides global settings. I think that is a bit of a trap for new and intermediate users! That probably explains your difficulty. I just edit YAML since I worked that out, because I don’t like that system.

So if it’s dumping NULL, you just need to work on getting the right expression. Start with page.find(’/images’), and if that’s a Page object, try page.find(’/images’).media, page.find(’/images’).media|first etc. If it’s not a page object, there’s something up with your path or folder. Just keep tweaking and let us know how you go :slight_smile:

Thanks for help guys!
For me solution was simple - the new images folder had to be ROUTABLE…