Resize images

Does anyone know how to resize an imported image?
When an image is included in such that way, markdown code looks like this:

![](:/imageid)

I don’t know how to or if it is possible to resize those images. I tried to add things like
{:height="36px" width="36px"}
but they didn’t worked.

4 Likes

I don’t think this is possible with this version of markdown. You can use html, however.

Thanks for replying. I tried to use html but I don’t know exactly how to write the source location. I tried
<img src="/.resource/imageid" width="120" height="120">
but it does not work.

Are there other solutions than these to resize images (without the use of ‘div’)?

**External image**

<img style="width:200px; border: dashed lime 3px; padding: 1em; background: yellow" src="http://carifinonline.com/wp-content/uploads/2014/11/canstockphoto4906117-e1417378843917.jpg">

---

**Local Image with 'div' and 'style'**

<div style="width:200px; border: dashed lime 3px; padding: 1em; background: yellow">

![Fiat-logo-2006-1920x1080.png](:/87828bdc5576417eb08e70f0ff8efcf8)
</div>

---

**Local Image without style**

![Fiat-logo-2006-1920x1080.png](:/87828bdc5576417eb08e70f0ff8efcf8)

It's something I've been meaning to support for while so it will be in the next version :slight_smile: Then you'll be able to do:

<img src=":/a92ac34387ff467a8c839d201dcd39aa" width="50"/>

And customise the IMG tag any way you want.

3 Likes

Wouldn’t it be easier to allow the size attribute in markdown? It’s not a standard, but several markdown providers and processors support it.

2 Likes

That makes things more complex actually especially since it’s not standard. It’s simpler to just add support for the :/a92ac... URL format and that way any customisation can be done on the <img/> tag, including borders, padding, float, etc.

No, I meant simpler for the user. :wink:

Now the user has to use HTML instead of markdown. Anyway, I'm happy with the html change. Thanks.

2 Likes

It’d be nice to support Markdown image sizing too, as well as the <img /> tag! Something like:

![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)
![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png =250x250)

I wonder if it’s a configurable option in the parser/renderer.

2 Likes

@laurent is this Markdown image sizing a feature PR you’d accept? And if so, do you have any preference for how it’s implemented?

Yes I would, provided it’s possible to implement it in a reliable way. Before the TextInput component was too buggy, but it might have improved in recent version so it might be worth a try.

1 Like

Sweet! I’ll look into some possible implementations (after I wrap up the feedback on this existing PR: https://github.com/laurent22/joplin/pull/2099).

2 Likes

@devonzuegel, I mixed things up it seems. Above I was replying to this thread actually, so I’m fine with a PR for list continuation on mobile (that’s why I mentioned above the TextInput component).

However I’m less keen on non-standard Markdown properties for images because the more we add, the harder it becomes to parse it with a regular MD parser. For advanced markup like this, it’s possible simply to use the <img /> tag, which accepts CSS as well as width/height property. This is already what’s being used to import certain images with the Web Clipper.

Sorry for the confusion!

1 Like

Good point that <img width="100" height="50" /> covers the case just fine. It's not as elegant as ![](image.png | 100x50), but it gets the job done. Plus it's more compatible to stick with the standard img HTML tag, since "the more elegant way" may break on some Markdown readers. Your decision makes sense given the goals for the notes to be platform-agnostic (even though I would personally like this feature :nerd_face:).

I made some progress on this feature before your clarifying message. Since it's maybe an interesting example of how to build a markdown-it plugin, I opened the PR for posterity here (and then immediately closed it): Desktop: Resize images in Markdown by devonzuegel · Pull Request #2226 · laurent22/joplin · GitHub

Thanks, and indeed that could make a plugin. Images and attachments in general are more tricky to handle in Joplin because there’s some special parsing here and there to extract the resource IDs, so any new Markdown formatting we accept there will make maintenance of that code more and more complex. It’s less of an issue for all the other plugins because they funny require any new special code in the core.

Hey, setting width works, but setting (only) height should work as well.

It does? Normally it shouldn’t, and html should be used to set the width and height

Just wondering if maybe this option works right now?

I just test it on my MacOS:

The first 2 won't work unless someone writes a plugin. It's not valid markdown and therefore won't be added to the core (most likelly).

Can you please elaborate on how to write plugins for increasing the size of image.I am new to this , any link for the same would also help.

Thanks!