Relative image paths with VSCode Markdown editor

1

Hey,

I’m editing Markdown files directly with Visual Studio Code with the drag and drop ability to add images to markdown. You can see more about it here: Visual Studio Code May 2023

I added a custom file path rule into my VS Code config $PROJECT/.vscode/settings.json:

  "markdown.copyFiles.destination": {
        "**/*": "${documentWorkspaceFolder}/assets/images/${documentBaseName}/"
   },

It then creates the the following addition into my markdown:

![Alt text](../../assets/images/hello-world/Screenshot.png)

How can I make these default relative paths work in the markdown content generated by Zola?

Is there a way for me to for example automatically remove the ../.../assets/ prefix from the urls?

2

Hmm. you might try shortcodes within the markdown section of the page.
GIve the fllowing a try. Ive used shortcodes but none with any logic. just plain ol html and variables.
That being said, <div {% if class %}class="{{class}}"{% endif %}> is an example on that shortcode page … so maybe

In templates/shortcode folder create file image_trim.html

{{ filename | trim_start_matches(pat="./.../assets/") }}
<img src="{{config.base_url}}/{{filename}}" alt="{{alt}}>

in page.md called the shortcode

+++
title=“XYZ”
weight = 1
+++
Here is my image
{{image_trim(filename=‘…/…/assets/images/hello-world/Screenshot.png’)