How to use Dropbox to add attachments and embed images in your own website


Published: 16 October 2017
Author: Jared Holgate
Category: Engineering
Tags: DropBox,Images,WebSite,Embedding

Getting started

First of all I'd recommend setting up your own folder structure specifically for your website and make copies of images rather than sharing the originals to avoid confusion later. I'm going to assume you know how to do that in Dropbox.

In Dropbox there is the functionality to Share a document or folder with a unique link that then makes is available to anyone that has the link. There are then various query string options you can choose to determine how the file is served from Dropbox.

Let's start with how to Share the file and get the url.

Sharing a file in Dropbox and getting the url

Click the Share button next to the file in question;

Share with Dropbox

Click the Create a link button;

Share with Dropbox

Click the Copy link button;

Share with Dropbox

You will now have a url in your clipboard and you can see it on screen. Save it somewhere for later;

Share with Dropbox

Options for serving shared files in Dropbox

There are three different optional query strings you can add to a Dropbox url;

?dl=0: Use this to link to the Dropbox user interface and get the option to download from there. This is the default option, but doesn't fit any of the use cases in this article.

?dl=1: Use this to download the file directly. This is the option to use if you have a zip file or similar you want to add as an attachment in your website.

?raw=1: Use this option to render the file directly without the Dropbox user interface. This is the option to use if you are embedding an image in your web site.

This Dropbox help article explains in more detail, but I'm trying to simply it here.

Examples - Adding attachments and embedded images

Adding an attachment with Markdown;

[My attachment](https://www.dropbox.com/s/*********/attacment.zip?dl=1){target=_blank}

Embedding an image with Markdown;

![Alt Text](https://www.dropbox.com/s/*********/myimage.png?raw=1 "Tooltip Test")