Bedrock Changes

bedrock-changes.md

We're making some changes to how static media (js, css, images, fonts, etc.) is handled in bedrock. The major points are as follows:

Instead of the old media('img/dude.gif'), you'll now use static('img/dude.gif'). It's nearly identical, but you do have to be more careful NOT to include a slash at the beginning of the path. The old way would deal, the new will break.

Replacing the old jingo-minify css('bundle-name') and js('bundle-name') functions are tags. They're functionally identical to the old ones, but look like: {% javascript 'bundle-name' %} and {% stylesheet 'bundle-name' %}.

Speaking of bundles, there is a new syntax for them. We're moving from...

OLD

MINIFY_BUNDLES = {
        'about': (
            'css/sandstone/video-resp.less',
            'css/mozorg/about-base.less',
            'css/mozorg/mosaic.less',
        ),
    },
}

to...

NEW

PIPELINE_CSS = {
    'about': {
        'source_filenames': (
            'css/sandstone/video-resp.less',
            'css/mozorg/about-base.less',
            'css/mozorg/mosaic.less',
        ),
        'output_filename': 'css/about-bundle.css',
    },
}

This new syntax allows for new settings to be added and for more control over the location and name of the resulting bundle file. Some of the sweet new things we can do is define a type key in the bundle which will set the type="" attribute on the script tag(s). The new system uses jinja templates to generate the link and script tags, which we can overwite with our own, or write new ones and specify in the bundle which template is to be used. See the django-pipeline docs for more info.

The other change (I think it's minor) is that I had to modify how the high-res image helper works. It used to rely on JS to figure out the name of the high-res filename, but with this new system the filename will include the md5 hash of the file itself, so the client can't work it out. So I've made the helpers spit out another data attribute (data-high-res-src) that contains the full url to the high-res version of the file. I've added tests and it's all working. It's just something to be aware of. And if you need a high-res platform image, you just need to add 'high-res': True to the optional attributes and all the right things will happen.