Ludwig Pettersson

Dynamic Image Replacements in Django

Monday, 6th October 2008

There are a few different ways to use custom fonts on the web such as the various versions of sIFR which are better than others since they don’t dependent on any server side language, but the con of course is that it adds extra javascript and flash bloat to websites.

While messing around PIL and not finding any Python/Django equivalents of Facelift, which generates the images through php rather than flash - I saw this as a good opportunity to get more into both PIL and custom template filters.

Django Image Replacement

Django Image Replacement is a template filter which generate image replacements for header elements such as <h2> and <h3>. But rather than replacing all elements with javascript you do it right in your Django templates.

Quick Example:

{% load image_replacement %}

<h2>{% filter title|image_replacement:"myfont.ttf, 30, #555" %}</h2>
# or
<h2>{% filter image_replacement:"myfont.ttf, 30, #555" %}Django Image Replacement{% endfilter %}</h2>

Check out the example page to see how these would be rendered.

Update: You can now also use the image_replacement_path filter to get just replacement image path.

{% filter title|image_replacement:"myfont.ttf, 30, #555" %}
# .. would return, in my case:
# "/static/image_replacement/images/IzU1NURqYW5nbyBJbWFnZSBSZXBsYWNlbWVudENhcHR1cmVfaXQudHRmMzA=.png"

How it works

Now, what is actually going on here? First of all we apply the filter using |filter to any variable we might have, or we can just use the block {% filter %} tag to replace anything static. image_replacement takes three comma separated arguments:

• font-style, which can either be a TrueType (.ttf) or OpenType (.otf) font which are placed in /image_replacement/fonts/ directory, which is created wherever your MEDIA_ROOT lives.
• font-size, that can be any size integer.
• and font-color, which can either be a spelled out color such as red or a hex such as #ff0000

Each of these three are required.

The image is saved in /image_replacement/images/ so that they aren’t created each time the page loads, each image is only created once but if you change any parameter or the content it will create a new one.

Requirements

• Install Python Imaging Library as well as Freetype2.
• Move the directory image_replacement to your MEDIA_ROOT.

Fonts is where you would place your fonts that you’d like to use and images is where the replacements are saved. You must also place the file clear.png in /image_replacement/images/.

If you are planning to use this on, let’s say, <h2> elements, you must add

h2, h2 span { text-indent: -999em; height: 30px; }

to your CSS file (so the default font won’t overlap the replacement), where height would be the height of the replacement image, which varies depending on the font used.

Known Issues

• PIL does not allow you to set a box boundary, so text-wrapping is not supported at the moment.

Download

Django Image Replacement is hosted over at Google Code, so head on over there to get the latest version.

Thanks

I would love some input on how to improve this, but I’d also like to say that this is meant as a replacement for anything - just an alternative.

Currently Django Image Replacement focuses on easy of use rather than clean generated html, so you’ll have to bare with that at the moment.