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

sv3ndk · 2020-01-11T13:53:56.661Z

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 ?

github.com

laurent22/joplin/blob/e674d7d23b7cd7924587e8cfe3bcc8e35829f593/ElectronClient/app/gui/NoteText.jsx#L174




				if (formatType === 'image') {
					if (event) event.preventDefault();


					const image = clipboard.readImage();


					const fileExt = mimeUtils.toFileExtension(format);
					const filePath = `${Setting.value('tempDir')}/${md5(Date.now())}.${fileExt}`;


					await shim.writeImageToFile(image, format, filePath);
					await this.commandAttachFile([filePath]);
					await shim.fsDriver().remove(filePath);
				}
			}
		};


		this.onEditorKeyDown_ = event => {
			const lastKeys = this.state.lastKeys.slice();
			lastKeys.push(event.key);
			while (lastKeys.length > 2) lastKeys.splice(0, 1);
			this.setState({ lastKeys: lastKeys });

github.com

laurent22/joplin/blob/611be7c0fa3c3026c752e658dba4a98201925fd6/ReactNativeClient/lib/shim-init-node.js#L119


						if (err) {
							reject(err);
						} else {
							resolve(info);
						}
					});
			});
		}
	};


	shim.createResourceFromPath = async function(filePath, defaultProps = null) {
		const readChunk = require('read-chunk');
		const imageType = require('image-type');


		const { uuid } = require('lib/uuid.js');
		const { basename, fileExtension, safeFileExtension } = require('lib/path-utils.js');


		if (!(await fs.pathExists(filePath))) throw new Error(_('Cannot access %s', filePath));


		defaultProps = defaultProps ? defaultProps : {};

github.com

laurent22/joplin/blob/611be7c0fa3c3026c752e658dba4a98201925fd6/ReactNativeClient/lib/models/Resource.js#L166


		} catch (error) {
			if (error.code === 'ENOENT') throw new JoplinError(`File not found:${error.toString()}`, 'fileNotFound');
			throw error;
		}


		const resourceCopy = Object.assign({}, resource);
		resourceCopy.encryption_blob_encrypted = 1;
		return { path: encryptedPath, resource: resourceCopy };
	}


	static markdownTag(resource) {
		let tagAlt = resource.alt ? resource.alt : resource.title;
		if (!tagAlt) tagAlt = '';
		let lines = [];
		if (Resource.isSupportedImageMimeType(resource.mime)) {
			lines.push('![');
			lines.push(markdownUtils.escapeLinkText(tagAlt));
			lines.push(`](:/${resource.id})`);
		} else {
			lines.push('[');
			lines.push(markdownUtils.escapeLinkText(tagAlt));

tessus · 2020-01-12T01:07:37.162Z

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?

sv3ndk · 2020-01-26T08:07:33.805Z

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

bedwardly-down · 2020-01-26T14:59:34.061Z

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?

tessus · 2020-01-27T01:20:20.769Z

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

How to Style Images With Markdown

This post presents a variety of ways to format images with Markdown, from brute force to proprietary syntax extensions, unwise hacks, and everything in between.

JetGum · 2020-07-24T11:06:16.991Z

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

Langosh · 2020-09-14T12:32:56.948Z

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?

rafap · 2021-05-17T09:07:03.404Z

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.

schlagmichdoch · 2024-07-15T17:10:19.525Z

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

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)

Daeraxa · 2024-07-15T20:14:44.835Z

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

schlagmichdoch · 2024-07-16T15:30:39.036Z

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:

github.com/laurent22/joplin

[Bug] HTML image height cannot be specified

opened 03:46PM - 16 Jul 24 UTC

schlagmichdoch

bug

### Operating system Linux ### Joplin version Joplin 3.0.1 3 (prod, linux) #…## Desktop version info Joplin 3.0.13 (prod, linux) Client ID: 7433847af5fe4e838bf0bba7d2fe7980 Sync Version: 3 Profile Version: 47 Keychain Supported: No Revision: 599cf5b Backup: 1.4.1 Conflict Resolution: 1.2.3 Ez Table: 1.0.2 Favorites: 1.3.2 Home Note: 2.0.0 Inline TODO: 1.7.1 joplin-hackmd: 2.0.0 Menu items, Shortcuts, Toolbar icons: 1.1.0 MultiMarkdown Table Tools: 1.2.1 Note list and sidebar toggle buttons: 1.0.3 Note overview: 1.7.1 Note Tabs: 1.4.0 Persistent Editor Layout: 2.2.0 Quick Links: 1.3.2 Rich Markdown: 0.15.0 Simple Highlighter: 1.0.0 Spoilers: 1.0.6 Table Formatter Plugin: 1.2.1 Templates: 2.4.0 Text Colorize: 1.2.5 ### Current behaviour To resize an image we have to use the html image syntax. While the `width` token works as expected, the `height` token is ignored. ``` ![Joplin logo](https://joplinapp.org/favicon.ico) <img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="200" height=""> <img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="100" height="200"> <img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="" height="200"> ``` Omitting the width or height token is equivalent to setting it to `auto`. So current Joplin behaviour: ![image](https://github.com/user-attachments/assets/3d53f11e-e063-4817-ae3d-0d7e7e2af482) ### Expected behaviour As the original image dimensions are 48x48, image 1 and image 3 should render the same. Image 2 should be stretched into a vertical rectangle. See GitHub render: ![Joplin logo](https://joplinapp.org/favicon.ico) <img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="200" height=""> <img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="100" height="200"> <img src="https://joplinapp.org/favicon.ico" alt="Joplin logo" width="" height="200"> ### Logs _No response_