Image markdown not working in custom field

[educedesign]

Hi,

I have an issue displaying an image through a custom field. I am using the following markdown in a custom field of a modular page and it shows up as a broken link on my website:

[![Alt Text](UseCase1.png)](http://www.google.ca?target=_blank)

Using the browser's inspect mode I can see that it tries to fetch the image from the root directory, i.e. localhost/cytapex/UseCase1.png.

However, when I am using the same code in the pages default content field, Grav looks into the page folder where the image is located and as a result, displays is without an issue. Do I need to specify anything in my page blueprint for the custom field to look into the page folder for media instead of the root? Code for the page blueprint is below.

title: Use Cases #Create new tab blueprint called Use Cases
'@extends':
  type: default #it extends the default blueprint

form:
  fields:
    tabs:
      type: tabs #Type is a tab
      active: 1

      fields:
        gallery:
          type: tab
          title: Use Cases #Set the title of the tab to 'Use Cases'

          fields:
            header.usecases:
              type: list #Create a list
              label: Case Study #called 'Use Case'
              fields: #declare the fields for each list item
                .title: #name
                  type: text #is of the type text
                  label: Case Study Title #called 'Use Case Title'
                .intro: #description
                  type: editor #textarea is a text editor
                  label: Case Study Introduction (~65 words) #called 'Use Case Introduction'
                .desc:
                  type: editor #this is a text editor
                  label: Case Study Description #called 'Use Case Description'
                .featured: #images
                  type: filepicker #allows you to select a file
                  folder: 'self@'
                  label: Select a feature image
                  preview_images: true
                  accept:
                    - .png
                    - .jpg
                    - .jpeg

And finally I am using {{ usecase.desc|markdown }} in my front matter to display the content of the custom field.

[educedesign]

I forgot to mention that any other markdown (e.g. headings, links, etc.) work fine in the custom field. The issue is just that the custom field looks in the wrong folder for the image (or I am missing a setting to specify just that).

[rhukster]

The problem is that you are processing the markdown in the twig template, outside of the page context. Usually links in markdown are parsed automatically when you call content() on a page, and then you are in the context of the page, so it knows exactly what page you are referring to and the logic looks in that page's folder to see if the image name matches. Because you are doing this in a custom field, the field's twig is rendering outside this context, and therefore the page location is not known. Fields can be used anywhere, configuration, plugins, themes, etc, so it's not assumed it's a page.

We have actually refactored the markdown processing a little since the last Grav release, and now it looks for Grav's page context. Can you please try the latest Grav version from GitHub develop branch and see if that resolves your issue?

[educedesign]

Because you are doing this in a custom field, the field's twig is rendering outside this context, and therefore the page location is not known. Fields can be used anywhere, configuration, plugins, themes, etc, so it's not assumed it's a page.

Ah, I see. That makes sense.

We have actually refactored the markdown processing a little since the last Grav release, and now it looks for Grav's page context. Can you please try the latest Grav version from GitHub develop branch and see if that resolves your issue?

I just tried installing the latest grav-develop version and then copied my user, theme and pages to that folder. Unfortunately, it is not working. It still tries to pull the image from the root directory.

Could it be because the theme I'm building pulls together content from several modular pages? And are there any quick workarounds to successfully pull the image (besides a direct URL)?

[educedesign]

Hi. Are there any updates on this? We are trying to use Grav for the website of one of our clients and having to use direct URLs to link images (or any media files) is quite inconvenient. Happy to provide further feedback or test other develop-versions if available.

[mahagr]

As a workaround, you can also use any of Grav streams, like theme://, though with pages there's no automatic path resolving.