2017 © Pedro Peláez
 

silverstripe-module silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

image

flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  • Thursday, July 19, 2018
  • by FelixEggmann
  • Repository
  • 1 Watchers
  • 1 Stars
  • 104 Installations
  • PHP
  • 0 Dependents
  • 0 Suggesters
  • 0 Forks
  • 1 Open issues
  • 14 Versions
  • 65 % Grown

The README.md

Page Sections module

Adds configurable page sections and elements to your SilverStripe project., (*1)

Introduction

This module provides page sections for SilverStripe 3.+ projects.
Page sections are areas on a page where CMS users can add their own content in a structured way.
Pages can have none, one or more page sections attached to them. Each page section is made up of various page elements, which themselves can or cannot have other page elements as children. The page elements can be edited in a tree-like gridview on the page or the page elements., (*2)

Setup

You can either add this module to your composer file using, (*3)

composer require flxlabs/silverstripe-pagesections

or download the git repository and add a folder called pagesections to the top level of your project and drop the code in there., (*4)

By default the module is configured to do nothing, and also doesn't add any relations. Please refer to the Configure section for more information., (*5)

Configure

By default this module does NOT add any relations or data to any of your pages. Follow the steps below to start working with page sections., (*6)

Pages & Page sections

Your pages can have none (default), one or more page sections, which are areas on your page where CMS users can add various page elements to customize the look and feel of the page in a structered/limited way., (*7)

  1. Add the following extensions to your mysite/_config/config.yaml on any pages where you wish to have page sections:, (*8)

    Page:
     extensions:
       - PageSectionsExtension
       - VersionedRelationsExtension
    

    This will by default add one page section called Main to your page(s), (*9)

    Make sure that the VersionedRelationsExtension comes after the PageSectionsExtension, (*10)

  2. If you want more than one page section add the following to your mysite/_config/config.yaml:, (*11)

    Page:
     extensions:
       - PageSectionsExtension
       - VersionedRelationsExtension
     page_sections:
       - Top
       - Middle
       - Bottom
    

    Each of the listed names under the page_sections key will add a page section of that name to the page. This will also override the default Main page section., (*12)

  3. Hit up /dev/build?flush=1 in your browser to rebuild the database. You should see that new relations are created for each of your page classes that you added page sections to., (*13)

Page elements

Page elements are the actual elements that are added to the page sections and then displayed on the page. By default this package only contains the base class PageElement and not any actually implemented page elements, but you can take a look at the examples folder to see how some common page elements would look., (*14)

Page elements by default have Children, which are other page elements, and a Title, which is a Varchar(255)., (*15)

PHP

Below we will demonstrate how to create a simple page element., (*16)

  1. Create a new file in your mysite/code folder called TextElement.php, (*17)

  2. Add the following code to that file:, (*18)

    <?php
    class TextElement extends PageElement  {
     public static $singular_name = 'Text';
     public static $plural_name = 'Texts';
    
     private static $db = array(
         'Content' => 'HTMLText',
     );
    
     public function getCMSFields() {
         $fields = parent::getCMSFields();
         $fields->removeByName('Children');
    
         return $fields;
     }
    
     public static function getAllowedPageElements() {
         return array();
     }
    
     public function getGridFieldPreview() {
         return $this->Content;
     }
    }
    
  3. Go to /dev/build?flush=1 in your browser to load the new class and create database entries., (*19)

The class we just created adds the TextElement page element, which has a Content field that allows adding html content, and it also removes the Children field from it's own CMS fields, which means that we cannot add any children to this element. This is also enforced in the getAllowedPageElements() function, which returns a list of all the class names of allowed child elements., (*20)

The getGridFieldPreview() function returns the content that should be displayed in the gridfield when editing the page elements., (*21)

Template

Since this module comes with a default template for the PageElement class the TextElement we just created will already render on your page, but most likely not the way you want it to., (*22)

There are several ways to customize the look of page elements, analog to how SilverStripe page templates work., (*23)

You can use the following variables/function in any of your page element template files:, (*24)

Variable/Function Description
$ClassName This is the classname of the current page element.
$Page This is the current page that the page element is being displayed on.
$Parents This is an array of the parents of this page element, traveling up the hierarchy.
$Layout This will render the content of the actual page element type, analog to the $Layout variable used in the main Page.ss file.
$RenderChildren($ParentList) This will loop through all the children of this page element and render them

Following is an example building on the TextElement which was added above., (*25)

  1. Add a file called PageElement.ss to your /themes/{name}/templates folder.
    This is the main template file for all your page sections., (*26)

    As an example let's use the following content:, (*27)

    <div className="$ClassName $Page.ClassName" style="margin-left: {$Parents.Count}em">
      <h1>$Title</h1>
      $Layout
      <div>
        $RenderChildren($ParentList)
      </div>
    </div>
    
  2. Add a file called TextElement.ss to your /themes/{name}/templates/Layout folder. Now let's add the following content to that file:, (*28)

    $Content
    

Following the above two steps will add a template for all page elements, as well as a specific layout template for the TextElement page element., (*29)

The Versions

19/07 2018

dev-feature/ss4-treeview

dev-feature/ss4-treeview http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

10/07 2018

dev-feature/ss4-support

dev-feature/ss4-support http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

28/06 2018

dev-develop

dev-develop http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

28/06 2018

dev-master

9999999-dev http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

28/06 2018

0.2.0

0.2.0.0 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

05/03 2018

0.1.6

0.1.6.0 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

05/03 2018

dev-feature/ui

dev-feature/ui http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

22/02 2018

0.1.5

0.1.5.0 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

22/02 2018

dev-release/0.1.5

dev-release/0.1.5 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

30/01 2018

0.1.4

0.1.4.0 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

30/01 2018

dev-release/0.1.4

dev-release/0.1.4 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

23/01 2018

0.1.2

0.1.2.0 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

04/12 2017

0.1.1

0.1.1.0 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements

21/09 2017

0.1.0

0.1.0.0 http://github.com/flxlabs/silverstripe-pagesections

Adds configurable page sections and elements to your SilverStripe project.

  Sources   Download

MIT

The Requires

 

by Marco Crespi

silverstripe elements sections page sections page elements