secure-77 / Perlite

A web-based markdown viewer optimized for Obsidian

Home Page:https://perlite.secure77.de/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support image alt text

nesati opened this issue · comments

commented

Is your feature request related to a problem? Please describe.

Images in this format work in obsidian but not in perlite (they get rendered as links to the image file).

![[image.png|Description of the image contents]]

As far as I can tell there is currently no way to add alternative text for images. Apart from being useful for machine reading or accessibility, they can be implemented as image captions (e.g. in discordian).

Describe the solution you'd like

I would like the images to at least get rendered as images or this format to be supported:

![[filename.png|caption|size]]

Describe alternatives you've considered

obsidian_image_caption uses " as the caption delimiter:

![[my_amazing_image.png|50x50 "Look at my caption ma!"]]

Additional context

https://forum.obsidian.md/t/adding-caption-to-images/16431

This is really useful as the link converter im using also adds the old md link name as a caption and thus the image do not render. It would be a nice feature.

To remove all existing embed picture captions one might use find to select all md files from the current folder tree and replace all ![[abc|def]] occurrences with ![[abc]]:

find . -type f -name '*.md' | while read i; do sed -i -r 's/\!\[\[(.*?)\|.*?\]\]/\!\[\[\1\]\]/g' $i; done

I added some more regex magic, in the next release you can use the following syntax to provide both, image alt text and size attributes for your embedded images.

Image with size and description

![[docs/Pasted image 202401101247081.png|Description of the image contents|100x100]]

will render as

<img class="images" width="100" height="100" alt="Description of the image content|" src="Demo/Demo Documents/docs/Pasted image 202401101247081.png">

Image with description only

![[docs/Pasted image 202401101247081.png|Description of the image content]]

will render as

<img class="images" alt="Description of the image contents" src="Demo/Demo Documents/docs/Pasted image 202401101247081.png">

Image with size only

![[docs/Pasted image 202401101247081.png|100x100]]

will render as

<img class="images" width="100" height="100" alt="image not found" src="Demo/Demo Documents/docs/Pasted image 202401101247081.png">

fixed / implemented in 1.5.8