django-fiber: Dynamic menu, content and user-friendly CMS.

Django Fiber is a very useful app.  If your site requires dynamic content, menus and front end editing Fiber would come in handy.  Using fiber is as easy as pip install, changing settings.py and urls.py, and adding the base template. This tutorial will demonstrate how to use Fiber on an environment with django 1.3 project.  All files and additional information can be found here.

Step 1: pip install.

2011-12-20_0013

Once django-fiber is installed it would automatically install its dependencies which are:
PIL, django-piston, django-mptt and django-compressor.

2011-12-19_2243

Step 2: Add the required settings

Add the Fiber STATICFILES_FINDERS and MIDDLEWARE_CLASSES.

TEMPLATE_DIRS, TEMPLATE_CONTEXT_PROCESSORS, and INSTALLED_APPS

Step 3: Change urls.py

Step 4: Sync database and create templates folder inside the project.

We should then create a base.html inside the templates folder.  For testing purposes we will use a sample html file. In here we will find the template tags used by Fiber to display the menus and content from the django-fiber table on our database.

2011-12-19_2320

Step 5: Add records to the database.

At the moment we don’t have a front page yet since we didnt add a record on the django admin.  So we will add the first entry on the Pages table which we will call mainmenu.

2011-12-20_0005

Next, we will create the Home page with a url ‘/’ and set the parent to mainmenu.

2011-12-20_0018

For testing purposes we could use a css file found here to have a clear structure to our page.  After saving the entry, we check our front page and we would see the menu we just added:

2011-12-20_0041

The cross (+) button represents a feature in which as an admin we could edit contents on the front page.  If we click that button a nice WYSIWYG editor would pop up then we could add our new content.

2011-12-20_0031

Save and see the changes right away.

2011-12-20_0045

References: