my-notes icon indicating copy to clipboard operation
my-notes copied to clipboard

Published 20 hours ago • verified publisher icon penge

Ability to resize attached image

Open bhupesh-sf opened this issue 3 years ago • 5 comments

Right now we can give a link to the image and it appears on the page but I should be able to resize that image to match my note formatting. Images we use are generally high quality and appear very big on the page, making the whole note a little odd.

bhupesh-sf avatar May 03 '21 07:05 bhupesh-sf

Thank you for the suggestion.

Let's say you can drag image corner (cursor will change to resizing cursor – see Cursors), and you can then use the mouse to resize the image down, or up (up to original size).

Cursors: image image

Would that be fine?

penge avatar May 03 '21 11:05 penge

Yes it will work as long as I can resize all welcome :+1:

bhupesh-sf avatar May 03 '21 11:05 bhupesh-sf

This has been pushed quite a bit. We could achieve quite nice results if we add just option to modify pixel density. Not only we'll support Retina (or higher density) displays this way, but scaling picture in this precision (by half, by half, ...) could be enough. Edit: We still need to maintain aspect ratio, so this would make it easy. Edit 2: We now have RAW mode so any updates of this sort, are now easy and already possible.

penge avatar Jun 01 '22 22:06 penge

Didn't understand the RAW mode, can u explain?

bhupesh-sf avatar Jun 02 '22 05:06 bhupesh-sf

RAW mode allows to edit notes's HTML source and add any HTML or CSS. It can be also used to have plain text notes if no HTML is added. In the Toolbar, there is a new RAW button (with a tooltip Toggle RAW), to toggle the mode.

penge avatar Jun 02 '22 06:06 penge

@bhupesh-sf

Glad to anounce this feature will be released in the next version. Here's a preview:

https://github.com/penge/my-notes/assets/907255/5d4fcf3e-5551-465f-adce-be4c44fec9b8

How it works:

  1. Hold Ctrl (or Cmd) and move mouse over the image (order of these actions doesn't matter), move mouse wheel up and down (or use touchpad) to resize the image.
  2. Double-click on the image to restore its original size.

Note: You may see a blue border around the images on mouse over in the video. I have later removed this border because if we would like to select an image and copy-paste it, it was causing the pasted image to have the blue border permanently. Not using the blue border have resolved it.

penge avatar Dec 09 '23 02:12 penge