Application media¶
Note
This is information for people developing applications and wanting to use Molly’s media framework. If you’re just interested in customising the look and feel of Molly, see the customising tutorial.
Molly uses django-staticfiles and django-compress to collate and merge media files from various sources.
Source media locations¶
A set of base media are pulled in from molly/media/
. Each molly
application may also define a media/
subdirectory, from which Molly
will pull media related to that particular application. Finally, the site may
provide additional media to override the defaults in
<project_root>/site_media/
.
In each of these locations media are organised within a directory bearing the name of the application that uses them. For example:
molly/apps/contact/
media/
contact/
css/
[...]
js/
[...]
images/
[...]
molly/
media/
base/
css/
[...]
[...]
your_site/
site_media/
contact/
images/
override_some_icon.png
base/
css/
[Add your own style here]
Collating media¶
Media are collated into settings.STATIC_ROOT
, which is defined to be
the same as settings.MEDIA_ROOT
. To invoke django-staticfiles
to
collate the media:
$ python manange.py build_static -l --noinput
The -l
option causes it to use symlinks instead of copying files. This has
the added advantage that when editing your media during development you don’t
have to invoke build_static
after every change.
Note
You will however need to invoke build_static
if you add new media files,
so as to create the new symlinks from STATIC_ROOT
.
Compressing media¶
Molly encourages the use of django-compress
to merge and tidy up CSS and
JavaScript files. Media are merged into a directory c/
within
STATIC_ROOT
, with the first fragment of the path removed.
django-compress
also adds a timestamp to each compressed file’s filename.
Thus, contact/css/index.css
and base/css/index.css
would be
merged into c/css/index.r12345678.css
.
To reference the combined media group from a template you should load the
compressed
template library using {% load compressed %}
at the beginning of the template file. You may then use
{% compressed_js <group-name> %}
and {% compressed_css <group-name> %}
to generate the required <script/>
and <link rel="stylesheet"\>
tags.
The group name is the hyphenated path within the c/
directory without
any js-
or css-
prefix. Thus contact/css/types/clever.css
would
have a group of types-clever
.
Note
For more information about django-compress
, please see their
documentation.
django-compress
will automatically update the generated files if it
discovers that a constituent file has changed on disk. However, if you want to
sync them manually, it can be invoked as follows:
$ python manage.py synccompress
To only enable compression when not in DEBUG
mode, use the following line
in your settings file:
COMPRESS = not DEBUG