After switching to Bear 2 for daily use, it’s a vast improvement except for one aspect: images. While the general image features are improved in Bear 2 (e.g., ability to resize images), the way pasting of images into notes currently works doesn’t match my use case.
I’m often copying images of screenshots or presentation slides into my notes during meetings. In Bear 1, these defaulted to thumbnail size, which was great. Now in Bear 2, I have to manually resize every image after I paste it into my note. Bear 2 seems to help match image resizing to adjacent images, which is helpful; however, two features that would greatly improve image-handling in Bear 2:
Feature Requests
Default image size: A preference to paste images as thumbnail by default or a “Make this my default image size” in the context menu for images to set a default paste size.
Resize multiple images: Make it easier to resize images in bulk – e.g., allow resizing of an image when multiple images are selected to set the size of all selected images. This would allow images in a note to be quickly changed to a “standard” size by selecting the whole note and resizing the first image.
While it would be great to have a way to convert all my images in existing notes to thumbnails, this is more of an artifact from transitioning to Bear 2 beta, so probably doesn’t warrant the effort (I’d rather have one or both of the above features and need to manually update images in my existing notes).
Images, like any other content, can be included in a select and that selection can span multiple images. Resizing all images in the current selection when any image is resized would be sufficient for most needs.
At this point, just having the option for images to paste as thumbnails by default would vastly improve this Bear 2 beta user’s experience.
I discovered a hacky workaround that allows me to paste images into Bear 2 beta as thumbnails!
Bear 2 adds HTML comment text like <!-- {"width":255} --> immediately following images to define their size. You can discover this by adding three ticks ``` directly before an image you’ve resized to expose the underlying markdown.
It turns out that pasting text like this immediately after an image will resize the image. So, I adapted my Alfred script that copies & pastes a screenshot from my secondary monitor during presentations to type <!-- {"width":255} --> into the keyboard immediately after pasting the image and – voilà! – my pasted images are converted to a 255px-wide thumbnail! I no longer have to live with full-width images in my Bear notes! Yay!
Now I’ll make another script (or hotkey or BetterTouchTool gesture) to paste this same text so I can instantly convert images to my preferred thumbnail size simply by positioning the cursor after an image and triggering the script.
Another benefit, is you can put text like <!-- {"width":255} --> into your clipboard (change 255 to your preferred thumbnail width) and go through any notes migrated to Bear 2 with gigantic (full width) images and fairly quickly convert them to thumbnails simply by moving the cursor immediately after each image and pasting the “magic” thumbnail-sizing text. Just don’t forget ⌘Z is an easy way to revert a change anytime you accidentally paste in the wrong place (which will happen occasionally if your doing this for lots of images).
As a side note, it looks like pasting text like <!-- {"width":255} --> after an image that has already been resized results in two (or more) of these HTMl comments. Fortunately, Bear 2 uses the last one, so you can resize images manually after doing this trick (and continue to do this trick after manually resizing); however, the existence of multiple HTML comments might cause a problem down the road. So, I’m still hopeful Bear 2 will eventually add an option to paste as thumbnail by default and I won’t have to continue using this hacky workaround.
Sure, it’s easy to resize an image in Bear 2… but what if you want to resize dozens of images or all images in a note? Tedious? Not anymore!
I’ve create a simple web page using what I’ve learned that will resize images to thumbnail size. All you need to do is select any portion of a note (or the entire note), Edit > Copy As > Markdown, paste onto the thumbnailer page, and then return to Bear 2 and paste over your selection. The thumbnailer page simply takes whatever markdown is pasted, adds the thumbnail size to any image references in the markdown, and puts it back onto your clipboard.
You can use this technique to resize a single image, multiple images, or all images in a note. If you can select it in Bear 2, you can thumbnailer it! This only works for the Bear 2 macOS app… I don’t think copying as markdown is an option in the iOS client.
If you use Alfred and want to learn how to resize images to thumbnails directly in a note using a hotkey, let me know.
Try it out!
Create a test note in Bear 2 beta and throw in a couple images along with the text.
Select the entire note (⌘A) and choose Edit > Copy As > Markdown
On browsers that constrain clipboard access (e.g., Safari), you may see a message to click a button to get the transformed markup on your clipboard, since it can only be done during a user-initiated event like a button click.
Return to your note and paste again (⌘V) right over the selected note.
Any images in your note should be converted to thumbnail size.
NOTE: I’m just a geek that love’s bear. This tool is not sanctioned or supported by the Bear team, so use it at your own discretion. That said, it’s open source, a very simple one-page web application, and just runs in your browser, so there’s no risk to trying it out. Just a small bear hug for anyone out who, like me, is also frustrated by notes full of full-width images in Bear 2 beta. Let’s hope the need for it is short-lived.
If this change is implemented (hopefully!), it would also be great to have a separate text box where users can enter their desired default image width.
