django-freeplay 0.1.91

Easily add CMS functionality to your Django site

django-freeplay

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.

Installation

1. pip install django-freeplay

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

   in your project’s settings.py

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

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

Requirements

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:

FREEPLAY = {
    "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.

Usage

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.

Templatetags

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>{{ item.data|safe }}</li>
{% endfor %}

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

{% get_bit "site_constants" "footer-company-summary" as co_summary %}
<footer>
    <h1>About the Company</h1>
    <p>{{ co_summary.data }}</p>
</footer>

{% get_bit "footer-address" as address %}
<footer>
    <h1>Come Visit!</h1>
    <p>{{ address.data }}</p>
</footer>

Images

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 }}.

Also

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">

Or…

{{ headshot.markup }}

Hope you find this useful!