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.

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

Step 2: Add the required settings

Add the Fiber STATICFILES_FINDERS and MIDDLEWARE_CLASSES.

import django.conf.global_settings as DEFAULT_SETTINGS

STATICFILES_FINDERS = DEFAULT_SETTINGS.STATICFILES_FINDERS + (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
)

MIDDLEWARE_CLASSES = DEFAULT_SETTINGS.MIDDLEWARE_CLASSES + (
    'django.middleware.common.CommonMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'fiber.middleware.ObfuscateEmailAddressMiddleware',
    'fiber.middleware.AdminPageMiddleware',
    'fiber.middleware.PageFallbackMiddleware',        
)

TEMPLATE_DIRS, TEMPLATE_CONTEXT_PROCESSORS, and INSTALLED_APPS

import os
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))

TEMPLATE_DIRS = (
    os.path.join(PROJECT_ROOT, 'templates/')
)

TEMPLATE_CONTEXT_PROCESSORS = DEFAULT_SETTINGS.TEMPLATE_CONTEXT_PROCESSORS + (
    'django.core.context_processors.request',
    'django.contrib.auth.context_processors.auth',
    'fiber.context_processors.page_info',
)

INSTALLED_APPS = (
    'piston',
    'mptt',
    'compressor',
    'fiber',
    'django.contrib.admin',
)

Step 3: Change urls.py

from django.conf import settings

urlpatterns = patterns('',
    (r'^api/v1/', include('fiber.api.urls')),
    (r'^admin/fiber/', include('fiber.admin_urls')),
    (r'^jsi18n/$', 'django.views.i18n.javascript_catalog', {'packages': ('fiber',),}),
    url(r'^admin/', include(admin.site.urls)),
)

if settings.DEBUG:
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.MEDIA_ROOT,
        }),
    )

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.

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.

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

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:

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.

Save and see the changes right away.

References:

• https://github.com/ridethepony/django-fiber

• https://github.com/ridethepony/django-fiber-example