Content Elements & Modules

Content Elements are the fundamental content blocks within Contao, while Front end Modules provide (reusable) functionality for your web application. Implementation and handling of these is fairly similar, thus examples for this getting-started article will only cover content elements.

To create a custom content element or front end module, three basic things need to be defined or created at the very least:

• class
• palette
• template

Using annotations for service tagging, the PHP class can provide the complete configuration - like the template name, content element name, the category under which the content element or front end module should be visible in the back end and other attributes.

Content elements and front end modules are implemented as fragment controllers. The following class shows a custom content element, which passes the fields text and url to its template.

// src/Controller/ContentElement/MyContentElementController.php
namespace App\Controller\ContentElement;

use Contao\ContentModel;
use Contao\CoreBundle\Controller\ContentElement\AbstractContentElementController;
use Contao\CoreBundle\DependencyInjection\Attribute\AsContentElement;
use Contao\CoreBundle\Twig\FragmentTemplate;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

#[AsContentElement(category: 'texts')]
class MyContentElementController extends AbstractContentElementController
{
    protected function getResponse(FragmentTemplate $template, ContentModel $model, Request $request): Response
    {
        $template->set('text', $model->text);
        $template->set('url', $model->url);
        
        return $template->getResponse();
    }
}

This content element will then show up in the back end under the Texts category in the type drop down. Its name will be derived from its class name, transformed to snake case: my_content_element. Thus we can create a simple palette for this content element like so:

// contao/dca/tl_content.php
$GLOBALS['TL_DCA']['tl_content']['palettes']['my_content_element'] = '
    {type_legend},type,headline;
    {text_legend},text,url;
';

The template name on the other hand is derived from the element’s type. Content element templates reside in templates/content_elment/ by default and the template’s name will be my_content_element.html.twig in this case.

{# templates/content_element/my_content_element.html.twig #}
{% extends "@Contao/content_element/_base.html.twig" %}

{% block content %}
    {{ text }}

    {% if url %}
        <a href="{{ url }}">Read more</a>
    {% endif %}
{% endblock %}

Finally we add a label for our new content element, so it is nicely displayed in the back end:

# translations/contao_default.en.yaml
CTE:
    my_content_element:
        - My Content Element
        - A short description for my new Content Element

Find out more about content elements and front end modules in the framework documentation.

composer require contao/maker-bundle --save-dev

Next: creating an extension.