PHPackages                             pixelpoems/silverstripe-layout-options - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. pixelpoems/silverstripe-layout-options

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

pixelpoems/silverstripe-layout-options
======================================

Silverstripe Module to attach multiple layout options to pages and elements.

2.0.0(8mo ago)0201BSD-3-ClausePHPPHP ^8.3

Since Apr 16Pushed 8mo ago1 watchersCompare

[ Source](https://github.com/pixelpoems/silverstripe-layout-options)[ Packagist](https://packagist.org/packages/pixelpoems/silverstripe-layout-options)[ RSS](/packages/pixelpoems-silverstripe-layout-options/feed)WikiDiscussions main Synced today

READMEChangelog (4)Dependencies (4)Versions (5)Used By (0)

Silverstripe Layout Options Module
==================================

[](#silverstripe-layout-options-module)

[![stability-beta](https://camo.githubusercontent.com/36eced06ca8bf4d0320406cbe1eacb0dbca16e6726c978d54c184e7676204dee/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f73746162696c6974792d626574612d3333626266662e737667)](https://github.com/mkenney/software-guides/blob/master/STABILITY-BADGES.md#beta)

This module provides extensions for layout options. The options can be attached to pages, elements or each data object. By default this module comes with options for text, background and width. Furthermore, this package contains a selection field wich is based on [color palate field by heyday](https://github.com/heyday/silverstripe-colorpalette).

- [Requirements](#requirements)
- [Installation](#installation)
- [Configuration](#configuration)
- [Default Layout Options](#default-layout-options)
- [Update Options](#update-options)
- [Reporting Issues](#reporting-issues)

Requirements
------------

[](#requirements)

- Silverstripe CMS ^6.0
- Silverstripe Framework ^6.0
- [Silverstripe Color Palette Field ^4.0](https://github.com/heyday/silverstripe-colorpalette)
- [Silverstripe Selection Field ^2.0](https://github.com/pixelpoems/silverstripe-selection-field)

Installation
------------

[](#installation)

```
composer require pixelpoems/silverstripe-layout-options

```

Configuration
-------------

[](#configuration)

Add the desired extension on Page:

```
Page:
  extensions:
    - Pixelpoems\LayoutOptions\Extensions\Text
    - Pixelpoems\LayoutOptions\Extensions\Background
    - Pixelpoems\LayoutOptions\Extensions\Width
    - Pixelpoems\LayoutOptions\Extensions\Image
```

or Element (if you use Elemental form DNADesign e.g.):

```
DNADesign\Elemental\Models\BaseElement:
  inline_editable: false
  extensions:
    - Pixelpoems\LayoutOptions\Extensions\Text
    - Pixelpoems\LayoutOptions\Extensions\Background
    - Pixelpoems\LayoutOptions\Extensions\Width
    - Pixelpoems\LayoutOptions\Extensions\Image
```

The fields will appear in the order the extensions are added within the yml config.

Each entity can be hidden if they should not appear e.g.:

```
Page:
  hide_layout_option_heading_tag: true
  hide_layout_option_text_color: true
  hide_layout_option_text_align: true
  hide_layout_option_background_color: true
  hide_layout_option_width: true
  hide_layout_option_image_orientation: true
  hide_layout_option_image_brightness: true
  hide_layout_option_image_shape: true
```

Default Layout Options
----------------------

[](#default-layout-options)

### Text

[](#text)

[![resources/example-text.png](resources/example-text.png)](resources/example-text.png)

### Background

[](#background)

[![resources/example-background.png](resources/example-background.png)](resources/example-background.png)

### Width

[](#width)

[![resources/example-width.png](resources/example-width.png)](resources/example-width.png)

### Image

[](#image)

[![resources/example-image.png](resources/example-image.png)](resources/example-image.png)

Update Options
--------------

[](#update-options)

For each option set, you can use a hook to update/expand the options from which the user can choose.

```
Pixelpoems\LayoutOptions\Services\LayoutService:
  extensions:
    - Namespace\YourLayoutServiceExtension
```

To configure the options for the heading tag, text color, text align, background color and width, you can add config variables like this:

```
Pixelpoems\LayoutOptions\Services\LayoutService:
  heading_tag_options:
    h2:
      Value: 'h2'
      Title: 'H2'
  text_color_options:
    white: '#fff'
    black: '#000'
  align_options:
    left:
      Value: 'left'
      Title: 'Left'
      ShowTitle: true
      Icon: 'align-left'
  layout_width_options:
    small:
      Value: 'small'
      Title: 'Small'
      ShowTitle: true
      Content: 'S'
  background_color_options:
    white: '#fff'
    black: '#000'
```

The options, which are configured in the yml file, will overwrite the default options!

Otherwise, you can use the following hooks to update the options or add new ones:

```
public function updateHeadingTagOptions(&$options)
{
    // Add an option
    $options['h5'] = [
        'Value' => 'h5',
        'Title' => 'H5',
    ];
}

public function updateTextColorOptions(&$options)
{
    // Add an option
    $options['text-light'] = '#ffcdb2';
}

public function updateAlignOptions(&$options)
{
    // Add an option
    $options['justify'] = [
        'Value' => 'justify',
        'Title' => 'Justify',
        'ShowTitle' => true,
        'Icon' => 'align-justify'
    ];
}

public function updateLayoutWidthOptions(&$options)
{
    // Add options
    $options = array_merge($options, [
        'xs' => [
            'Value' => 'xs',
            'Title' => 'XS',
            'ShowTitle' => true,
        ],
        'xl' => [
            'Value' => 'xl',
            'Title' => 'XL',
            'ShowTitle' => true,
        ]
    ];
}

public function updateBackgroundColorOptions(&$options)
{
    // Overwrite the default Background Colors
    $options = [
        'white' => '#ffffff',
        'bg-1' => '#ffcdb2',
        'bg-2' => '#ffb4a2',
        'bg-3' => '#e5989b',
        'bg-4' => '#b5838d',
        'bg-5' => '#6d6875',
        'black' => '#000000',
    ];
}
```

Holder Classes
--------------

[](#holder-classes)

This module comes also with an extension of the DNADesign Elemental Base Element. This extension adds holder classes to the element. The holder classes are a combination of the layout options and a `el-classname` class. This holder class can be used to style the element in the frontend. The holder class is added to the holder div of the element.

If you want to manipulate or add your custom layout classes to this holder class, you can use the following hook:

```
// Extension of DNADesign\Elemental\Models\BaseElement
public function updateHolderClasses(&$classes)
{
    // Add a class
    $classes[] = 'my-custom-class';

    // Add a class based on the layout options
    $element = $this->owner;
    if($element->NewLayoutOption && !$element->config()->get('hide_layout_option_new_layout_option'))) $holderClasses[] = 'abc--' . $element->NewLayoutOption;

}
```

Reporting Issues
----------------

[](#reporting-issues)

Please [create an issue](https://github.com/pixelpoems/silverstripe-layout-options/issues) for any bugs you've found, or features you're missing.

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance59

Moderate activity, may be stable

Popularity12

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 97.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~181 days

Total

4

Last Release

263d ago

Major Versions

1.1.1 → 2.0.02025-10-13

PHP version history (2 changes)1.0.0PHP >=7.4

2.0.0PHP ^8.3

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/121180645?v=4)[pixelpoems](/maintainers/pixelpoems)[@pixelpoems](https://github.com/pixelpoems)

---

Top Contributors

[![BettinaMaria98](https://avatars.githubusercontent.com/u/50010683?v=4)](https://github.com/BettinaMaria98 "BettinaMaria98 (36 commits)")[![andreassp](https://avatars.githubusercontent.com/u/2562181?v=4)](https://github.com/andreassp "andreassp (1 commits)")

---

Tags

silverstripeextensionlayout

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/pixelpoems-silverstripe-layout-options/health.svg)

```
[![Health](https://phpackages.com/badges/pixelpoems-silverstripe-layout-options/health.svg)](https://phpackages.com/packages/pixelpoems-silverstripe-layout-options)
```

###  Alternatives

[silverstripe/userforms

UserForms enables CMS users to create dynamic forms via a drag and drop interface and without getting involved in any PHP code

1371.1M85](/packages/silverstripe-userforms)[symbiote/silverstripe-advancedworkflow

Adds configurable workflow support to the CMS, with a GUI for creating custom workflow definitions.

46302.4k9](/packages/symbiote-silverstripe-advancedworkflow)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)