Media in Twig template

It seems like no matter what I do (and how I adjust the paths), I can’t get
{{ media[‘sample-image.jpg’].cropZoom(300, 200).html() }}
to work in my Twig templates. Any idea what could be wrong?

P.S. I’m running the latest version, 0.96.

Ok, first thing is you should use {{ }}, not ``{{ media… }}` Maybe yours was a typo, if so…

Second thing, and maybe a silly one, but are you sure you have a file called sample-image.jpg in the same directory as this page’s .md file?

Oh! Thanks. I was following the docs at which just have {{ media…

Also, is there no way to resize and cache an arbitrary image?
Nothing like {{ media[’/static/img/sample.jpg’].resize(300).url }} will work?

For example, I have a static folder with about 300 photos… I’d like to run programmatically over metadata in a page header and resize from there.

…and then when I do it the way you suggest, resize isn’t working per the docs, e.g.:

{{[‘cameraartscover.jpg’].resize(300,364,background=‘0x262626’).url }}

I will go back and review/update the docs, it seems they are in error.

You can easily create an arbitrary image folder such as user/pages/static-images and then you can access it’s media via something like:

{{ pages.find('/static-images').media['sample.jpg'].cropResize(300,300).url }}

Resize fills in the blank space with a background color. That background color is optional, and you don’t actually specify it with background, just the hex value, it should be like: resize(300,200,0x1D92C3) or even resize(300,200), and the background will default to white.

A better option is cropResize as it resizes within a given size and keeps the image proportions so there is no extra space in the image.

{{[cameraartscover.jpg'].cropResize(300,364) }}

Thank you! This is very helpful.

I spent a couple hours trying to get the docs to work… Really enjoying Grav though – hits the sweet spot for me.

Looks like the color value needs to be quoted:
instead of .resize(300,394,0x990000)

You are correct! I’m going to go through the media section and fix it up. It’s not been updated in a while and need clearer directions.

This seems to require images to be under /user/pages/ – any way to do this with an arbitrary directory?

Not if you want to have access to the media functions, as those are specific to Grav pages.

one option is to softlink media files from distant to local directory. have fun!

This is what I ended up doing… using symbolic links. I also symlinked pages/, config/ and templates/ so I didn’t have to drill down to subdirectories as much.