Configuration

Foliodot offer several ways to configure functionality of template engine (sorted by specificity):

  • via configuration file — global, applies to every page where included
  • via configuration object during template initialization — local, applies to particular web page and override settings in global configuration file
  • via html attributes on page element — local, applies to page element on particular web page and override settings in configuration object

Configuration file Link

Main purpose of configuration file is to provide a global, single point of configuration for large subset of web pages or even whole website.

This javascript file should be included on web page right after folio.min.js file and just before initialization script:

<script src="js/folio.bundle.min.js"></script>

<!-- configuration file: -->
<script src="js/config.js"></script>

<script>FOLIO.init();</script>

View foliodot configuration options.

Particular options in this file can be (and will be) overridden by the same options set in configuration object.

Configuration object Link

Main purpose of configuration object is to provide specific configuration for particular web page by overriding options defined in global configuration file.

Configuration object is set during foliodot template initialization and is passed as argument through init() method:

<script>
    FOLIO.init({
        // configuration object
        project : {
            transition : fade
        }
    });
</script>

Inline configuration Link

Main purpose of inline configuration is to set options for particular page element using page attributes: 

<img data-src="photo.jpg" fit="cover" transition="fade"/>

In example above, photo.jpg will be lazy loaded, it will cover whole screen and it will appear with fade transition.

Inline configuration has highest specificy meaning it will override configuration set via initialization object and global configuration file.

Inline configuration is available for all project page elements as following page attributes:

× × ×

Learn next: Introduction