Configuring Content Areas (Placeholders)

To show you how easy it is to set placeholders inside templates, let’s discuss the simplest way to define a placeholder. 

First, go to the "content.html" file inside the templates folder:

{% extends "base.html" %}
{% load cms_tags %}

{% block content %}
    {% placeholder content or %}
        <p>This page has no content yet. Make sure you are in <em>Edit</em> mode
           (hit the <strong>Edit page</strong> button if required). Then switch to
           <em>Structure</em> mode.</p>
    {% endplaceholder %}
{% endblock content %}

Now, let's simplify the enhanced placeholder, replace:

{% placeholder content or %}
    <p>This page has no content yet. Make sure you are in <em>Edit</em> mode
       (hit the <strong>Edit page</strong> button if required). Then switch to
       <em>Structure</em> mode.</p>
{% endplaceholder %}

with the simpler version:

{% placeholder "content" %}

___

Add other placeholders
To add a placeholder in django CMS, simply add {% placeholder "my name" %} in your template. That’s it! 

This tag will create a placeholder, which is available on the current site and can be filled with any available plugin, such as text, an image or even more complex plugins.
___

Save the "content.html" file and go back to your "base.html" file.

Creating Different Header Images for Each Page

Currently, our theme is set to load the same header image for each page on our website. 

To replace the header with content defined by the CMS, we need to add a placeholder around the header:

<!-- Page Header  -->
{% placeholder header or %}    
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="page-heading">
                        <h1>About Me</h1>
                        <hr class="small">
                        <span class="subheading">This is what I do.</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endplaceholder %}

This is an enhanced use of the django CMS placeholder tag. The or %} at the end of the tag allows us to define content that is only rendered in case the placeholder has no plugins or if these plugins do not generate any output.

In our case, we show the about-bg.jpg as a fallback, if nothing else was defined.

Defining Default Content

To set a default title as a fallback in the header, we use the template tag: {% page_attribute "page_title" %}

The values can be changed in the page settings (Page > Page Settings) and will be shown if there are no CMS plugins added.

So replace this:

<div class="page-heading">
    <h1>About Me</h1>
    <hr class="small">
    <span class="subheading">This is what I do.</span>
</div>

With:

<div class="page-heading">
    <h1>{% page_attribute "page_title" %}</h1>
</div>

Save your changes. We now have our markup setup to add some content.

___

Want to learn more about django CMS template tags? Visit:
http://docs.django-cms.org/en/latest/reference/templatetags.html
___

Adding Content

Because we have no content or plugins added yet, our home page is pretty empty. 

Before we add our first text plugin, we need to get familiar with the different view modes the CMS offers:

Editing View

This is the mode you’ll use for adding content and changing your structure. 

Click on “View published page” to switch to the published view.

Published View

This is the view mode of the CMS. Here, you can browse your “live” website as a normal user and see what pages and content are available to the public.

Go to Edit mode again by clicking on the "Edit page" button. Click on "Structure" to switch to the structure view:

Structure View is the most important view for adding content and defining the layout of your page. You can see two placeholders, currently. We added these placeholder tags (Header and Content) in the previous steps.

To add our first plugin, go to the “Content” placeholder and click on the “+” icon as shown above.

In the box that appears, you’ll see a list of all available addons for this placeholder. 

Type in “text” in the search field and click on "Text" beneath "Generic" section. This is the main plugin for adding basic text blocks.

There are other helpful plugins available if you search for “Bootstrap.” These are all the basic bootstrap addons available to you.

The next screen allows you to add basic content. Get creative and add whatever content you’d like:

___

Quick Tip
If you want some dummy text for your pages, check out the Lorem Ipsum Generator at http://hipsum.co/
___

After you’re finished adding your content, click the “Save” button.

Switch back to Content mode by pressing “Content” in the toolbar:

You should now see the content you just added on your page.

Did this answer your question?