Skip to content

Page-specific data

Custom attributes

The Boxes Page model comes with a predefined jsonable custom_config attribute that can be used to store any kind of key-value data.

This is useful to store page-specific configuration data in the database without having to add additional DB columns.

Example implementation

This example shows how to add a page_color option to the Boxes Editor's Page form:


namespace App;

use OFFLINE\Boxes\Models\Page;
use System\Classes\AppBase;

 * app/Provider.php
class Provider extends AppBase
    public function boot()

        \Event::listen('backend.form.extendFields', function ($widget) {
            if (!$widget->getController() instanceof \OFFLINE\Boxes\Controllers\EditorController) {

            if (!$widget->model instanceof \OFFLINE\Boxes\Models\Page) {

            // Add your custom form fields to the Page form.
            // Make sure to use the `custom_config` field name.
            // This field will be added to the Editor -> Page form
            // in the administration area.
                'custom_config[page_color]' => [
                    'label' => 'Page color',
                    'type' => 'colorpicker',
                    'tab' => 'Customization',
            ], 'primary');

You can now access the added config value anywhere in Twig:

<div style="background-color: #{{ boxesPage.custom_config.page_color }}">

Header images

A common design pattern is to use a large header image on each page of a theme.

The default OFFLINE\Boxes\Models\Page model comes with a predefined images relation that is visible in the Boxes editor by default.

Accessing the page images from anywhere

The Boxes page model is available everywhere as a boxesPage variable.

You can use this to access the uploaded image.

    <img src="{{ boxesPage.images.first().thumb(1920, auto) }}" alt="">