README

Custom Content Types for Sulu CMS 2.6+

Deutsche Version | English Version

Features

This bundle provides three custom content types for Sulu CMS:

1. 🔢 NumberWithDefault

Number input field with default value support. Extends the standard number type with a default_value parameter.

Use Cases:

Refresh intervals
Timeouts
Counters with default values

2. 🎨 ColorSelect

Selection field with colour preview. Any colour-coded options can be configured via yaml.

Use Cases:

Button colors
Badge colors
Theme color selection

Default options (Palette "bootstrap"):

3. 🎚️ SliderRange

Visual range slider with configurable display modes. Supports textbox input, floating tooltips, and various label layouts.

Use Cases:

Banner rotation speeds
Opacity/transparency
Priority levels
Volume controls

Installation

1. Install via Composer

composer require manuxi/sulu-content-types-bundle

2. Enable the Bundle

Add the bundle to your config/bundles.php:

<?php

return [
    // ...
    Manuxi\SuluContentTypesBundle\ManuxiSuluContentTypesBundle::class => ['all' => true],
];

3. Register Admin Assets

Add to your main project's assets/admin/package.json:

{
    "dependencies": {
        "sulu-content-types-bundle": "file:../../vendor/manuxi/sulu-content-types-bundle/src/Resources"
    }
}

4. Import in Main Project

Add to your main project's assets/admin/index.js:

import 'sulu-content-types-bundle';

5. Build Admin Assets

cd assets/admin
npm install
npm run build

6. Clear Cache

bin/console cache:clear

Usage

NumberWithDefault

<property name="refresh_interval" type="number_with_default">
    <meta>
        <title lang="en">Refresh Interval (ms)</title>
        <title lang="de">Aktualisierungsintervall (ms)</title>
    </meta>
    <params>
        <param name="min" value="1000"/>
        <param name="max" value="30000"/>
        <param name="step" value="500"/>
        <param name="default_value" value="5000"/>
    </params>
</property>

In Twig:

<div data-refresh="{{ content.refresh_interval }}">
    <!-- Defaults to 5000 if not set -->
</div>

ColorSelect

Important: The color is encoded in the value attribute using the format "key:color" (e.g., "primary:#0d6efd").

<property name="button_color" type="color_select">
    <meta>
        <title lang="en">Button Color</title>
        <title lang="de">Button-Farbe</title>
    </meta>
    <params>
        <param name="values" type="collection">
            <param name="primary" value="primary:#0d6efd">
                <meta>
                    <title lang="en">Primary (Blue)</title>
                    <title lang="de">Primärfarbe (Blau)</title>
                </meta>
            </param>
            <param name="secondary" value="secondary:#6c757d">
                <meta>
                    <title lang="en">Secondary (Gray)</title>
                    <title lang="de">Sekundärfarbe (Grau)</title>
                </meta>
            </param>
            <param name="success" value="success:#198754">
                <meta>
                    <title lang="en">Success (Green)</title>
                    <title lang="de">Erfolg (Grün)</title>
                </meta>
            </param>
        </param>
    </params>
</property>

In Twig:

<button class="btn btn-{{ content.button_color }}">
    Call to Action
</button>

The value returned is only the key part (e.g., "primary"), not the full "primary:#0d6efd" string.

SliderRange

The SliderRange supports multiple display modes via the display_mode parameter:

<!-- Classic with textbox (default) -->
<property name="opacity" type="slider_range">
    <meta>
        <title lang="en">Opacity</title>
    </meta>
    <params>
        <param name="min" value="0"/>
        <param name="max" value="100"/>
        <param name="step" value="5"/>
        <param name="default_value" value="50"/>
        <param name="display_mode" value="input"/>
        <param name="show_labels" value="true"/>
    </params>
</property>

<!-- Floating tooltip (recommended for narrow columns) -->
<property name="speed" type="slider_range">
    <meta>
        <title lang="en">Speed</title>
    </meta>
    <params>
        <param name="min" value="1000"/>
        <param name="max" value="10000"/>
        <param name="step" value="500"/>
        <param name="default_value" value="5000"/>
        <param name="display_mode" value="floating"/>
        <param name="show_labels" value="false"/>
    </params>
</property>

In Twig:

<div class="banner-slider" data-speed="{{ content.speed }}">
    <!-- Slider with 5000ms default rotation -->
