Static Files
A static file is a file that does not contain any front matter. These include images, PDFs, and other un-rendered content.
You can save static files in any subfolder or directly within the source folder (src). A common place to save images specifically is the src/images folder. You can reference them from both markup and CSS simply using a relative URL (for example, /images/logo.svg).
Optionally, you can bundle images through esbuild or Webpack and reference them with the asset_path helper. Or if you’re interested in a full-featured image management solution with the ability to resize and optimize your media sizes, check out Cloudinary and the bridgetown-cloudinary plugin.
Static files can be searched and accessed in templates via site.static_files and contain the
following metadata:
| Variable | Description |
|---|---|
|
The relative path to the file, e.g. |
|
The time the file was last modified, e.g. |
|
The string name of the file e.g. |
|
The string basename of the file e.g. |
|
The extension name for the file, e.g.
|
Note that in the above table, file representes a variable used in logic such as a for loop—you can name it whatever you wish in your own code.
Add front matter to static files #
Although you can’t directly add front matter values to static files, you can set front matter values through the defaults property in your configuration file. When Bridgetown builds the site, it will use the front matter values you set.
Here’s an example:
In your bridgetown.config.yml file, add the following values to the defaults property:
defaults:
- scope:
path: "images"
values:
image: true
When Bridgetown builds the site, it will treat each image as if it had the front matter value of image: true.
Now suppose you want to list all your image assets as contained in src/images. You could use this Liquid for loop to look in the static_files object and get all static files that have this front matter property:
{% assign image_files = site.static_files | where: "image", true %}
{% for myimage in image_files %}
{{ myimage.path }}
{% endfor %}
When you build your site, the output will list the path to each file that meets this front matter condition.