Custom Content Types for Sulu CMS 2.6+

Deutsche Version | English Version

This bundle provides three custom content types for Sulu CMS:

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

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"):

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

composer require manuxi/sulu-content-types-bundle

Add the bundle to your config/bundles.php:

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

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

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

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

import 'sulu-content-types-bundle';

cd assets/admin npm install npm run build

bin/console cache:clear

<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>

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.

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>

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>

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:

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"

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 

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

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

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

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

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

LICENSE

Created and maintained by Manuxi

• Issues: GitHub Issues
• Discussions: Sulu Slack

Planned features for future versions:

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

See CHANGELOG.md for version history.