Notes.app add link with preview image?

If I add a link from Safari using the share icon/button to Notes.app the link added to the note has a fancy preview image, but if I paste a link into a note it doesn’t show any sort of image.

Is it possible to create a note with a link (or add a link to an existing note) that adds a preview image?

I don’t think this is going to be simple.

If you inspect the body of the note with one of these Safari links with the preview, there is nothing added to the note body. I made a test note called “Test Note,” added a link as you specified, and ran this:

tell application "Notes" to set noteBody to the body of note "Test Note"

Which yields:

And if I delete the link out, then run it again, the note body does not change.

So what are these things? They’re attachments.

tell application "Notes" to set noteAttachments to the attachments of note "Test Note"

Returns:

Now that we know the thing you want is a Core Data attachment, it makes it look like this is a non-trivial programming task.

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreData/KeyConcepts.html#//apple_ref/doc/uid/TP40001075-CH30-SW1

https://macscripter.net/viewtopic.php?pid=148245

However, I don’t know exactly what the “data” is in that core data attachment; perhaps it’s possible to make some sort of file of the proper data, save it in the regular file system instead of making it a core data entity, and then attach it to the note. Or set the clipboard to contain the right format to paste this into the note in the format you want. I didn’t have any luck trying that, but perhaps it’s possible.

I did notice that you can copy and paste these previews around in notes; so one of the available formats it’s putting this thing on in the clipboard maintains it in the style you want.

With one copied, running

return clipboard info

Yields

{{«class rtfd», 492}, {«class RTF », 401}, {«class utf8», 12}, {string, 13}, {scrap styles, 42}, {Unicode text, 24}, {scrap styles, 42}}

Or, as I’ve just remembered Shane has warned me, “clipboard info” is Carbon API data that can be misleading.

This:

use framework "Foundation"
use framework "AppKit"
use scripting additions

set thePasteboard to current application's NSPasteboard's generalPasteboard()
set theTypes to thePasteboard's |types|() as list

Yields:

{"public.rtf", "NeXT Rich Text Format v1.0 pasteboard type", "public.utf8-plain-text", "NSStringPboardType", "public.utf16-external-plain-text", "CorePasteboardFlavorType 0x75743136", "dyn.ah62d4rv4gk81n65yru", "CorePasteboardFlavorType 0x7573746C", "com.apple.traditional-mac-plain-text", "CorePasteboardFlavorType 0x54455854", "dyn.ah62d4rv4gk81g7d3ru", "CorePasteboardFlavorType 0x7374796C"}

I’m not sure which of those options yields the “pretty preview” version you want, or what it would take to convert a plain URL on the clipboard to that format. But perhaps this at least gives you a track to start researching.

I mean, if, for example, this preview version you want is an RTFD, you probably could script converting a copied URL into an RTF, including a little site preview you could get with a “do shell script” CURL call, and then put that RTF on the clipboard.

It would take a little work.

Wow, no easy feat at all.

Thanks a lot for the help with this, I really appreciate! I’ll dig in and see if I can get it to work how I’d like :slight_smile:

[EDIT]
…actually, I use Paparazzi! quite often.

I wonder if I could use Paparazzi! to grab an image of the website, resized to something similar to the preview images Notes.app creates (something like 590x320), then insert the image into the note as a HTML image link?

Here (Mojave) it’s included in a custom pasteboard format (com.apple.notes.richtext) that is securely archived. Short story, it contains URLs pointing to preview images, but extracting them is going to be very difficult. They’re also in a temp folder, so they may not be long lived.

Per Shane’s response, I don’t think you’ll be able to get the exact same thing easily.

But I was wondering if you couldn’t get something “good enough.” There are API’s online for grabbing page thumbnails, so again, you could use CURL to grab the thumbnail for your link and build something yourself.

But experimenting around, I couldn’t quickly get a “something else” to work. If I paste an image for a page preview into an RTF in Text Edit I can select it and add a link. Then from TextEdit, if you right-click the image, the first item on the contextual menu is “Open Link.”

You can select the RTF image with the link and paste it into Notes, but I can’t find any way to open the link… double-clicking it doesn’t work like the links you get from the Share button. There’s a contextual menu on the top right of the image, but that doesn’t have an “open link” option, and there’s a different right-click contextual menu, but that doesn’t have “open link” on it either.

Frankly, I’m sort of surprised the right-click menu is different between Notes and Text Edit, I’d have expected Apple to use shared code there for rich text handling.

I see now that the Notes “Edit” menu actually has “Add Link” / “Edit Link,” so the link is there, or you can put a link on an image inside Notes… there just doesn’t seem to be any way to make use of that link to get to the website. Which seems like a UI bug to me… why let you add a link to an image through the Notes GUI, and then have no way to activate that link…

You know what, link text works fine in Notes. Why not forget the image link… Just do an image with a text link below it. It won’t be identical to what “share” does, but it’ll be pretty similar.

So I’d use a “do shell script” curl command to grab a thumnail… there are various ways:
Try to extract it directly
https://tech.shareaholic.com/2012/11/02/how-to-find-the-image-that-best-respresents-a-web-page/
Grab one from Google
https://gist.github.com/ajdruff/e6b69e3eb5a3bc1dc081
Use an API that makes them:
https://www.google.com/search?q=webpage+thumbail+api&oq=webpage+thumbail+api&aqs=chrome..69i57j0.5351j1j4&sourceid=chrome&ie=UTF-8

Then you can set the clipboard to the image and the link as text together and paste it into Notes.

You could just put the Applescript on a command key where it takes any URL already on the clipboard, gets the thumbnail and the link text, put them on the clipboard, and pastes.

Not trivial, but it shouldn’t be too bad to script and it seems certain to me that each step of this is possible to achieve.

Thanks a lot, I’m going to play around with this and see what I can do :smiley:

Hello. I’ve been searching for an answer to this, myself. I have notes in which I want to add multiple previews.

Once a preview is created (via the share button), that preview can be copied and pasted. In a perfect world, previews would appear immediately after pasting them into a note (as they now do in Mail.app). But no dice.

For now, the easiest workaround appears to be to use the share button to create a new note, then copy the preview from that note and paste it into another, then delete the unneeded note.

In other words, for now, it seems we must retrain ourselves to use the share button instead of pasting links into notes.