File structure · Flourish for developers

The following files are treated specially by Flourish.

template.yml – see Configuration
template.js – see How to structure your template JavaScript
thumbnail.jpg or thumbnail.png
index.html
data/*.csv
static/**

thumbnail.jpg or thumbnail.png

A thumbnail image for the template, in JPEG or PNG format. This image will be displayed for unpublished visualizations made using the template on a user's project page. Flourish template thumbnails

No particular size is required – the precise size at which the image is displayed depends on the size of the browser window – but we recommend approximately 600px × 400px.

index.html

The base HTML for the template, if required.

To reference resources in the static directory use relative links, e.g.

<img src="logo.png">

These relative links will be replaced by a suitable path when the template is rendered. If you’re creating links to static resources with code, you need to prefix them with the value of Flourish.static_prefix. See below for more about static resources.

You can add DOM elements, script tags, external stylesheets, and more to your index.html, as with any other html page. Do not reference assets at non-https addresses, since these will cause problems when the template is embedded in Flourish or any other secure website.

If the index.html file is missing, the following default HTML is used:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      html, body { height: 100%; margin: 0; overflow: hidden; }
    </style>
  </head>
  <body>
  </body>
</html>

There is no need to include a <title> element, because Flourish will insert an appropriate one when it renders the template. If you do include a <title> then it will be replaced.

data/*.csv

Default data tables, referenced in the data: section of template.yml.

static/**

Static files used in the template, such as images, fonts, stylesheets or code libraries. To reference the static directory in your index.html file, use relative links:

<script src="leaflet/leaflet.js"></script>

Or from JavaScript use Flourish.static_prefix:

var img_url = Flourish.static_prefix + "/my_image.jpg";