Content: Blog

Tutorials

How to Build a Website and Blog with django CMS, Without Knowing Python/Django - Pt. 3

Christian Bertschy

Feb. 16, 2016

Index


Part 3: Adding Content

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

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 EachPage

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 run out of blog post ideas, 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.


Understanding Nested Plugins

Nested plugins allow you to build complex structures without making changes to your templates. 

In this section, we’ll demonstrate how an advanced structure can allow content managers to change the header background image and content for each individual page, without having to change the template.
 

To set the background image for each page, you can also extend the page model if you have some Python knowledge:
http://docs.django-cms.org/en/develop/how_to/extending_page_title.html

For this step, we need to install/configure some additional addons. 

Let’s switch back to the Addons Section in the Control Panel.

Search for the “Aldryn Background Image” addon and install it.

Then, search for the pre-installed “django CMS Style” addon and click “Configure” and add “container, page-heading” to “List of Classes”. We need this classes later to give certain elements their specific look:

Click on “Save” and go back to the dashboard to redeploy the test server by clicking on the button “Deploy” 

This will take a couple of minutes, so please wait until you see the green bar again and deployment has finished.

After successful redeployment, go back to your website, refresh and switch back to structure mode by clicking on “Structure” in the toolbar. 

Next we build up the Bootstrap 3 layout with django CMS plugins to replicate this structure from the template:

<header> 
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                ...

Or simply:

  • header
    • container
      • row
        • column

 

Learn more about the Bootstrap 3 grid system, here: http://getbootstrap.com/css/#grid

We start building this structure by adding plugins into the placeholder “Header.” 

First, click on the “+” icon inside the “Header” placeholder and type “background image” in the search box. 

Then, drag and drop the “home-bg.jpg” file from the downloaded theme img-folder into the plugin (grey area):

Change the Tag Type to "header," then click on Advanced Settings “(Show)” and add "intro-header" to the Additional Classes field.

Click “Save.”

Next, click on the “+” icon of the newly created "Background Image" plugin and search for “style.” Choose “container” from the Class Name dropdown.

Click “Save.”

Next, click on the “+” icon in the “Style” plugin and search for “Row.” Here, we can change the settings like this:

Click “Save” to add the plugin.

Now, open the newly created “Row” plugin by clicking on the triangle. The Row plugin automatically creates the “Column” plugin nested inside the “Row” plugin. 

Click the “+” icon in the “Column” plugin and search for “style.” Add it with the following settings:

Finally, click the “+” icon in the “Style” plugin and type “text” into the searchbox, then click on “Text.” 

Type your name, select it and choose “Heading 1” from the “Paragraph Format” dropdown in your editor. Click “Save” in the lower right.

Your structure should now look like this:

Change back to Content View. 

You can now easily change the content of the header by double-clicking on it:

You can also directly access the other plugins from this view by switching to the according plugin in the breadcrumb menu (i.e. to change the background image):

After you’ve made your changes, click “Publish page changes” in the toolbar.

This button indicates that you’ve made changes to your content that haven’t been published yet; meaning that they’re yet accessible to the public.

Check out your first finished home page: 

Don’t worry, though: You won’t need to create nested plugins every time you want to change the background-image. You can simply save the page as a page-type, learn more.

Jump to Index   Part 4: Getting to Know News & Blog

blog comments powered by Disqus

Want to post your article here?

Contact us