File structure
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.
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";