django-mediagenerator: asset management for Django¶
Improve your user experience with amazingly fast page loads by combining, compressing, and versioning your JavaScript & CSS files and images. django-mediagenerator eliminates unnecessary HTTP requests and maximizes cache usage. Also, it provides lots of advanced features required for building HTML5 web applications (e.g. HTML5 offline manifests, Sass support, etc.).
Take a look at the feature comparison for a quick overview and if you like django-mediagenerator please click the I use this!
button on that page. Thank you!
Django mediagenerator lives on GitHub (downloads, source code and bug tracking).
Tutorials¶
- Getting started: django-mediagenerator: total asset management
- Using Sass with django-mediagenerator
- Offline HTML5 canvas app in Python with django-mediagenerator, Part 1: pyjs
- Offline HTML5 canvas app in Python with django-mediagenerator, Part 2: Drawing
- HTML5 offline manifests with django-mediagenerator
FAQ¶
Q: How does it relate to django-staticfiles / django.contrib.staticfiles?¶
django-mediagenerator is a complete standalone asset manager which replaces django-staticfiles. You can still use both in the same project if you really need to, but that’s very rarely the case (e.g. during a gradual transition from django-staticfiles to django-mediagenerator).
Q: What are the perfect caching headers?¶
- Disable ETags because they cause unnecessary
If-modified-since
requests. - Use
Cache-Control: public, max-age=31536000
Tip: How to include IE-specific stylesheets¶
Imagine you have several stylesheets combined into main.css
bundle. Now imagine you also have an extra stylesheet for Internet Explorer called ie.css
. Most websites include their IE-specific stylesheet with an additional <link />
tag using conditional HTML. The problem with this solution is that IE users have to wait for two requests: one for main.css
and another one for ie.css
. Can this be done more efficiently?
Yes! Create two CSS bundles (main-ie.css
with ie.css
and main.css
without ie.css
) in your settings. For example:
_base_main_bundle = (
'css/reset.css',
'css/design.css',
)
MEDIA_BUNDLES = (
('main.css',)
+ _base_main_bundle,
('main-ie.css',)
+ _base_main_bundle
+ ('ie.css',),
)
Then, use this conditional comment sequence to include the bundles:
<!--[if (!IE)|(gte IE 8)]><!--> {% include_media 'main.css' %} <!--<![endif]-->
<!--[if lt IE 8]> {% include_media 'main-ie.css' %} <![endif]-->
Now every browser will only make one single request. Cool, isn’t it?
In the example above only IE6 and IE7 get special treatment. IE8 loads the same stylesheet as all other browsers. Of course you can extend the example to serve different stylesheets for all the different IE versions.