Cannot link media using absolute or relative URLs

Hello. From Grav Documentation - Image Linking I read that it should be possible to traverse up from page folder into another folder either using slugs or folder names to reference media files. Another option is to use absolute URL starting from pages folders. I am trying to do that in a twig template, however neither method works and I am only able to reference images from the page folder.

When seeking solution, I found some discussion on Media Site on Grav, where there is a suggestion to use page.find("whetever/url"). Is this the way to go? Why I am unable to do it like the Doc says? Or is it supposed to work not in a twig template, but only when referencing from a markdown file?

Thanks for support :slight_smile:

If you can zip up your entire site (put it on dropbox/googledrive/etc) and point me to the page where your having the trouble I can have a better look. I really need to see your site structure to see why your having trouble with the linking.

Basically there is a custom theme, a page using dog template. Within, there is a debug statement, that returns null. From documentation, that should have returned something.

i’ll take a quick look…

Ok, sorted it for you:

  1. Your images folder was not in pages structure so i moved it into user/pages/
  2. Your imagelin: header variable had the page path and the media file, i changed this to just the media file:
imagelink: "sobboriko-zhizelle.jpeg"
  1. You were tyring to find a page called images/sobboriko-zhizelle.jpeg which of course, did not exist. I changed this to:
{{ page.find('/images').media[].html() }}

So it finds the images page (now successfully), then looks in the media of that page and finds the image file (now just sobboriko-zhizelle.jpeg) then outputs the html.

Now it’s working fine :slight_smile:

I Zipped up my local copy too incase you want to use this:

Wow, what a qucik response - thanks.

I get the logic, thanks. However I have an issue here - what if I want to have subfolders underneath images, because loads of images should be stored and I want to group them so that it would be more easily to manage. Because it is a subfolder, it is a different page and page.find will return null.

Is there a way to provide imagelink: "/images/folderA/imagea.jpeg" for one dog page and imagelink: "/images/folderB/imageb.jpeg" for the other and let the twig template lookup the image based on the path?

Well you have lots of options really:

  1. add another header variable for imagepage like:
imagepage: "/images/folderA"
imagelink: "imagea.jpeg"

Then combine those two in the template:

{{ page.find('[].html() }}
  1. You can simply use the markdown for the image plus text in the body of the .md file:

The support for page and link URLs is actually contained within the markdown link trait, so to use that built-in functionality where it finds the page and image automatically, you need to do it from markdown. The way you had it and the way I fixed it, was in Twig, and that can be done, but its not automatic

Okay, I understand. Thanks for your time.