</div>

Parameters

NumberWithDefault

Parameter	Type	Description	Example
`min`	number	Minimum value	`0`
`max`	number	Maximum value	`100`
`step`	number	Step increment	`1`
`multiple_of`	number	Value must be multiple of	`5`
`default_value`	number	Default value	`10`

ColorSelect

Parameter	Type	Description
`values`	collection	Array of color options
`values.*`	value attribute	Key and color in format `"key:color"`
`values.*.meta.title`	string	Translatable display name (optional)

Value Format: "key:#hexcolor" (e.g., "primary:#0d6efd")

XML Structure:

<param name="values" type="collection">
    <param name="primary" value="primary:#0d6efd">
        <meta><title lang="en">Primary</title></meta>
    </param>
</param>

ColorSelect Color Palettes

Using palettes with service:

<param name="values"
        type="expression"
        value="service('sulu_content_types.color_palette_provider').getValues('bootstrap')"
        />
<param name="default_value"
       type="expression"
       value="service('sulu_content_types.color_palette_provider').getDefaultValue('bootstrap')"
/>

Custom color palette: config/packages/sulu_content_types.yaml

sulu_content_types:
    color_palettes:
        custom:
            primary: '#0d6efd'
            secondary: '#6c757d'
            ...

Reflect changes in xml: .getValues('custom')

Now use own color palette:

SliderRange

Parameter	Type	Description	Default	Example
`min`	number	Minimum value	`0`	`0`
`max`	number	Maximum value	`100`	`100`
`step`	number	Step increment	`1`	`5`
`default_value`	number	Default value	`min`	`50`
`display_mode`	string	Display mode (see below)	`input`	`floating`
`show_labels`	boolean	Show min/max labels	`true`	`false`

Display Modes

Mode	Description	Best For
`input`	Textbox next to slider with min/max labels	Full-width layouts, precise input needed
`floating`	Tooltip above thumb, smooth animation	Narrow columns (col-3), clean design
`inline`	Current value between min/max labels	Compact layouts
`below`	Current value centered below slider	Minimal layouts, emphasis on value
`none`	No value display, only slider	Ultra-minimal, visual-only control

Recommended Combinations:

📱 Narrow columns (col-3): display_mode="floating" + show_labels="false"
📊 Full width: display_mode="input" + show_labels="true"
🎨 Minimalist: display_mode="below" + show_labels="false"

Development

Project Structure

SuluContentTypesBundle/
├── src/
│   ├── Content/Type/              # Content Type classes
│   ├── DependencyInjection/       # Service loading
│   └── Resources/
│       ├── config/services.xml    # Service definitions
│       ├── js/                    # React components
│       └── package.json           # JS dependencies
└──docs/                          # Public documentation

Compatibility

Sulu CMS: ^2.6
PHP: ^8.1
Symfony: ^5.4 || ^6.0 || ^7.0
React: ^17.0.0 || ^18.0.0

Future Compatibility

This bundle is designed with Sulu 3.x compatibility in mind:

Uses SimpleContentType without PHPCR dependencies
No direct PHPCR write/read methods
Future-proof architecture

Documentation

Installation Guide - Step-by-step installation
Example Template - Complete XML examples
Example Twig - Twig usage examples

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This bundle is under the MIT license. See the complete license in:

LICENSE

Credits

Created and maintained by Manuxi

Support

Issues: GitHub Issues
Discussions: Sulu Slack

Roadmap

Planned features for future versions:

IconSelect (FontAwesome, Material Icons)
PercentageSlider (with % display)
CurrencyInput (with currency symbols)
DateRangePicker
TimeRangePicker

Changelog

See CHANGELOG.md for version history.

manuxi / sulu-content-types-bundle

Maintainers

Details

README

Features

1. 🔢 NumberWithDefault

2. 🎨 ColorSelect

3. 🎚️ SliderRange

Installation

1. Install via Composer

2. Enable the Bundle

3. Register Admin Assets

4. Import in Main Project

5. Build Admin Assets

6. Clear Cache

Usage

NumberWithDefault

ColorSelect

SliderRange

Parameters

NumberWithDefault

ColorSelect

ColorSelect Color Palettes

SliderRange

Display Modes

Development

Project Structure

Compatibility

Future Compatibility

Documentation

Contributing

License

Credits

Support

Roadmap

Changelog