Skip to main content

Easily add CMS functionality to your Django site

Project description


Freeplay is a unique approach to easily add CMS functionality to your Django app. Define regions for managing (and allowing clients to manage) bits of content on your site that don’t need the full build-out of custom apps. For example, that list of links in the footer, or the photo and bio of the CEO. With Freeplay, each region can contain one or many items, so you quickly gain flexible model-like functionality.

Each bit of content gets rendered onsave with Django’s template processor, so you have all the power of the Django’s parser.


  1. pip install django-freeplay

  2. Add 'freeplay' and 'relatedwidget' to your INSTALLED_APPS

    in your project’s

  3. Add (r"^admin/content/", include("freeplay.urls_admin")), to your main, before you include the admin urls

  4. Sync your db or use your migration tool of choice (recommended: nashvegas)


Installing freeplay will also bring django-model-utils, django-imagekit, and django-relatedadminwidget with it.

The admin templates assume the existence of a few CSS and JS libraries: Chosen, Masonry, and jQuery.Slugify. Place the files here (in relation to your staticfiles directory) to “just make it work”:

  • chosen_v1.0.0/chosen.jquery.min.js

  • masonry/jquery.masonry.min.js

  • jquery-slugify/dist/slugify.min.js

Note: All three of these can be installed quickly using bower. Add django-bower to your project if you haven’t yet!

These paths can also be overridden with a FREEPLAY setting in your settings file:

    "CHOSEN_PATH": "some/path/chosen.js",
    "SLUGIFY_PATH": "some/path/slugify.js",
    "MASONRY_PATH": "some/path/masonry.js"

And for more advanced customization, you can always override the freeplay templates with your own.


In the django admin, create a new freeplay Template. Start by defining the template bits and then write the template code. For example, let’s say we want to manage a few FAQs. We’d create one bit like so:

Kind: Plain Text
Name: Question
Context name: question
Order: 1
Text Widget: Textarea Input Field
Required: True

And another:

Kind: Markdown
Name: Answer
Context name: answer
Order: 2
Text Widget: Textarea Input Field
Required: True

(Note: if you use Markdown, be sure you’ve added markdown to your requirements)

When you set up the bits for a template, you’re defining the form that you or your clients will use to add and edit content for items that use this template. As such, you can include help text with each bit.

Now we can write the following for the template Code:

<span class="number">{{ order }}</span>
{{ question|title }}
<div class="answer">{{ answer|safe }}</div>

Note we need to use the safe filter for HTML content, and also that each item will include its “order” in context as well as “label”.

As soon as you have a template, create a Region and then you can start adding content, which is easily done using the included admin urls and templates.


Here’s how you fetch and display freeplay content in your templates:

{% load freeplay_tags %}

content_bits : assignment tag, accepts “region_slug” as argument

{% content_bits "question-answer" as qa_items %}
{% for item in qa_items %}
<li>{{|safe }}</li>
{% endfor %}

get_bit : assignment tag, requires “region_slug” and, optionally, “item_slug”

{% get_bit "site_constants" "footer-company-summary" as co_summary %}
    <h1>About the Company</h1>
    <p>{{ }}</p>
{% get_bit "footer-address" as address %}
    <h1>Come Visit!</h1>
    <p>{{ }}</p>


Image bits can be rendered in your template using {{ item }} (if the context name for this bit is “item”. Thisenerates the <img> tag including an alt attribute. If you just want to get the image path, you can either use {{ item.contentbit.image_url }} or {{ item_url }}.


Freeplay regions let you set “Min Items” and “Max Items”, optionally. On the freeplay admin dashboard, it will then alert you if a region needs more content to meet the minimum requirement and won’t show the “Add” link if the region has met the maximum limit.

Image constraints should be entered as width followed by height, separated with “x”: 150x80

To display an image in your template, something like this will work:

<img src="{{ headshot.image_path }}" alt="Headshot">


{{ headshot.markup }}

Hope you find this useful!

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-freeplay-0.1.91.tar.gz (12.2 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page