Building a component

A component is a visual element you can add to a page.

Create a plugin to house the component

First you have to create and register a plugin to give your component(s) a place. We will use the Rocktober plugin, used in the creating a twig extension page.

Prepare your component

We are going to build a component that reads a selective number of posts from a category, random or by id and places this in bootstrap columns.

The first thing we do is building the following folder structure in our plugin:

|- plugins
|--- enovision  < this should be your namespace
|----- rocktober < this should be your plugin name
|------- components
|--------- postblock 
|----------- default.htm
|--------- Postblock.php 

Postblock.php

<?php

namespace Enovision\Rocktober\Components;

class Postblock extends \Cms\Classes\ComponentBase {

    /**
     * The componentDetails method is required.
     * The method should return an array with two keys: name and description.
     * The name and description are display in the CMS back-end user interface.
     *
     * @return array
     */
    public function componentDetails() {
        return [
            'name'        => 'Bootstrap Post blocks',
            'description' => 'Displays selected posts in bootstrap rows and columns'
        ];
    }

    /**
     * This array becomes available on the page as {{ postblock.block }}
     *
     * @return array
     *
     */
    public function block() {
        return [ 'First Post', 'Second Post', 'Third Post' ];
    }
}

Register the component in the plugin.php

class Plugin extends PluginBase {

    public function registerComponents() {
        return [
            'Enovision\Rocktober\Components\Postblock' => 'postBlock'
        ];
    }

    ...