1. Theme Guide
  2. Themes
  3. Assets

Assets

Your theme assets (images, fonts, etc.) are kept in the assets/ folder. Within this folder, your assets can be organized however you like.

assets/
	logo.jpg
	images/
		my-image.png
	fonts/
		font-family.ttf

Using Assets in Templates

The Nunjucks filter file is used to generate asset URLs in the templates. To do this, pipe the file's relative path from the root assets folder into the file filter.

For example, the assets in the above folder structure example would be accessed like this:

<head>
 <style>
  @font-face {
   font-family: 'font-family';
   src: url('{{ 'fonts/font-family.ttf' | file }}');
  }
 </style>
</head>
<body>
 <img src="{{ 'logo.jpg' | file }}" />
 <div style="background-image: url({{ 'images/my-image.png' | file }});"></div> 
</body>

Published with Pagedip • Last updated January 29th 2018