Skip to content

Latest commit

 

History

History
68 lines (52 loc) · 2.8 KB

fanstatic.rst

File metadata and controls

68 lines (52 loc) · 2.8 KB
Raw

Adding CSS and files using Fanstatic

If you're adding CSS files to your theme, you can add them using Fanstatic rather than the simple extra_public_paths method described in static-files. If you're adding a module, you must use Fanstatic.

Using Fanstatic to add and CSS files takes advantage of Fanstatic's features, such as automatically serving minified files in production, caching and bundling files together to reduce page load times, specifying dependencies between files so that the files a page needs (and only the files it needs) are always loaded, and other tricks to optimize page load times.

Note

CKAN will only serve *.js and *.css files as Fanstatic resources, other types of static files (eg. image files, PDF files) must be added using the extra_public_paths method described in static-files.

Adding a custom or CSS file to CKAN using Fanstatic is simple. We'll demonstrate by changing our previous custom CSS example (see css) to serve the CSS file with Fanstatic.

  1. First, create a fanstatic directory in your extension and move the CSS file from public into fanstatic:

    ckanext-example_theme/
  ckanext/
    example_theme/
      public/
        promoted-image.jpg
      fanstatic/
        example_theme.css

  2. Use CKAN's :py~ckan.plugins.toolkit.add_resource() function to register your fanstatic directory with CKAN. Edit the update_config() method in your plugin.py file:

    /../ckanext/example_theme/v15_fanstatic/plugin.py

  3. Finally, edit your extension's templates/base.html file and use CKAN's custom Jinja2 tag {% resource %} instead of the normal <link> tag to import the file:

    /../ckanext/example_theme/v15_fanstatic/templates/base.html

Note

You can put {% resource %} tags anywhere in any template, and Fanstatic will insert the necessary <style> and <script> tags to include your CSS and files and their dependencies in the right places in the HTML output (CSS files in the HTML <head>, files at the bottom of the page).

Resources will not be included on the line where the {% resource %} tag is.

Note

A config file can be used to configure how Fanstatic should serve each resource file (whether or not to bundle files, what order to include files in, whether to include files at the top or bottom of the page, dependencies between files, etc.) See /contributing/frontend/resources for details.