October CMS - extend page to have an associated image [closed]

Question

What are the best and clean possible ways to extend functionality for including an associated image to each page object (CMS page or StaticPage), adding a corresponding upload widget to the page's configuration in the OctoberCMS backend?

(Additionally, and just as an aside: In what way can one add an associated image to a site's theme?)

Answer 1

Do try to extend Rainlab's page plugin or CMS pages?

For static pages plugin, to add a tab on the settings section of a static page, you need to create a plugin that extends Rainlab's pages plugin and add a tabbed field using the extendFields function. Here's an example of extension. This code must be placed in the Plugin.php file of your plugin.

public function boot()
{
    Event::listen('backend.form.extendFields', function($widget) {

        $objectPath = trim(Request::input('objectPath'));

        if (
            !$widget->getController() instanceof \RainLab\Pages\Controllers\Index ||
            !$widget->model instanceof \RainLab\Pages\Classes\Page
        ) {
            return;
        }

        $widget->addTabFields([
            'viewBag[image_file]' => [
                'label' => 'Attach image to this page',
                'tab' => 'Image',
                'field' => 'viewBag[image_file]',
                'type' => 'mediafinder',
                'comment' => 'Image url is available via the viewBag with the name of image_file'
            ]
        ]);
    });
}

Then in your layout file, partials or CMS pages you can display the image with this code :

<img src="{{ staticPage.extraData['image_file']|_media }}">

And don't forget to inject dependencies in your Plugin.php file:

use Event;
use Backend;
use Request;
use RainLab\Pages\Classes\Controller;