Adding images/image links

Is there a way of adding images or image links into Drafts 5?

Niall

3 Likes

Yes, via Markdown:
or via a Direct Dropbox Link.

Here’s an example using Markdown

Some text

![](https://p13.zdassets.com/hc/settings_assets/472723/200014845/HI5BY2yvy7xl1d38Lsmddw-logo.fw.png)

Some more text

When you use a preview action (the default preview action included in Drafts), it should pull in the image.

But Drafts is for plain text so you won’t get any ‘what you see is what you get’ inclusion of images in the editor itself.

6 Likes

You are explaining how to add text as a reference to an image via Markdown Frank. I think that’s not the same as showing a photo. I would like to use Drafts to make text + image annotations so I would like to see text + photos. If this happens I will sign up immediately because I really like the speed and the ability to share content, it’s great!

3 Likes

Yes, this would be fantastic.

Drafts would start to be a real content engine!

1 Like

I have to disagree. Drafts is already a real content engine and one of its great features is not including images, which would introduce bloat. Drafts is a phenomenal text editor and fast because it focuses on text. I hope it remains a text editor focused on text like the macOS apps Sublime Text, VS Code, etc. None of them work with images, but they can reference images for outputting with other tools keeping them lean and mean.

10 Likes

The problem with images is they have file names. Which isn’t something native to Drafts.

But then we’ve just crossed that bridge with the new double square brackets syntax. In a sense what’s in the brackets is close to a file name.

I think I’d do all my writing in Drafts if it had image support. And I think I’d use more images in my writing, too.

4 Likes

I second that, strongly! What I’m writing requires lots of small diagrams. I currently write bits in Drafts, but then add diagrams and formats in something like Pages.

4 Likes

I think this is the issue all great apps suffer from. We fall in love with an app, its features, and its user experience… then we visit it so often we start wishing it becomes one app to rule them all. I’ll hope Drafts focuses solely on text, and I’ll use other services focused on images.

I am hoping Apple would provide UUID style links of some sort to each asset in our Photos app (or Files app) because its library is awesome, and it handles photos better than most apps with its structure and metadata. Having my only copy of images and photos organized in the Photos app then linking to them in Drafts would avoid me file managing photos and images in multiple places.

4 Likes

I don’t mind what the Drafts support for images would be - so long as the friction in writing with images is reduced.

And maybe it’s my practice that needs to change, not Drafts itself.

But right now my graphics aren’t in Photos. They would be in Dropbox.

Happy to have suggestions on image handling that helps where the text references them from Drafts.

Do folks here feel like the way Ulysses handles images created too much bloat? How about iA Writer?

I like iA Writer’s method. It’s clean and creative without being a database app.

I like apps with a database or library for searching and organization, like Drafts, but I’m picky how the data is exported. If I choose to invest in a database app, one of the trials for me is it has to pass my needs with exporting, or I won’t use it. I like to prepare in case the app will not be around forever and this is one reason I’ve switched to plain text workflows in recent years. Drafts exports are phenomenial with a nice CSV structure and metadata. After using Bear, Ulysses, and iA Writer, I like iA Writer’s clean interface and implentation of images with /(insert filename) and how the files are available without exporting.

1 Like

I’m using Dropbox too for miscellaenous files, so I’ll create links to folders or files. A bit cumbersome at times. I also dabbled with a link workflow using DevonThink Pro 3. I can’t really find or settle on a seamless solution, but I like Dropbox being free from a database for futureproofing. I’m looking forward to seeing how Apple’s Files or Photos evolves.

The last blog post I wrote I uploaded the graphic to my Wordpress blog and then proceeded to point to it from my Markdown. (This is not ideal but I don’t suppose anyone would stumble across the graphic before the blog post was published.)

(2022: Fixed typo)

I would love to use either Ulysses or Drafts exclusively. Ulysses support of embedded images is fantastic for my needs with reports. Drafts allows tables. I remain torn.

2 Likes

I assume data: URI’s don’t appeal.

I’m solving my image needs in Drafts by inserting a link pointing to the image in Dropbox.

BTW: This is MultiMarkdown and I’m normally rendering with ‘Marked 2’ and/or DevonThink

E.g.

This is the simplest example of an ![image](https://www.dropbox.com/s/xxxxxxxxxxx/Screenshot.png?dl=1) embedded in a paragraph.
----
This is an image example with a title attribute ![Alternate Message](https://www.dropbox.com/s/xxxxxxxxxxx/Screenshot.png?dl=1"This is a title") embedded in a paragraph.
-----
This is the same image ![image3][] but with the attributes placed later on in the document.

[image3]: https://www.dropbox.com/s/xxxxxxxxxxx/Screenshot.png?dl=1 "This is where the title goes" height=22px width=60px
----

When an image is placed in a paragraph by itself, it is wrapped in a <figure> tag.

![This is the figure caption][fig_id]

[fig_id]: https://www.dropbox.com/s/xxxxxxxxxxx/Screenshot.png?dl=1 "This is where the title goes" height=45px width=120px

I’m mostly using the height/width attributes to ensure the layout

Steps:

  1. ‘Copy Dropbox Link’ from Finder (mouse right-click)
  2. paste to Drafts and change dl=0 to dl=1 (!Important)

The paste to Drafts can easily be handled by e.g. TextExpander

For me, this workflow brings extra benefits.

  • The images can easily be edited. Embedding the images in Ulysses/Bear makes it very complicated to make changes to the images.
  • I use the same workflow on Mac, iPad, iPhone (and Win with another markdown editor)

/jens

5 Likes

This is my workflow as well. I generally create an “Assets” folder for each project and put the images there, and link them as Multimarkdown image links.

I am very much in the “small powerful tools, loosely joined” camp, and having Drafts being able to be part of a fast and flexible Markdown workflow is a big part of its value for me. I’d be concerned if it added a database for images (or any other asset) outside the file system - that way lies madness, despair, and Evernote.

EDIT: I note that beta 24 has added support for relative paths for assets, including sub folders, which will make this approach more independent of your actual file system - you’ll be able to move the …project/assets folder to your final production location, version control repository etc. There are probably some clever things that can be done using external Locations in Files - have to give this some thought. (I use the excellent Working Copy app to make my GitLab version control system show up in the Files app for example.)

It would be great if the default directory for preview assets could be a setting.

Note that in Drafts 24 (released today), the Mac version has support for locally hosting images in a Previews folder for previewing purposes. It also won’t work with Marked2, but including a pre-processor script could address that shortcoming.

The Previews folder utilisation doesn’t look to be available on iPhone/iPad (yet?), but the exploded Markdown preview approach does still allow you to host locally on any of the platforms (excluding Apple Watch of course).

Edit: I was mistaken, the new Previews folder support is cross platform.

1 Like

It should be. Or what am I missing?

I tested it with Java Script and CSS and it worked.

Maybe I am missing the point what is really missing.

I am planning on a Example Action Group for that new feature.

1 Like