Adding Grappelli and Filebrowser functionality

Published on December 10, 2010


Out of the box the Django admin site is fantastic and I've happily been adding blog entries to a basic blog site having followed James Bennetts' book Practical Django Projects.

An interest in gardening led to the creation of another, similar Django based site but this time I wanted to allow other users to add their own blog entries. This was to include uploading images which is a simple though laborious task and requiring the following steps:

In reality, obviously this is asking far too much for users. A useful Django module called Photologue helped cut back on the need to get busy with photo editing software to create the thumbnail and upload the relevant images to the site. Unfortunately there is no link between the TinyMCE "Insert/Edit image" button so adding the uploaded images to the blog posts requires knowledge of the sites file structure and image path location - which had to be manually typed in. At best this would have required some instructions on how it worked. Expecting the worst anyway I didn't bother typing out the instructions.

The eventual solution was to get the filebrowser module working. I decided on following the standard implementation which meant also including grappelli. Both grappelli and filebrowser have pre-requisites and these are covered nicely under installation instructions here and here. The following are my notes on how the modules were configured for use with my two Django sites.


After installing the various pre-requisites and pulling the code down to the server using Subversion I decided to symlink to the grappelli and filebrowser modules in each Django project. I'm basically using each of the modules straight out of the box (I like being able to do this :) and so it wasn't a problem to share the code for each of my own Django projects:

On Windows:

mklink /D <project_path>\filebrowser <source path>\filebrowser

mklink /D <project_path>\grappelli <source_path>\grappelli

On Mac/Linux

ln -s <source_path>/filebrowser <project_path>/filebrowser

ln -s <source_path>/grappelli <project_path>/grappellii

I was planning on using the filebrowser functionality with TinyMCE to make it easy to upload images from a users PC directly. This meant including it within all relevant models within my blog application. Similarly to grappelli and filebrowser I had no need to customise my blog application for each web site and so each project links to the code using a symlink. I haven't yet decided to share the html templates used by each application so ensuring that the TinyMCE code is picked up is handled by a custom admin change_form.html file for each project rather than via a js override in a class Media reference in the application's

{% extends "admin/change_form.html" %}
{% block extrahead %}
<script type="text/javascript" src="<grappelli media folder path>/tiny_mce.js"></script>
<script type="text/javascript" src="<my media files path>/tinymce_setup.js"></script>
{% endblock %}

As TinyMCE is included with filebrowser anyway, for this project at least, it has the advantage of not needing to separately download and configure the TinyMCE code.

Where referring to the grappelli media files, these are handled in the same way that other static media is handled in line with the suggested method for Django applications on Webfaction servers.

Where adding filebrowsers media content to my media-directory I use yet another symlink.


Two error messages that I was coming up against included:

Invalid block tag: 'csrf_token'
No module named csrf

This turned out to be because my sites were using Django 1.1.1. An upgrade to 1.2 resolved these errors.


Additional comments have been disabled for this entry

An entry posted on December 10, 2010.

Categories: Blog and Open Source

There are no tags for this entry.