NOTE:
My coding knowledge is currently very limited. This plugin was created entirely with AI tools, and I may be limited in my ability to fix any issues.
NOTE:
The plugin no longer supports the legacy markdown editor, the last release that works with the legacy editor is v1.4.1 (jpl available on github)
Simple Image Resize
A Joplin plugin that provides a simple dialogue to switch image syntax between markdown/html and losslessly resize images (inside the markdown editor) by setting the width/height attributes.
NOTE:
To render HTML image embeds in the markdown editor (as seen in the above example), you can either enable "Markdown editor: Render images" under Tools | Options | Note (note that HTML images are only supported in Joplin 3.5.7 or newer) or use the "Rich Markdown" plugin and enable its option to render images.
How to use
In the markdown editor, right-click anywhere inside a markdown or HTML image embed and select "Resize Image" (or put your cursor inside the image embed and use the keyboard shortcut).
This will open a simple image resize dialogue, the following options are provided.
NOTE:
You need to put your cursor inside the image embed text (not on the rendered image itself)
NOTE:
On mobile/web you can put your cursor inside the image embed text and then open the dialog using the toolbar icon
Switch image syntax
You can switch the image syntax between markdown () and HTML (<img src=":/resourceId" alt="alt text" width="315" height="238" />).
External URLs are also supported ( and <img src="https://example.com/image.png" alt="alt text" width="315" height="238 />).
HTML Syntax is selected by default (and resizing is only supported using HTML syntax). You can switch to markdown syntax if you want to revert the image to a standard markdown image embed without a custom size.
Resize Image
With image syntax set to HTML, you can resize the image by Percentage (default) or Absolute size.
Enter the desired image size (in percentage or pixels) and click OK, and the plugin will automatically update the image embed with the new image syntax.
Quick Resize
You can quickly resize images to 25%, 50%, 75%, or 100% (original size) using keyboard shortcuts or the right-click context menu.
Settings
Default resize mode - You can choose if the default resize mode is Percentage or Absolute in the plugin settings (default is Percentage).
Default percentage - The default percentage value (1-100) when using percentage resize mode.
HTML syntax style - Include both width/height in HTML syntax (default, best compatibility when pasting images outside of Joplin) or width-only.
Display quick resize options in context menu - [Desktop Only] Show quick resize options (25%, 50%, 75%, 100%) in the right-click context menu.
Display copy image option in context menu - [Desktop Only] Display copy image option in context menu. Supported image formats: png, jpg, webp (not animated), avif (not animated), svg (rasterized to png).
NOTE:
The Joplin clipboard API only supports jpg and png formats, so webp, avif, and svg images are converted to png before being copied to the clipboard.
Default keyboard shortcuts:
Resize Image dialog (CmdOrCtrl+Shift+R)
Resize 100% (CmdOrCtrl+Shift+1)
Resize 75% (CmdOrCtrl+Shift+2)
Resize 50% (CmdOrCtrl+Shift+3)
Resize 25% (CmdOrCtrl+Shift+4)
Known issues
There are some issues with plugin dialogues (not specific to this plugin)
Show clear message when invoking command from rich text editor instead of cryptic error
add missing attributes to radio boxes, fixes issue where you couldn't toggle percentage/absolute size by clicking the text next to the box
Improve wording on info toast messages
dynamically register context menu, so context menu entry only shows in markdown editor context menu
preserve trailing whitespace, streamlines resizing images on their own line. Just double click to select the image (which sometimes selects the trailing newline in joplin) > resize image > paste and it will preserve the original trailing newline(s), if there were any in the original selection.
prevent accidentally pasting over other text after resizing if user accidentally included additional text in selection (and selection also contained a complete image embed). You will now see a toast message if (non-whitespace) text is included in selection in additional to a complete image embed
Allow resizing image embeds that reference external https URLs
Use Joplin imaging API to retrieve original image dimensions (better performance), but also implemented fallback to previous base64 method if it fails to retrieve valid dimensions
improve regex detection, allow selections containing title attribute which is supported by both markdown and img embeds
maintain title attribute (if present) when converting syntax
escape quotes/single quotes/less than/greater than in HTML attributes
Implemented cursor detection, you no longer need to manually select an entire image embed (though you still can), you can just right click anywhere inside an image embed to access the resize image option.
Clicking OK on resize image dialogue now directly updates the image syntax in the editor (instead of copying to clipboard)
I must be getting something wrong here. I tried this and it does not resize the image. It just adds width and height so it is rendered a different size. Go to another note where that image is used and the image hasn’t changed. To resize the image I have to (in the viewer) Right-click and “Open…” so it loads it into a paint app, resize it and then save it. What am I doing wrong?
This is the intended behavior, it's the same way that resizing an image in the rich text editor works (switching the image embed syntax to HTML and adding the width/height attributes)
I might be able to add a lossy resize option that resizes the actual image file (or perhaps a context menu option to open the resource in your preferred external editor), but it's not something I've looked into yet
Preview of new image dimensions when using percentage mode
Live preview of the other dimension (based on aspect ratio) when adjusting width or height in absolute size mode
Aspect ratio is now always locked when resizing with absolute size mode (rich markdown plugin, joplin markdown viewer, and joplin rich text editor always use auto-calculated height when displaying images so there doesn't seem to be any use in allowing resize without adhering to aspect ratio, and you wouldn't want squished/stretched images in any case)
v1.3.1
Removed remnants of old clipboard based workflow
Use typescript for dialogue script (compiled to js on build)
Great plugin! I had thought about creating such a plugin myself for a while but never had the time". Thanks a lot for creating it, it works really well!
Enhancement: Add possibility to bypass the dialog
Most often I want the resized image to be half its initial size (as screenshots captured in 4k are rendered 2x their size in Joplin ). To make the workflow even easier I would love to have one of two things:
When opening the dialog via the shortcut (CMD + ALT + I in my case), I should be able to confirm it by pressing Enter. Currently, I need to use the mouse or TAB to confirm
I would like to be able to transform the image syntax and resize the image to half its width in one go without dialog with another shortcut. Maybe the width could also be adjusted via a setting or there are multiple options like 1/2, 1/3, 1/4, 1/5 with one shortcut each.
Enhancement: Relative sizes
The html syntax of course allows for relative sizes. This might be a third option under Resizing (`width=”50%”`). Maybe as “Relative to page width: [ 50 ] %”
Enhancement: Add option or setting to omit the height parameter
When I had switched the syntax manually, I always only added the width parameter and omitted the height as it is not needed when you do not want to change the ratio of the image. This made it easier to change the image size later via the markdown editor as I only had to change the width without calculating the height again. Would it be possible to have an option or a setting to omit the height parameter when resizing the image?
Bug: Dialog opens multiple times
I just realized that currently the dialog can be opened multiple times. When I keep pressing the shortcut for some seconds, many dialogs are opened on top of each other and Joplin freezes for a bit. I guess either there needs to be a check if there is already an open dialog when the shortcut is triggered inside an embedded image or the cursor is blurred whenever the dialog opens to prevent the shortcut from being triggered again (as the editor would not be focussed anymore).
thanks for the feedback! my main use case is also resizing to 50% (4k display)
I've implemented most of this in v1.4.0:
Features
Added quick resize options allowing you to resize image to 25%, 50%, 75%, or 100% (back to original size/markdown syntax) without accessing dialog
quick resize can be triggered via context menu (if you enable "Display quick resize options in context menu") or via keyboard shortcuts
Default keyboard shortcuts:
Resize Image dialog (CmdOrCtrl+Shift+R)
Resize 100% (CmdOrCtrl+Shift+1)
Resize 75% (CmdOrCtrl+Shift+2)
Resize 50% (CmdOrCtrl+Shift+3)
Resize 25% (CmdOrCtrl+Shift+4)
Fixes
Fix issue where dialogue could be opened multiple times
Changes
Moved menu items to Tools menu (under a submenu)
Height is no longer included in the resized HTML syntax (it didn't serve any function, Joplin markdown viewer, rich text editor, and rich markdown plugin all ignore explicitly defined height attribute, and the plugin already enforced aspect ratio when resizing).
There's also a change so that hitting enter after opening dialogue should immediately activate the submit button (by adding button IDs per joplin plugin documentation: joplin.views.dialogs | Joplin Plugin API Documentation)
... but it's not working (potentially due to a plugin api bug), it doesn't seem to work for other plugin dialogs that I've tried either.
Wow, that was quick! Thanks for the fixes! Let’s see wether the dialog issue will be resolved as well. As you have added the quick resize via shortcuts I’m happy for now though.
If you want the improve further I guess a slider with a live preview of the resized image directly inside of the dialog would be sweet!
I ended up making the HTML syntax style optional, because having both width/height has better compatibility when copying the images and pasting them elsewhere (e.g. using my copy as html plugin to paste into an email).
In 1.4.1 there's now an HTML Syntax option: Width and height (default) or width-only
I haven't looked into mobile support, but I suspect it might require significant changes
I'm not sure if either of the methods I'm using to get the original image dimensions (used to calculate aspect ratio for percentage based resize and to display the updated width/height as you update them in the dialog) would be available on mobile (joplin imaging api with fallback to base64/dom probe for formats like webp that aren't supported by imaging api).
It may require simplified logic for mobile that doesn't depend on knowing the original image size (e.g. only allow entering a width/only output width) and a simplified dialog
EDIT: The existing fallback logic to use joplin.data.get and DOM probe for image dimensions might work on mobile, I'll need to run some tests
EDIT2: The bigger issue is that mobile doesn't appear to support getCursor (to detect the current line) and replaceRange.
Sadly, I it is not possible to install a plugin from a .jpl file manually on iOS so I have to wait for your full release to test it. (Plugins | Joplin)
). To make the workflow even easier I would love to have one of two things:
: 