Using Dropbox as a Markdown Image Source

Penning a new README. Opening a good Github issue. Answering a Stack Overflow question. Creating a descriptive pull request in Bitbucket. All of these common developer actions and more require the use of embedded images in Markdown documents. Each of these platforms uses a different Markdown flavor, but each support the same general syntax for embedding image URLs inline:

1
![Alt text](https://domain.com/image-name.png)

One of the most common flows for incorporating images into these documents is as follows:

  • Take a screenshot
  • Upload said screenshot
  • Find & copy a URL to the uploaded screenshot
  • Type out the Markdown syntax for inline images and paste in the URL

One of the most common cloud storage services for folks who’ve been using the web for a long time is Dropbox. I fall in that camp so it was incumbent upon me to find an efficient method for executing the above 4 steps in a maximally automated fashion. A method for obtaining a public link to an image in Dropbox and not a link to an HTML page containing the image wasn’t readily apparent to me. Thus in accordance with my principles of sharing technology skills with others the way they’ve been shared with me, I’m posting about it! Here goes:

Steps required to install Dropbox w/ screenshot uploading (happens once)

  • Install the official Dropbox MacOS menu bar app and log in
  • Press the Dropbox icon in the menu bar, opening a drop-down
  • Press the preferences/gear icon in the top right corner of the drop-down
  • Press the Import button at the top of the window that appears
  • Check “Share screenshots using Dropbox” in the Import view

    Steps required for each image

  • Use Shift-Cmd+4 and drag a rectangle around something you want to capture as an image (or Shift-Cmd+3 for the whole screen, or Shift-Cmd+4+Spacebar for one window)
  • Dropbox automatically uploads the screenshot and copies a URL for it to your clipboard (no action is required on your part)
  • Enter ![]() into your document and then paste the URL that was automatically copied to your clipboard in between the parens, creating something like ![](https://www.dropbox.com/s/sosick1984fuzzy/wuzzy.png?dl=0)
  • IMPORTANT: change the 0 at the end of the URL to a 1, e.g. ![](https://www.dropbox.com/s/sosick1984fuzzy/wuzzy.png?dl=1)

That’s it! It’d be even better if we could have Dropbox automatically use 1 & wrap the URL within a Markdown-friendly template. Still, this is already better than manually moving the screenshot into Dropbox & manually creating the link. Hit me up on Twitter if you’ve found a better Dropbox-friendly way to achieve this.