Support generating image link as <img...> format instead of markdown

Features
1

Hi all,

I am using the Electron client of Joplin on Linux.

At the moment, when pasting an image to Joplin form the clipboard or when linking it from a file, the generated tag is a valid markdown similar to

![Some text](:/a8060c008321412a8eb9fb244a3a8e01)

However, as discussed in Resize images , there is no support for image UI resize with that format. A workaround, which I apply systematically (and manually) to all images I paste in my notes is to rewrite the link as an html link, which supports a width parameter:

<img src=":/a8060c008321412a8eb9fb244a3a8e01" width="500" />

Suggestion: how about having Joplin generate image link directly as an html <img ... instead of pure markdown, since that format has the advantage of supporting resize ? Or maybe making that behaviour possible through configuration? Maybe the width could default to some value specified in config, or would always be initialized to the the physical image size or something. We would also leave the height blank, s.t. the image ratio would be kept.

I am a developer, although somewhat ignorant of javascript. If you like the suggestion I’m happy to contribute to the implementation. If I read the 3 files below correctly if would be about letting markdownTag() in Resource.js generate <img html links for images.

What do you think ?



2

I think this was discussed before, but I can’t recall what the conclusion was.

If it were possible by using a markdown plugin, I believe Laurent would accept a PR. @laurent do you remember the previous disussion?

3

Hi,

I could find previous discussions about images, though, not specifically about generating <img elements directly.

I don't mind looking into trying to do this with a markdown plugin. Please let me know if you think it's a good idea and I'll start coding :slight_smile:

4

Since Joplin uses React for a good bit of its code base and that looks like it supports what @sv3ndk, is there anyway to implement React directly into the Markdown here to give more flexibility and whatnot?

5

There are some markdown versions that allow to specify the dimensions. This is not standard. But, if there was a markdown-it-enhanced-img or something, we could easily add it to Joplin.

Some allow something like:

![pic](https://example.com/pic.jpg =150x100)       
![pic](https://example.com/pic.jpg =150x)       # height not necessary, will be calculated

See also this article:

6

Would support this wholeheartedly, though I am ignorant as to how this can be implemented into Joplin code.

I am currently reformatting ALL my screenshots manually, which is essential for me because in that way, I have control over preview size in the right pane.

Cheers,

Carsten

7

I was just going to open the same topic, as I came to the same conclusion as @sv3ndk, manual re-writing of each image in longer documents with a lot of figures can get tedious very quickly.
Are there any news on this front?

3 Likes
8

I have a similar need. Hundreds of notes with dozens of images from different origins that I want to display uniformly.
At the moment I am copying the whole note markdown into an external editor and swapping

![bfddd0181b5004592464f08aee7bf10f.png](:/0fa24fc9f3a644e3a5a5258340ac8bab)

with

<!-- ![bfddd0181b5004592464f08aee7bf10f.png](:/0fa24fc9f3a644e3a5a5258340ac8bab)  -->
<img src=":/0fa24fc9f3a644e3a5a5258340ac8bab" width=500>

(trying to keep original image ref just in case)

Many of my images are pasted from the clipboard using Ctrl-V (not Edit / Attach File)
The above works but is really tedious. I wonder if there could be a way to have some default options to allow importing / pasting images with html and specifiying default size.