Creating new elements - RevisionTen/cms GitHub Wiki

Instead of using pre-defined fields to add content to a page, each page can be individually composed of smaller parts called "elements", which can have child-elements.

Please refer to the userguide on how to add elements to a page, and how to edit them:

• Seiteninhalte einfügen
• Seiteninhalte bearbeiten

The CMS provides a collection of default elements.

The most basic elements, are the layout elements:

A "section" is a predefined space in the page template. By "activating" a section in the CMS, a section element is placed in the predefined space in the template. A section can only have "Row" element children by default.

A "row" is an element that provides a bootstrap row. A row can only have "Column" element children by default.

A "column" is an element that provides a bootstrap column. Column elements can have all types of child elements.

💡 A common element hierarchy could look like this:

• Section
  • Row
    • Column
      • Text
    • Column
      • Image
  • Row
    • Column
      • Image
      • Text
    • Column
      • Text
      • Text

The above elements can be used to create a layout in which the actual content is placed.

The following elements can be used to place content in a page:

Displays a text.

Displays a single image.

Displays a an image gallery.

Displays a form.

As well as additional elements.

Some content is too complex and cannot be displayed by using default elements. To get around this, a custom element is required.

An element typically consists of 3 parts:

The configuration defines the name and icon of the element, as well as the form type and template that should be used. A configuration might look like this:

Example ./config/packages/cms.yaml:

cms:
    page_elements:
        Planet:
            class: App\Form\Elements\Planet
            template: 'Elements/planet.html.twig'
            public: true
            icon: 'fas fa-globe'

The form type provides the interface with which the user can add data to the element. It must be a symfony form type that extends the default RevisionTen\CMS\Form\Elements\Element class.

Example ./src/Form/Elements/Planet.php:

<?php

declare(strict_types=1);

namespace App\Form\Elements;

use RevisionTen\CMS\Form\Elements\Element;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;

class Planet extends Element
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        parent::buildForm($builder, $options);

        $builder->add('planetName', TextType::class, [
            'label' => 'Name of the Planet',
            'required' => true,
        ]);
    }
}

The twig template is used to render the elements output.

Example ./templates/Elements/planet.html.twig:

<div {{ editorAttr(element, edit) }} class="{{ elementClasses(element) }}">
Hello, I'm the planet {{ element.data.planetName }}
</div>