Twig function to find and replace Obsidian image link syntax
rafic20 opened this issue · 2 comments
Hi, I'm using the markdown app Obsidian as a front-end for my web site content. Obsidian is pointed to my content
folder in my Pico setup. Any MD files I create in Obsidian with YAML are immediately viewable in a browser. I am using the standard folder structure in Pico.
The issue I have is that there is a slight difference in how Obsidian handles image markup vs Pico:
Pico Image link
![Image Title](%assets_url%/image.png)
Obsidian
![](assets/image.png)
If I try to load a web page, the image doesn't load because it's not using %assets_url%
variable, and Pico thinks the image is located at content/subfolder/assets/image.png
Is there a Twig function I can use to find the following string in my pages:
![[assets/
and replace it with:
![[%assets_url%/
That would solve my linking issue.
Thanks very much!
Yes, try Pico's url
Twig filter, e.g. {{ meta.image|url }}
.
As an alternative you could also add a <base>
HTML tag (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) to your base template to tell your webbrowser how it should handle relative URLs like assets/image.png
.
Thanks for your response!
I tried this in my header.twig
and it worked!
<base href="http://localhost:8888/pico-mysite/" target="_self">
I can now see ObsidianMD image links that are inline in my MD file.
I thought about adding all the inline image links to meta.imgOne, meta.imgTwo
fields in the YAML, and displaying them with inline markup %meta.*% -
, but that was a bit of a hassle, as I don't think Pico supports nested YAML.
Thanks for your help!