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:

<?php

namespace App;

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

/**
 * app/Provider.php
 */
class Provider extends AppBase
{
    public function boot()
    {
        parent::boot();

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

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

            // 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.
            $widget->addFields([
                '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 }}">
    Example
</div>

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.

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