Page History

...

New Web technologies such as Syntactically Awesome Style Sheets (Sass) and Less have largely replaced the need to do FreeMarker pre-processing for CSS files. You can now accomplish the same with a dedicated CSS pre-processor. We recommend that you start using such new technologies. Magnolia provides the /resources path (without dot) as a legacy option to support older projects.

Configuration

The Processed Resources app is configured in /modules/processed-resources-app.

What is a processed resources?

When a resource (CSS or JavaScript) is "processed" its content is interpreted as a FreeMarker template. You can use FreeMarker constants, variables and expressions inside the resource text. Magnolia evaluates them before serving the resources to the client.

Using the app

Go to Web Dev > Processed Resources to open the app.

Processed resource templates

You can process different types of files. Choose a template that matches the file type:

• Processed CSS, HTML and JS: These templates interpret the resource as a Freemarker template before serving it to the client. Use the templates to post-process CSS, HTML or JavaScript. You can use any FreeMarker constants, variables and expressions in the file text. You can also access Magnolia content and configuration using cmsfn templating functions.
  
• Non-processed CSS, HTML, JS and YAML: These templates do not process the resource. The resource is treated as a static file and served to the client as such. However, you get an editor that provides syntax highlighting and search for the designated file type.
   
• Reference: Create a reference to another resource in the same workspace. This is useful for providing aliases.
• Binary: Use this template for non-editorial binary resources that change rarely such as logos, icons and fonts.

Loading processed resources with /resources path

Use the  /resources path (without dot) to load processed resources.

...

 When you reference a resource with the /resources path, the resource is not loaded by 

Use cases

Using variables in CSS

When building large sites, authors often face a maintainability challenge. In such websites, the size of the CSS is quite large and a lot of information may be repeated in multiple places. For example, maintaining a coherent color scheme throughout a document implies reusing a few color values at numerous positions in the CSS files. Altering the scheme, whether tweaking a single color or completely rewriting it, therefore becomes a complex task requiring precision, as a single find and replace often isn't enough. – Mozilla Developer Network: Using CSS variables

...

p {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    color: #ff0099;
}

Merging JavaScript files

Merging several JavaScript files into one file makes sense if you load the same JavaScript everywhere. Consider creating packages of JavaScript files that always go together:

...

 Processing is not recursive. This means, FreeMarker expressions are only evaluated in the parent node, not in child nodes.

Aliasing

Third-party JavaScript libraries get versioned frequently. You may want the latest version of a library in your project but don't want to keep updating references in all template scripts every time the resource file name changes. Or you may want minified and pretty-print versions of the same JavaScript with friendly file names.

...

When the library is updated you only need to update the reference, no need to touch the templates.

Using a model class

You can implement a custom model class and access the model's methods from inside a CSS or JavaScript document. In the model class you can use any Java logic or Magnolia functionality.

...