To create the EditorialContent plugin, follow these steps:
- In the models.py file of the newly created app, add the EditorialContent model extending from CMSPlugin, after which you will need to make and run migrations against the database. The EditorialContent model will have fields to store the Title, Subtitle, Description, Website, Image, Image Caption, and a CSS class:
# editorial/models.py import os
from django.db import models
from django.utils.translation import ugettext_lazy as _
from django.utils.timezone import now as tz_now
from cms.models import CMSPlugin
def upload_to(instance, filename):
now = tz_now()
filename_base, filename_ext = os.path.splitext(filename)
return "editorial/%s%s" % (
now.strftime("%Y/%m/%Y%m%d%H%M%S"),
filename_ext.lower())
class EditorialContent(CMSPlugin):
title = models.CharField(_("Title"),
max_length=255)
subtitle = models.CharField(_("Subtitle"),
max_length=255,
blank=True)
description = models.TextField(_("Description"),
blank=True)
website = models.CharField(_("Website"),
max_length=255,
blank=True)
image = models.ImageField(_("Image"),
max_length=255,
upload_to=upload_to,
blank=True)
image_caption = models.TextField(_("Image Caption"),
blank=True)
css_class = models.CharField(_("CSS Class"),
max_length=255,
blank=True)
def __str__(self):
return self.title
class Meta:
ordering = ["title"]
verbose_name = _("Editorial content")
verbose_name_plural = _("Editorial contents")
- In the same app, create a cms_plugins.py file and add an EditorialContentPlugin class extending CMSPluginBase. This class is a
little bit like ModelAdmin; it defines the appearance of administration settings
for the plugin:
# editorial/cms_plugins.py from django.utils.translation import ugettext as _
from cms.plugin_base import CMSPluginBase
from cms.plugin_pool import plugin_pool
from .models import EditorialContent
class EditorialContentPlugin(CMSPluginBase):
model = EditorialContent
module = _("Editorial")
name = _("Editorial Content")
render_template = "cms/plugins/editorial_content.html"
fieldsets = (
(_("Main Content"), {
"fields": (
"title", "subtitle", "description",
"website"),
"classes": ["collapse open"]
}),
(_("Image"), {
"fields": ("image", "image_caption"),
"classes": ["collapse open"]
}),
(_("Presentation"), {
"fields": ("css_class",),
"classes": ["collapse closed"]
}),
)
def render(self, context, instance, placeholder):
context.update({
"object": instance,
"placeholder": placeholder,
})
return context
plugin_pool.register_plugin(EditorialContentPlugin)
- To specify which plugins go to which placeholders, rather than having plugins be available to all placeholders, you have to define the CMS_PLACEHOLDER_CONF setting. You can also define some extra context for the templates of the plugins that are rendered in a specific placeholder. Let's allow EditorialContentPlugin for the main_content placeholder and set the editorial_content_template context variable for the main_content placeholder in the cms/magazine.html template, as follows:
# settings.py
# ...other imports...
from django.utils.text import gettext_lazy as gettext
# ...
CMS_PLACEHOLDER_CONF = {
"main_content": {
"name": gettext("Main Content"),
"plugins": (
"EditorialContentPlugin",
"TextPlugin",
),
},
"cms/magazine.html main_content": {
"name": gettext("Magazine Main Content"),
"plugins": (
"EditorialContentPlugin",
"TextPlugin"
),
"extra_context": {
"editorial_content_template":
"cms/plugins/editorial_content/magazine.html",
}
},
}
- Then, we will create two templates. One of them will be the editorial_content.html template. It checks whether the editorial_content_template context variable exists. If the variable exists, the template specified by the variable is included. Otherwise, it renders the default layout for editorial content:
{# templates/cms/plugins/editorial_content.html #}
{% load i18n %}
{% if editorial_content_template %}
{% include editorial_content_template %}
{% else %}
<div class="card bg-light mb-3 {% if object.css_class %}
{{ object.css_class }}{% endif %}">
<!-- editorial content for non-specific placeholders -->
<figure class="figure">
{% if object.image %}
<img src="{{ object.image.url }}"
class="figure-img img-fluid"
alt="{{ object.image_caption|striptags }}">
{% endif %}
{% if object.image_caption %}
<figcaption class="figure-caption text-center">
{{ object.image_caption|safe }}
</figcaption>
{% endif %}
</figure>
<div class="card-body">
<h3 class="card-title">{% if object.website %}
<a href="{{ object.website }}">
{{ object.title }}</a>{% else %}
{{ object.title }}{% endif %}</h3>
<h4 class="card-subtitle">{{ object.subtitle }}</h4>
<div class="card-text">{{ object.description|safe }}</div>
</div>
</div>
{% endif %}
- The second template is a specific template for the EditorialContent plugin in the cms/magazine.html template. There's nothing too fancy here - just a change to the background color and the removal of the outer border via the bg-white border-0 Bootstrap-specific CSS classes for the container card container to make the main content plugin stand out:
{# templates/cms/plugins/editorial_content/magazine.html #}
{% load i18n %}
<div class="card bg-white border-0{% if object.css_class %}
{{ object.css_class }}{% endif %}">
<!-- editorial content for non-specific placeholders -->
<figure class="figure">
{% if object.image %}
<img src="{{ object.image.url }}"
class="figure-img img-fluid"
alt="{{ object.image_caption|striptags }}">
{% endif %}
{% if object.image_caption %}
<figcaption class="figure-caption text-center">
{{ object.image_caption|safe }}
</figcaption>
{% endif %}
</figure>
<div class="card-body">
<h3 class="card-title">{% if object.website %}
<a href="{{ object.website }}">
{{ object.title }}</a>{% else %}
{{ object.title }}{% endif %}</h3>
<h4 class="card-subtitle">{{ object.subtitle }}</h4>
<div class="card-text">{{ object.description|safe }}</div>
</div>
</div>