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

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 ?



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?

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:

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?

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:

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

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

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.

I'd like to pick up on this discussion, as I'm also very interested in being able to resize my images via markdown. Currently I ressort to converting the markdown images into html img tags which is quite paintaking :confused:

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

I like that idea! I have taken a look at npmjs.com to find a suitable markdown-it plugin and apparently there is one: @tlylt/markdown-it-imsize - npm

It does exactly what we want. From the README:

![test](image.png =100x200)

is interpreted as

<p><img src="image.png" alt="test" width="100" height="200"></p>

I think the automatic calculation of height if omitted is not implemented yet but we could create an PR for that.

If the repository owner is not responsive, I would also offer to fork this repository and publish and updated version to npmjs.

(Beware that the repository link is wrongly going to the original project which is not working. Use the homepage link to take a look at the code or click here)

The problem is that the format you provided isn't part of a commonly used Markdown spec - Joplin follows (as closely as is practical) CommonMark with some GFM extensions which means implementing this would instantly make it non-portable.

It would probably be easier (and more portable) to use a plugin that can convert markdown image syntax to html syntax (not sure if one has already been made or not).

There is also an example plugin that already uses similar syntax to add image manipulation to markdown links - Joplin Plugins - Enhancement

I see, I'll leave that decision up to you.

Back to this issue:
It would be nice if there was a possibility to generate the html code when inserting an image instead of the markdown syntax. That way, it would be easy to specify and change the width and/or height.

The methods to do this might already be implemented:
An image link written in markdown syntax is transformed into the html syntax when we the WYSIWYG editor to change its size.

Alternative idea:
A Joplin plugin that checks the notes markdown for the image resize syntax discussed above and replaces it with the proper html syntax before rendering the note. That way, the image resize syntax would just be a shortcut for writing the html syntax.

This regex substitution should do the trick:
regex:

/!\[(?<alt>.*)\]\((?<link>\S*) =(?<width>\d*)?(x(?<height>\d*))?\)/g

substitution:

<img src="$<link>" alt="$<alt>" width="$<width>" height="$<height>">

Original:

![Joplin logo](https://joplinapp.org/favicon.ico)
![Joplin logo](https://joplinapp.org/favicon.ico =400)
![Joplin logo](https://joplinapp.org/favicon.ico =200x400)
![Joplin logo](https://joplinapp.org/favicon.ico =x350)

Result

![Joplin logo](https://joplinapp.org/favicon.ico)
<img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="400" height="">
<img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="200" height="400">
<img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="" height="350">

This way the markdown would stay portable but the user has the convenience of using the shortcut.

Sidenote: Apparently, setting the height via html is not supported in Joplin yet. I have created an separate issue for that: