5. Javascript and CSS

CSS files can be referenced in a theme entry, and then this information used within templates with the {{ cssfile }} context variable.

Javascipt should be replaced in your template tags with a compressed version once you are ready to deploy portal, taking a collection of javascripts files like these:

<script type="text/javascript" src="{{ STATIC_URL }}js/portal.js"></script>
<script type="text/javascript"
        src="{{ STATIC_URL }}js/metadatamanagement.js"
        charset="utf-8"></script>

And creating a minified and compressed version such as this:

<script type="text/javascript"
        src="/sitemedia/CACHE/js/97ff5f851c61.js"></script>

The sitemedia slug is {{ STATIC_URL }}.

The Javascript should be served as static media using gzip for further compression.

5.1. Automatic compression

We are using django-compressor to compress the Javascript and CSS files in to smaller more self contained files:

{% load compress %}
{% compress js %}
<script src="/static/js/one.js" type="text/javascript"
        charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">obj.value = "value";
</script>
{% endcompress %}

This will compress down to one file like this:

<script type="text/javascript" src="/static/CACHE/js/3f33b9146e12.js"
        charset="utf-8"></script>

Everytime the contents of the file(s) in between the compress tags are changed, the files are compiled once again leading to automatic versioning.

This is not done when running the site in DEVELOPMENT or DEBUG mode.

Django compressor raises the signal:

compressor.signals.post_compress(sender, type, mode, context)

5.2. Existing Javascript Libraries

The standard portal themes use Javascript and the JQuery library. We place all Javascript in the portal_media/js folder. Feel free to use the Javascript contained within, though if you are creating your own javascript, make sure to link it properly within this or another folder.