VersionManager

The getLatestVersion() method of \System\Classes\VersionManager retrieves the current version of a plugin from the associated version.yaml file. This file is a fundamental requirement and should be included in every plugin since at least OctoberCMS v2. With this class, you can access the latest plugin version without the need for the plugin to be installed and regardless of whether it is activated or not. However, keep in mind that when using the VersionManager, the version specified in the version.yaml file may differ from the installed version stored in the database.

Example

The following code returns the version number of the "RainLab.User" plugin as a string or 0 if the plugin or the version.yaml file does not exist.

$versionManager = \System\Classes\VersionManager::instance();
echo $versionManager->getLatestVersion('RainLab.User');

PluginVersion

The class \System\Models\PluginVersion is, as the namespace suggests, an Eloquent model that maps to the native system_plugin_versions table, thus we can retrieve the latest installed version number from the respective column. This class therefore requires that the plugin is installed, but it also allows for a direct check to see if the plugin is currently activated as well.

Example

The following code demonstrates the use of the PluginVersion class in a typical Eloquent manner. With an additional where clause, like where('is_disabled', 0), you can further restrict the selection to active plugins too.

$pluginVersion = `\System\Models\PluginVersion::where('code', 'RainLab.User')->first();
echo $pluginVersion ? $pluginVersion->version : 0;

Plugin Manager

By the way, using the \System\Classes\PluginManager class, you can also quickly check whether a plugin exists or not. Similar to VersionManager, this class only verifies if the plugin directory (and necessary files) exists, without checking whether the plugin is installed or activated.

Example

The following code checks whether the RainLab.User plugin exists:

echo \System\Classes\PluginManager::instance()->hasPlugin('RainLab.User');

In the parent controller, the relationExtendManageWidget() function is overridden, and the model used in the widget of the child form is accessed using $widget->config->model. Then, a dynamic property is added to the model using the addDynamicProperty() function, so that this property is not saved to the database, as it is only used for filtering logic.

public function relationExtendManageWidget($widget, $field, $model) 
{
    if($field == 'actresses' 
        && property_exists($widget->config, 'context')
    )
    {
        $widget->config->model->addDynamicProperty('_active_continent_id', $model->continent_id);
    }
}

To use it, for example, there is a dropdown in the child form to display a list of countries in the selected continent previously selected in the parent form, then we simply do:

country:
    label: 'Country'
    nameFrom: name
    span: full
    type: relation
    scope: '\Foo\Bar\Actress::getFilteredCountryBasedOnContinent'

Then, the function is filled in as follows:

static public function getFilteredCountryBasedOnContinent($query, $model)
{
    $query
        ->where('continent_id', $model->_active_continent_id);
}

<?php namespace Minakari\Customisations;
use \System\Classes\ResizeImages;

class Plugin extends PluginBase
{
    public function boot()
    {
    }

    public function registerMarkupTags(): array
    {
        $filters = [
            'rich_resize' => [$this, 'richResize']
        ];
        $functions = [];

        return [
            'filters' => $filters,
            'functions' => $functions,
        ];
    }

    public function richResize($html)
    {
        // Use DOMDocument to parse the HTML and find all image tags
        $dom = new \DOMDocument();
        @$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));

        $images = $dom->getElementsByTagName('img');

        foreach ($images as $image) {
            $src = $image->getAttribute('src');

            // Resize the image using the ResizeImages::resize() interface
            $resizedSrc = ResizeImages::resize($src, 1328, null, ['mode' => 'auto', 'quality' => '40', 'compress' => true]);

            // Replace the original src with the resized src
            $image->setAttribute('src', $resizedSrc);
        }

        // Return the modified HTML
        return $dom->saveHTML();
    }
}

It can be used as follows: {{your_field|rich_resize|content}} or `{{your_field|rich_resize|raw}}

public function relationExtendViewWidget($widget, $field, $model)
{
    $widget->bindEvent('list.injectRowClass', function ($record) {
        if ($record->someCondition) {
            return 'strike'; // Apply 'strike' css class if condition is met
        }
    });
}

Controller

    public function formExtendFields($form)
    {
        if ($this->formGetContext() === 'create') {
            $model = $this->formCreateModelObject();
            $sessionKey = $this->formGetSessionKey()`
            $currentUser = BackendAuth::getUser();

            $model->users()->add($currentUser, $sessionKey);
        }
    }

Define your fields in fields.yaml as

fields:
    address[streetname]:
                        label: Name
            type: text
    address[housenumber]:
                        label: House Number
            type: text
   address[zip]:
                        label: Zip
            type: text

toolbarButtons: []

LOAD_MODULES="System,Backend,Editor,Media"

Additionally, set the 'BACKEND_URI' variable to an empty string for using the root domain or subdomain:

BACKEND_URI=''

showDate:
    label: Show date
    type: switch
    value: 1

\System\Models\MailTemplate::listAllTemplates()

$query = \RainLab\Blog\Models\Post::with(['categories', 'featured_images'])
    ->withCount('featured_images')
    ->where('featured_images_count', '>', 0);

$posts = $query->listFrontEnd([
    'page'             => 1,
    'sort'             => 'published_at desc',
    'perPage'          => 10,
    'published'        => true,
});

Using the Query in Your Template

The result stored in $posts can be passed to your template layout or CMS page, either in the onInit or onStart function. However, you may notice that the post URLs are missing. This happens because we need to set them manually. Here’s a solution to ensure each post has a URL:

##
url = "/test"
description = "Example Template"
==
<?php 
function onStart()
{
    $query = \RainLab\Blog\Models\Post::with(['categories', 'featured_images'])
        ->withCount('featured_images')
        ->where('featured_images_count', '>', 0));

    // Select posts
    $posts = $query->listFrontEnd([
        'page'             => 1,
        'sort'             => 'published_at desc',
        'perPage'          => 10,
        'search'           => null,
        'category'         => null,
        'published'        => true,
    ]);

    // Get component details
    if (!empty($component = $this->layout->getComponent('blogPosts'))) {
        $postPage = $component->property('postPage');
        $categoryPage = $component->property('categoryPage');
    }
    $ctrl = $this->controller;
    $postPage = empty($postPage) ? 'blog/post' : $postPage;
    $categoryPage = empty($categoryPage) ? 'category/post' : $categoryPage;

    // Set on each post and category
    $posts->each(function($post) use ($ctrl, $postPage, $categoryPage) {
        $post->setUrl($postPage, $ctrl);
        $post->categories->each(fn ($item) => $item->setUrl($categoryPage, $ctrl)); 
    });

    // Pass to template
    $this['featuredPosts'] = $posts;
}
?>
==
<!-- Output -->

Bonus: Extending the Query with BlogHub

For our upcoming Falcon template, we extended this query to allow the user to set either a featured_image or a custom slider_image meta field. This is achieved using our BlogHub extension for OctoberCMS. To ensure that either a featured_image or a slider_image is available, the query is adjusted as follows:

$query = \RainLab\Blog\Models\Post::with(['categories', 'featured_images', 'ratmd_bloghub_meta'])
    ->withCount('featured_images')
    ->where(function ($builder) {
        $builder->where('featured_images_count', '>', 0);
        $builder->orWhere(function ($builder) {
            $builder->whereHas('ratmd_bloghub_meta', function ($builder) {
                $builder->where('ratmd_bloghub_meta.name', 'slider_image')
                        ->whereNotNull('ratmd_bloghub_meta.value');
            });
        });
    });

To include the slider_image field in your blog posts, install the BlogHub extension and add the following code at the bottom of your theme.yaml file:

ratmd.bloghub:
    post:
        slider_image:
            tab: Custom Meta
            type: mediafinder
            mode: image
            label: A special image used for sliders only.
            maxItems: 1

Now, you can output the slider_image as follows:

<img src="{{ post.bloghub.meta.slider_image | media }}" alt="..." /> 

    public function relationExtendManageWidget($widget, $field, $model)
        {                               
                        if($field === 'comments'
                                && property_exists($widget->config, 'context')
                                && $widget->config->context === 'create'
                        ) {
                                $post=Input::get('post');
                                if ($post){
                                        $widget->model->title = 're: '.$post['title'];
                                }
                        }                           
    }

You can use the php artisan october:passwd command to reset backend user password

php artisan october:passwd admin NEWPASS

Here this command will set the admin user's password to NEWPASS.

You can replace admin user and NEWPASS with your own details.

Reference: Change backend admin password

A simple way to check if it is v2 or above:

if (class_exists('System'))  {
    // Running October CMS 2.0 or above
}
else {
    // Running October CMS 1.0
}

For more precise checking, this will check if it is v2.2 or above:

if (class_exists('System') && version_compare(\System::VERSION, '2.2') !== -1) {
    // Running October CMS v2.2 or above
}

make sure that controller has ListController behaviour implemented

class Plugin extends PluginBase
{
    public function boot() {

        // extending Controller which has ListController Behavior 
        Items::extendListColumns(function($list, $model) {

            // we want only our Item model be extended
            if (!$model instanceof Item) {
                return;
            }

            // adding quantity column or other new column
            $list->addColumns([
                'quantity' => [
                    'label' => 'Quantity',
                    'type' => 'number',
                    'searchable' => true
                ]
            ]);

        });
    }

You can add any type of column partial or relational columns.

Reference : How To Add New Column In October Cms List

It can be usefull when you need to show extended information with existing backend list or other 3rd party plugins.

To avoid getting this error, you need to configure your relation to get the data with trashed.

Go to your parent model, and change your relation like this :

    public $belongsTo = [
        'relationName' => [ 
                    \Author\Plugin\Models\YourRelationModel::class,
                    'scope'=>'withTrashed'
                ],
    ];

and all works again.

side-menu-item:
  label: yourLabel
  url: your/controller/url
  icon: your-icon
  ...
  counter: \AuthorName\PluginName\Models\YourClass::Yourfunction
  counterLabel: Your Label

2. then in your model PHP file, add your function which is returning a number like this for example :

<?php namespace  \AuthorName\PluginName\Models;

class YourClass extends Model{

  ...

  public static function Yourfunction(){
    // you can do whatever you need right here, you just need to not forget to return a number.
    return self::count();

  }
}

3. check the result in your backend

Blinks4451850 and mjauvin have developed a clear variant to control the order:

Event::listen('backend.menu.extendItems', function ($manager) {
    $items = $manager->listMainMenuItems();
    $data = [
        'October.Backend.Media',
        'October.Backend.Dashboard',
        'October.Cms.cms',
        'RainLab.Builder.Builder',
    ];
    $i = 0;
    foreach ($data as $name) {
        if ($item = array_get($items, strtoupper($name), false)) {
            $item->order = $i;
            $i++;
        }
    }
});

    public $hasOne = [
        'comments_count' => [Comment::class, 'count' => true],
    ];

To display this count value in a List, use the useRelationCount option in your columns.yaml. Using the usual select: count method would result in a Unknown column 'count' in 'field list' error.

    comments_count:
        label: Number of related comments
        type: number
        relation: comments_count
        useRelationCount: true             # this is important

An example:

Testimonials should be placed on different pages. So I have to add every testimonial to a CMS page.

However, not every page (imprint, contact form, etc.) can display testimonials. Therefore, a dropdown with all options would be a bit confusing for the customer.

In order to only display CMS pages in the backend dropdown that display a testimonial, the withComponent scope can be used.

$options = \Cms\Classes\Page::withComponent('showTestimonial')->all();

class Plugin extends PluginBase
{
    // make  sure the rainlab.user plugin is loaded already
    public $require = ['RainLab.User'];

    // ... continue with other initialization

Then, in your test class you can create new user:

        // create a user
        $this->user = User::create([
            'name' => 'Some User',
            'email' => 'test@test.com',
            'password' => 'changeme!!!',
            'password_confirmation' => 'changeme!!!'
        ]);

        // in order to log in as this user, we must be activated
        $this->user->is_activated = true;
        $this->user->activated_at = now();
        $this->user->save();

... and log-in as that user elsewhere in your unit tests:

        // register the auth facade
        $alias = AliasLoader::getInstance();
        $alias->alias('Auth', 'RainLab\User\Facades\Auth');

        App::singleton('user.auth', function() {
            return \RainLab\User\Classes\AuthManager::instance();
        });

        Auth::login($this->user);
        // we should now be authenticated
        $this->assertTrue(Auth::check());

You can do this in 2 ways. First being by overloading the controller middleware:

    Event::listen('backend.page.beforeDisplay', function ($backendController, $action, $params) {
        if ($backendController instanceof \System\Controllers\Settings && $action === 'index') {
            $backendController->middleware(function ($request, $response) {
                $basePath = url('//www.yoururl.com');
                $injectedJs = <<< THEINJECTEDJS
<script>
    $(function() {
        $('.layout-cell .oc-logo-transparent').on('click', function(){
             document.location.href = '$basePath';
             return false;
        });
    });
</script>
THEINJECTEDJS;
                $response->setContent($response->getContent() . $injectedJs);
            });
        }
    });

The second, you could also do this by listening to the extendHead view event:

    Event::listen('backend.layout.extendHead', function ($controller, $layout) {
        $basePath = url('//www.yoururl.com');
                return <<< THEINJECTEDJS
<script>
    $(function() {
        $('.layout-cell .oc-logo-transparent').on('click', function(){
             document.location.href = '$basePath';
             return false;
        });
    });
</script>
THEINJECTEDJS;
                }

Which is similar but does the same without overloading the middleware function.

public function registerQuickActions()
{
    return [
        'help' => [
            'label' => 'Read the documentation',
            'icon' => 'icon-question-circle',
            'url' => Backend::url('read-the-docs'),
        ],
        'mail' => [
            'label' => 'Send email to developers',
                        // SVG-icon example
            'iconSvg' => '/plugins/sandbox/quickactions/assets/svg/mail.svg',
            'url' => Backend::url('mail-to-devs'),
        ],           
    ];
}

Works with the latest version of OctoberCms installed via composer.

\Event::listen('cms.page.init', function($controller) {
    $controller->vars['my_special_variable'] = 'some-value';
});

You can now access this variable in Twig or any PHP code section that has access to the CMS controller instance:

{{ my_special_variable }}

Page lifecycle example, works in Components as well:

function onStart()
{
    $special = $this->controller->vars['my_special_variable'];
}

Find the scripts section in your projects composer.json file and add the php artisan october:up script to the post-update-cmd section. It might look like this now:

"scripts": {
        "post-create-project-cmd": [
                "php artisan key:generate"
        ],
        "post-update-cmd": [
                "php artisan october:up"
        ]
},

public function boot(): void
{
    /** @var \Illuminate\Routing\Router $router */
    $router = $this->app->make(\Illuminate\Routing\Router::class);
    $router->pushMiddlewareToGroup('web', YourMiddleware::class);
}

    public function formExtendModel($model)
    {
        if ($this->formGetContext() === 'create') {
            $model->your_field = 'Your default value';
        }
    }

        \Backend\Models\User::extend(function ($model) {
            $model->bindEvent('model.afterCreate', function () use ($model) {
                \Backend\Models\UserPreference::forUser($model)->set('backend::backend.preferences', ['locale' => 'es']);
            });
        });

As an example, let us extend the Maintainence Mode page from another plugin. In the Plugin.php boot method, include:

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

            if (!$widget->getController() instanceof \System\Controllers\Settings) {
                return;
            }

            // Only for the MaintenanceSetting model
            if (!$widget->model instanceof \Cms\Models\MaintenanceSetting) {
                return;
            }

            $widget->addFields([
                'disable_feature' => [
                    'label'   => 'Disable Feature?',
                    'type'    => 'switch'
                ]
            ]);
        });

Just add a file called "init.php" within your plugin's root:

init.php:

<?php

function myGlobalFunction()
{
    return "Hello World!";
}

    <input name="filter-records" type="text" class="form-control icon search growable"
        data-request="onFilterRecords"
        data-track-input
    />

Add this to your Controller class:

    public function onFilterRecords()
    {   
        $reorderController = $this->asExtension('ReorderController');
        $reorderController->reorder();
        return [
            '#reorderRecords' => $reorderController->reorderMakePartial('records', ['records' => $reorderController->vars['reorderRecords']]),
        ];
    }

    public function reorderExtendQuery($query)
    {   
        if ($term = Input::get('filter-records')) {
            $query->where('name', 'like', "%$term%");
        }
    }

    public function onGetFilteredRecords()
    {
        $this->makeLists();
        $listWidget = $this->asExtension('ListController')->listGetWidget();

        $query = $listWidget->prepareQuery();
        $records = $query->get();

        // do something with $records
    }

$registered = Input::get('is_registered');
$registeredGroup = \RainLab\User\Models\UserGroup::whereName('registered')->first();
if ($registered) {
    if (!$user->groups()->whereName('registered')->exists()) {
        $user->groups()->add($registeredGroup);
        $user->save();
    }
} else {
    if ($user->groups()->whereName('registered')->exists()) {
        $user->groups()->remove($registeredGroup);
        $user->save();
    }
}

https://github.com/artistro08/artistro08.github.io

Clone:

git clone https://github.com/artistro08/artistro08.github.io.git

Uses docsify.js

<?php 
        $isCreate = $this->formGetContext() == 'create'; 
        $pageUrl = isset($pageUrl) ? $pageUrl : null; 
?> 
<div class="form-buttons loading-indicator-container"> 

        <!-- Save --> 
        <a 
                href="nojavascript...;" 
                class="btn btn-primary oc-icon-check save" 
                data-request="onSave" 
                data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>" 
                data-request-before-update="$el.trigger('unchange.oc.changeMonitor')" 
                <?php if (!$isCreate): ?>data-request-data="refresh:1"<?php endif ?> 
                data-hotkey="ctrl+s, cmd+s"> 
                        <?= e(trans('backend::lang.form.save')) ?> 
        </a> 

        <?php if (!$isCreate): ?> 
                <!-- Save and Close --> 
                <a 
                        href="nojavascript...;" 
                        class="btn btn-primary oc-icon-check save" 
                        data-request-before-update="$el.trigger('unchange.oc.changeMonitor')" 
                        data-request="onSave" 
                        data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"> 
                                <?= e(trans('backend::lang.form.save_and_close')) ?> 
                </a> 
        <?php endif ?> 

        <!-- Preview --> 
        <a 
                href="<?= URL::to($pageUrl) ?>" 
                target="_blank" 
                class="btn btn-primary oc-icon-crosshairs <?php if (!false): ?>hide<?php endif ?>" 
                data-control="preview-button"> 
                        <?= e(trans('backend::lang.form.preview_title')) ?> 
        </a> 

        <?php if (!$isCreate): ?> 
                <!-- Delete --> 
                <button 
                        type="button" 
                        class="btn btn-default empty oc-icon-trash-o" 
                        data-request="onDelete" 
                        data-request-confirm="<?= e(trans('rainlab.blog::lang.post.delete_confirm')) ?>" 
                        data-control="delete-button"></button> 
        <?php endif ?> 
</div> 

Then, in your plugins own Plugin.php file, add the following code in the boot() method:

\Event::listen('backend.form.extendFieldsBefore', function ($widget) {
                if (!($widget->getController() instanceof \RainLab\Blog\Controllers\Posts && $widget->model instanceof \RainLab\Blog\Models\Post)) {
                        return;
                }
                $widget->fields['toolbar']['path'] = '$/author/plugin/partials/_post_toolbar.htm';
});

After saving your form, the page should refresh and display the right values if you modified something with a beforeSave event.

Credits to @mjauvin and @lucas.sanner54070 for suggesting this in the October CMS forums, with the above example of the Rainlab Blog plugin:

Event::listen('backend.menu.extendItems', function($manager) {
    $manager->removeMainMenuItem('October.Cms', 'cms');
    $manager->removeSideMenuItem('October.Cms', 'cms', 'pages');
});

Then include via:

/**
 * Extend Rich Editor.
 */
\Backend\FormWidgets\RichEditor::extend(function ($widget) {
    $widget->addJs('/plugins/author/name/assets/js/froala.clean-html.js', 'Author.Name');
});

The links will appear in this dropdown

In your plugin boot method add those two events.

Event::listen('backend.richeditor.listTypes', function () {
    return [
        'your_type' => 'Title',
    ];
});

Event::listen('backend.richeditor.getTypeInfo', function ($type) {
    if ($type === 'your_type') {
        return Model::getRichEditorTypeInfo($type);
    }   
});

In your model prepare the generate url logic.

public static function getRichEditorTypeInfo($type)
{
    if ($type == 'your_type') {
        $yourTypes = self::all();
        $selectOptions = [];  //array to populate with urls

        foreach ($yourTypes as $type) {
            $selectOptions['your url'] = [
                'title' => 'Your title',
                // 'items'=> additional items added as subsection
            ];
        }

        return $selectOptions;
    }

    return [];
}

At some point you probably needed to create some kind of widget with post author data like it's displayed on other blogging platforms such as Medium or as usually seen on many Wordpress blogs.

Dive in to learn how to exactly get user data from post and display them on your CMS page

Let's assume that you have some experience working with OctoberCMS and you already have CMS page with blog post component in place.

If you haven't worked with RainLab.Blog plugin before, please go ahead and read the official documentation.

Post page

We are using bootstrap as css framework which won't be a problem teaching you how to display user data but your design might be different so keep that in mind.

Basic display of post data

<section id="single-post">
    <div class="container">
        <div class="single-row row">
            <div class="single-col-1 col-xl-7 col-lg-7 col-md-8 col-sm-12 col-10">
                <!-- POST TITLE -->
                <h1 class="post-title">
                    {{ post.title }}
                </h1>
                <hr class="post-title-separator">
                <!-- POST PUBLISH DATE -->
                <p class="post-date">{{ post.published_at | strftime('%d.%m.%Y')}}</p>
            </div>
            <!-- POST CONTENT -->
            <div class="single-col-2 col-xl-7 col-lg-8 col-md-10 col-sm-10 col-10">
                {{ post.content_html|raw }}
            </div>
        </div>
    </div>
</section>

As you can see from the code above it's simple and we get to show basic post data such as title, published at date, and post content. If you are having issues with date format try installing twig extension plugin.

Now, let's say you want to display name, and avatar of the post author. If you tried working with OctoberCMS and Blog plugin it's really simple. All you need to do is access user property inside post model.

<section id="single-post">
    <div class="container">
        <div class="single-row row">
            <div class="single-col-1 col-xl-7 col-lg-7 col-md-8 col-sm-12 col-10">
                <!-- POST TITLE -->
                <h1 class="post-title">
                    {{ post.title }}
                </h1>
                <hr class="post-title-separator">

                <!-- AUTHOR DATA -->
                 <img style="border-radius: 40px;display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="{{ post.user.avatar.path }}" height="80px;"/>
                <p class="post-date">By: 
                   style="color: #ef0d33">
                        {{ post.user.first_name }} {{ post.user.last_name }}
                    </a>
                </p>

                <!-- POST PUBLISH DATE -->
                <p class="post-date">{{ post.published_at | strftime('%d.%m.%Y')}}</p>
            </div>
            <!-- POST CONTENT -->
            <div class="single-col-2 col-xl-7 col-lg-8 col-md-10 col-sm-10 col-10">
                {{ post.content_html|raw }}
            </div>
        </div>
    </div>
</section>

If you are curious what is inside User model you can use code section on CMS page to find out. It's best to use onEnd function as that's when page and components are loaded fully. For example:

function onEnd(){
    dd($this->post->user->attributes); // This will give you user data 
}

Hope this helps you understand how RainLab.Blog Post component works

You can use the extend() method to add a custom handler:

    // Plugin.php
    public function boot()
    {
        \System\Controllers\Settings::extend(function($controller) {
            $controller->addDynamicMethod('onMyCustomHandler', function() {
                return 'handler called!';
            });
        });
    }

You can now call this handler from any custom partial in your backend settings form:

<button class="btn btn-default"
        data-handler="onMyCustomHandler">
    Trigger AJAX request
</button>

The menus created using the RainLab.Pages plugin do not support translation. In order to overcome this limitation, I propose this simple solution:

When creating your menu items, use a localization string as the title (e.g. author.plugin::lang.menu.menuName)

Then when rendering the menu in your partial, just use the |trans filter to localize the menu item:

<ul>
    {% for item in items if not item.viewBag.isHidden %}
        <li>{{ item.title | trans }}</li>
    {% endfor %}
</ul>

Of course, you'll need to create an entry in your plugin's lang folder for those localization strings.

You may find the need to update this content dynamically, based upon some action the user could make within the report widget. October's AJAX framework makes this relatively easy, so long as you know what to return from your AJAX handler.

This trick will provide an example of how to update your report widget partial using October's AJAX framework.

Note: This trick assumes you have already created your report widget class and have a partial that needs to be updated. If you need help creating a report widget, please see the documentation Report Widgets.

1. Add a element to your partial to make the AJAX request. Here is an example:

   <button
   data-request="onUpdateWidget">
   Update
   </button>

2. Add a new method to your report widget class public function onUpdateWidget(). For example:

   public function onUpdateWidget()
   {
   return [
       '#'.$this->alias => $this->render()
       ];
   }

The secret sauce here is the widget's alias property, which determines which widget is actually being updated. Your widget should already have a render() method which returns the contents of the widget partial.

Now, when you click the button in your report widget, the AJAX framework will make a request and call the handler onUpdateWidget. In this example, we have re-rendered the widget itself so any changes to data will be displayed.

We are free to return any content we wish, even other partials, or static content. The possibilities are limitless!

{{ 'now' | date('Y') }}

You'll find this code snippet very useful when displaying your copyright in the footer of the website. (e.g. MyWebsite © 2019)

1. Update the recordOnClick property of your config_list.yaml inside your controller's folder:

# Link URL for each record
recordOnClick: "$.popup({ handler: 'onUpdateForm', extraData: { record_id: ':id' } })"

2. Register the onUpdateForm handler in your controller class:

public function onUpdateForm()
    {     
        $this->asExtension('FormController')->update(post('record_id'));
        $this->vars['recordId'] = post('record_id');
        return $this->makePartial('update_form');
    }

3. Create the _update_form.htm partial inside your controller's views directory (i.e. /plugins/author/controllers/controllerName):

<?= Form::open(['id' => 'updateForm']) ?>
    <input type="hidden" name="record_id" value="<?= $recordId ?>" />
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="popup">×</button>
        <h4 class="modal-title"><?= e($this->pageTitle) ?></h4>
    </div>

    <?php if (!$this->fatalError): ?>

        <div class="modal-body">
            <?= $this->formRender() ?>
        </div>
        <div class="modal-footer">
            <button
                type="submit"
                data-request="onUpdate"
                onclick="$(this).data('request-data', {
                    redirect: 0
                })"
                data-hotkey="ctrl+s, cmd+s"
                data-popup-load-indicator
                class="btn btn-primary">
                <u>S</u>ave
            </button>

            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.form.cancel')) ?>
            </button>
        </div>

    <?php else: ?>

        <div class="modal-body">
            <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
        </div>
        <div class="modal-footer">
            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.form.close')) ?>
            </button>
        </div>

    <?php endif ?>

    <script>
        setTimeout(
            function(){ $('#updateForm input.form-control:first').focus() },
            310
        )
    </script>

<?= Form::close() ?>

4. Register the onUpdate handler in the controller class:

public function onUpdate()
    {
        $this->asExtension('FormController')->update_onSave(post('record_id'));
        return $this->listRefresh();
    }

Luckily, there is a very useful translator.beforeResolve event that allows translation results to be modified before they are returned back to the application.

With some slight enhancements, you are able to override any translation string present in your October app with a single event listener in your plugin's boot() method:

use Event;
use Lang;

public function boot()
{
        Event::listen('translator.beforeResolve', function ($key, $replace, $locale) {
                $plugin = 'author.plugin'; // Replace this string with the path of the plugin this is being executed from

                // Check the translation doesn't originate from this plugin
                if (substr($key, 0, strlen($plugin)) != $plugin) {
                        // Contruct a possible translation path
                        $path = $plugin . '::lang.' . str_replace('::', '.', $key);

                        // Retrieve its results
                        $result = Lang::get($path);

                        // If an overriding translation is found, return it
                        if ($result != $path) {
                                return $result;
                        }
                }
        });
}

Now, you can modify any translation in your plugin's lang.php files, like so:

<?php return [
    'acme' => [
        'blog' => [
            'lang' => [
                'plugin' => [
                    'name' => 'My Blog', // acme.blog::lang.plugin.name is overriden with 'My Blog'
                ],
            ],
        ],
    ],
    'backend' => [
        'lang' => [
            'user' => [
                'menu_label' => 'Users', // backend::lang.user.menu_label is overriden with 'Users'
            ],
        ],
    ],
];

1. Storm UI is based on Bootstrap 3
2. Decoupling Storm UI is a tedious process
3. This limits what is possible depending on your knowledge, time, and requirements

Please note this trick is intended to get you started, and does not cover making modifications to the UI.

Instructions

1. Create a new plugin php artisan create:plugin Author.CustomSkin
2. Create a new folder in your plugin's directory called skin
3. Create a new class in your plugin's skin directory called CustomSkin.php:

<?php namespace Author\Plugin\Skin;

use Backend\Skins\Standard as BackendSkin;

/**
 * Modified backend skin information file.
 *
 * This is modified to include an additional path to override the default layouts.
 *
 */

class CustomSkin extends BackendSkin
{
    /**
     * {@inheritDoc}
     */
    public function getLayoutPaths()
    {
        return [
            plugins_path('/author/plugin/skin/layouts'),
            $this->skinPath . '/layouts'
        ];
    }
}

4. Copy the layouts directory from the backend module to your plugin's skin directory

5. Update the backendSkin property in config/cms.php to use your new skin class:

   /*
   |--------------------------------------------------------------------------
   | Back-end Skin
   |--------------------------------------------------------------------------
   |
   | Specifies the back-end skin to use.
   |
   */
   
   'backendSkin' => 'Author\CustomSkin\Skin\CustomSkin',

When you are finished, you should have a new plugin with a directory structure as below:

plugins/
  author/                  <=== Author name
    customskin/            <=== Plugin name
      skin/
        layouts/
        CustomSkin.php     <=== Custom skin class
      ...
      Plugin.php           <=== Plugin registration file

Upvote this trick or follow me on Twitter @thegreatbarker if you would like me to publish a blog or video with more information!

Credits

Many thanks to @LukeTowers for helping me get started and better understanding how October's Backend works!

Create a trait that extends the controller and form fields.

traits/ColumnFieldPermissions.php

trait ColumnFieldPermissions
{
    public function formExtendFields($form, $fields)
    {
        foreach ($fields as $name => $field) {
            $permissionValue = array_get($field->config, 'permission');
            if ($permissionValue && !$this->user->hasAccess($permissionValue)) {
                if (array_get($field->config, 'permissionReadOnly')) {
                    $field->readOnly = true;
                    $field->disabled = true;
                } else {
                    $form->removeField($name);
                }
            }
        }
    }

    public function listExtendColumns($list)
    {
        foreach ($list->columns as $name => $column) {
            $permissionValue = array_get($column, 'permission');
            if ($permissionValue && !$this->user->hasAccess($permissionValue)) {
                $list->removeColumn($name);
            }
        }
    }
}

Example of usage

use Samuell\Plugin\Traits\ColumnFieldPermissions;

class YourController extends Controller
{
    use ColumnFieldPermissions;

    ....
}

Then we can use it in columns or fields like

name:
    permission: my.custom.permission

In this tutorial, we show you how you to implement dynamic modal windows with Ajax in October CMS. Before you can create the modal popup using the Bootstrap Framework, the Bootstrap and jQuery library need to included those in your layout htm file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
{% framework extras %}
{% scripts %}

1. Create a new component, for example, we name it: AjaxPopup:

php artisan create:component Algoriq.Backpack AjaxPopup

2. Then we write our function to call our popup window partial:

   public function onLoadPopupForm()
   {
       return [
           'popup' => $this->renderPartial('@popup.htm')
       ];
   }

3. Bootstrap Modal Button. The following example creates a button. This button (openBtn) triggers the ajax process to show the modal popup window, we will write it in the default.htm component template.

<a href="nojavascript...;" class="btn btn-primary" data-show-popup>Show popup</a>

4. Bootstrap Modal Popup. As next step we will create a new modal popup window template and call it popup.htm in same directory where the default.htm is and put the following code inside this file:

<div class="modal fade" id="ajaxPopupForm" tabindex="-1" role="dialog" aria-labelledby="ajaxPopupFormLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ajaxPopupFormLabel">Ajax Popup</h5>
                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    data-disable-on-ajax-start
                    data-enable-on-ajax-always
                    aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal"
                    data-disable-on-ajax-start
                    data-enable-on-ajax-always>
                    Close
                </button>
                <button
                    type="submit"
                    class="btn btn-primary"
                    data-disable-on-ajax-start
                    data-enable-on-ajax-always>
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

5. After we have created a button and our modal template, we need to create an ajax handler to utilize our dynamic modal popups and a script where we can initialise this handler. So in the next step, we create two javascript asset files the first one we name it, for example, ajaxUtils.js and put the following code inside this file:

$(function() {
    "use strict";

    var ajaxUtils = function() {
        this.registerHandlers()
    };

    ajaxUtils.prototype.registerHandlers = function() {
        var requestSenderSelector = 'form, a[data-request], input[data-request], select[data-request]';
        $(document).on('ajaxPromise', requestSenderSelector, $.proxy(this.onFormAjaxInit));
        $(document).on('ajaxFail', requestSenderSelector, $.proxy(this.onFormAjaxFail));
        $(document).on('ajaxDone', requestSenderSelector, $.proxy(this.onFormAjaxSuccess));
        $(document).on('shown.bs.modal', 'div.modal', $.proxy(this.onModalDisplayed, this));
        $(document).on('hidden.bs.modal', 'div.modal', $.proxy(this.onModalHidden, this));
    };

    ajaxUtils.prototype.onFormAjaxInit = function(e) {
        var $form = $(e.currentTarget).closest('form');

        if ($(e.target).attr('data-no-ajax-disable-effects') !== undefined) {
            return
        }

        $form.find('[data-disable-on-ajax-start]').prop('disabled', true).attr('disabled', 'disabled')
    };

    ajaxUtils.prototype.onFormAjaxFail = function(e) {
        var $form = $(e.currentTarget).closest('form');

        $form.find('[data-enable-on-ajax-fail], [data-enable-on-ajax-always]').prop('disabled', false).removeAttr('disabled')
    };

    ajaxUtils.prototype.onFormAjaxSuccess = function(e) {
        var $form = $(e.currentTarget).closest('form');

        $form.find('[data-enable-on-ajax-success], [data-enable-on-ajax-always]').prop('disabled', false).removeAttr('disabled')
    };

    ajaxUtils.prototype.onModalDisplayed = function(e) {
        var $defaultFocus = $('[data-default-focus]', e.currentTarget);

        $defaultFocus.focus()
    };

    ajaxUtils.prototype.onModalHidden = function(e) {
        $(e.currentTarget).remove()
    };

    new ajaxUtils()

});

6. Our second asset file with the name ajaxPopup.js should contain the following code:

$(function() {
    var PopupBuilder = function() {

        function init() {
            bindEventHandlers()
        }

        function bindEventHandlers() {
            $(document).on('click', 'a[data-show-popup]', onLoadAjaxPopup);
        }

        function onLoadAjaxPopup(e) {
            showAjaxPopup(e)
        }

        function showAjaxPopup(e) {

            $.oc.stripeLoadIndicator.show();

            $(e.currentTarget).request('onLoadPopupForm', {
                data: {},
                success: function(data) {
                    $(data.popup).modal({
                        backdrop: 'static',
                        keyboard: true
                    });
                }
            }).always(function() {
                $.oc.stripeLoadIndicator.hide();
            });

            e.preventDefault();

            return false
        }

        init()
    };

    new PopupBuilder()
});

Now you can place those files in your plugin assets folder for example (“assets/js/”) and initialize those assets scripts inside your plugin the following way:

    public function onRun()
    {
        $this->addJs('/plugins/algoriq/backpack/assets/js/ajaxUtils.js');
        $this->addJs('/plugins/algoriq/backpack/assets/js/ajaxPopup.js');
    }

Thank you for your attention I hope you enjoyed this tutorial.

However, if you have any suggestions or you probably see some room for improvements, then I would kindly ask you to drop me a line and I will get in touch with you as soon as possible!

String

{variable name="variableName" tab="tabName" label="fieldLabel" type="text"}{/variable}

Use in twig:

{{ variableName }}

Textarea

{variable name="variableName" label="fieldLabel" tab="tabName" type="textarea"}{/variable}

Use in twig:

{{ variableName }}

Checkbox

{variable name="variableName" tab="tabName" label="fieldLabel" type="checkbox"}{/variable}

Use in twig:

{% if variableName %}

Mediafinder

{variable name="variableName" tab="tabName" label="fieldLabel" type="mediafinder"}{/variable}

Use in twig:

{{ variableName | media }}

Dropdown

{variable name="variableName" tab="tabName" label="fieldLabel"
options="Option1|Option2|Option3" type="dropdown"}{/variable}

or

{variable name="variableName" tab="tabName" label="fieldLabel"
options="one:Option1|two:Option2|three:Option3" type="dropdown"}{/variable}

Use in twig:

{% if variableName == 2 %} {# This means Option2 is selected. #}
or 
{% if variableName == two %} {# This means Option2 is selected (with keys). #}

Repeater

{repeater name="repeaterName" prompt="Add an item." tab="tabName"}
    [...]
{/repeater}

Use in twig:

{% for repeaterItem in repeaterName %}
    [...]
{% endfor %}

• Post: This is the base model, a simple blog post. We want to add the relation manager to this model's form.
• Comment: This is the related model. A blog post has many comments.

<?php
namespace Acme\Blog\Models;

class Post extends Model
{
    // The relation manager works for any relation type, use whatever you need.
    public $hasMany = ['comments' => \Acme\Blog\Models\Comment::class];
}

Implementing and configuring the relation controller

In your PostsController add the following lines:

<?php
namespace Acme\Blog\Controllers;

class Posts extends Controller
{
    public $implement = [
        'Backend.Behaviors.FormController',
        'Backend.Behaviors.RelationController',         // Add this!
    ];

    public $formConfig = 'config_form.yaml';
    public $relationConfig = 'config_relation.yaml';    // Add this!
}

Next, create the config_relation.yaml file in plugins/acme/blog/controllers/posts/config_relation.yaml.

Paste the contents below (in case of a hasMany relation) into the yaml file. You can find more examples for different relationship types (hasOne, belongsToMany, etc) in the official docs.

comments:
    label: Comment    
    deferredBinding: true
    view:
        list: $/acme/blog/models/comment/columns.yaml
        toolbarButtons: create|delete
    manage:
        form: $/acme/blog/models/comment/fields.yaml
        recordsPerPage: 10

Displaying the relation manager

Create a new file in plugins/acme/blog/controllers/posts/_comments.htm. Paste the following contents:

<?= $this->relationRender('comments'); ?>

The comments key corresponds to the base key in your config_relation.yaml.

Now you can include this partial in your model's form definition to display the relation manager.

# in plugins/acme/blog/models/post/fields.yaml
comments:
    type: partial
    path: comments # includes _comments.htm from the current controller's path.

Firstly, this code is required in your plugin's Plugin.php:

use Backend\Controllers\Users as BackendUserController;
// ...
    public function boot()
    {
            BackendUserController::extend(function ($controller) {
                    $controller->listConfig = $controller->makeConfig($controller->listConfig);
                    $controller->listConfig->toolbar = array_merge($controller->listConfig->toolbar, ['buttons' => '$/acme/blog/partials/toolbar.users.htm']);
            });

            BackendUserController::extendListColumns(function ($list, $model) {
                    $list->removeColumn('groups');
            });

            BackendUserController::extendFormFields(function($form, $model, $context) {
                    $form->removeField('groups');
            });
    }

Make sure to replace acme/blog with the name of your plugin.

Finally, create the file partials/toolbar.users.htm in your plugin's root directory, with the following code:

<div data-control="toolbar">
    <a href="<?= Backend::url('backend/users/create') ?>" class="btn btn-primary oc-icon-plus">
        <?= e(trans('backend::lang.user.new')) ?>
    </a>
    <?php if ($this->user->isSuperUser()): ?>
        <a href="<?= Backend::url('backend/userroles') ?>" class="btn btn-default oc-icon-address-card">
            <?= e(trans('backend::lang.user.role.list_title')) ?>
        </a>
    <?php endif ?>
</div>

<?php
namespace Acme\BlogBanner;
use System\Classes\PluginBase;
use Event;
/**
 * Class Plugin
 *
 * @package Acme\BlogBanner
 */
class Plugin extends PluginBase
{
    public $require = ['RainLab.Blog'];
    /**
     * @inheritdoc
     */
    public function pluginDetails(): array
    {
        return [
            'name'        => 'Blog Banner',
            'description' => 'A RainLab.Blog extension adding banner image via Media Manager to posts.',
            'author'      => 'Acme',
            'icon'        => 'icon-file-image-o',
        ];
    }
    public function register()
    {
        Event::listen('backend.form.extendFields', function (\Backend\Widgets\Form $formWidget) {
            if (!$formWidget->getController() instanceof \RainLab\Blog\Controllers\Posts) {
                return;
            }
            if (!$formWidget->model instanceof \RainLab\Blog\Models\Post) {
                return;
            }
            $formWidget->addSecondaryTabFields([
                'metadata[banner_image]' => [
                    'tab' => 'rainlab.blog::lang.post.tab_manage',
                    'label'   => 'Banner Image',
                    'type' => 'mediafinder',
                    'mode' => 'image'
                ],
            ]);
            $formWidget->removeField('featured_images');
        });
    }
}

Here, we call it banner_image instead of featured_image to avoid any conflicts, but that's all you need to enable the Media Manger for blog posts.

To use the image in the CMS pages, just use:

<img src="{{ post.metadata.banner_image|media }}">

// plugins/yourvendor/yourplugin/routes.php

use System\Classes\MailManager;
use System\Models\MailLayout;
use System\Models\MailTemplate;

Route::get('/mail', function () {
    $data = [
        'your-dummy' => 'data',
    ];

    $layout = new MailLayout;
    $layout->fillFromCode('default'); // Change this to use another layout.

    $template = new MailTemplate;
    $template->layout = $layout;
    $template->fillFromContent(File::get(base_path('plugins/path/to/your/views/template.htm')));

    return MailManager::instance()->renderTemplate($template, $data);
});

Now visit http://yoursite.test/mail to preview the mail in your browser. Don't forget to remove this route once you are done!

$this['results'] = YourModel::paginate(10);

You can output the default pagination markup using the | raw filter:

{{ results | raw }}

If you need to customize the markup of the pagination you'll have to generate it yourself:

{% if results.hasPages %}
    <ul class="pagination">
        <li>
            {% if results.currentPage > 1 %}
                <a href="{{ results.previousPageUrl }}" rel="prev">«</a>
            {% else %}
                <span class="disabled">«</span>
            {% endif %}
        </li>

        {% for page in range(1, results.lastPage) %}
            <li>
                <a href="{{ results.url(page) }}">{{ page }}</a>
            </li>
        {% endfor %}

        <li>
            {% if results.hasMorePages %}
                <a href="{{ results.nextPageUrl }}" rel="next">»</a>
            {% else %}
                <span class="disabled">»</span>
            {% endif %}
        </li>
    </ul>
{% endif %}

Frequently, this blue clashes with your site's color scheme, and thus is problematic. Thankfully, there is a simple CSS fix:

.stripe-loading-indicator .stripe,
.stripe-loading-indicator .stripe-loaded {
    background: red !important;        
}

You are also able to change the height of the stripe as well, if you wish:

height: 8px !important;

In your Plugin.php add the following three event listeners. Replace the your-items key with a more descriptive string.

public function boot()
{
    \Event::listen('pages.menuitem.listTypes', function () {
        return [
            'your-items' => 'Name of the items',
        ];
    });

    \Event::listen('pages.menuitem.getTypeInfo', function ($type) {
        if ($type === 'your-items') {
            $theme = \Cms\Classes\Theme::getActiveTheme();
            $pages = \Cms\Classes\Page::listInTheme($theme, true);
            return [
                'dynamicItems' => true,
                'cmsPages' => $pages,
            ];
        }
    });

    \Event::listen('pages.menuitem.resolveItem', function ($type, $item, $url, $theme) {
        if ($type === 'your-items') {
            return YourModel::resolveMenuItem($item, $url, $theme);
        }
    });
}

Then add the resolveMenuItem method to your Model. The method has to return an array of all the items you want to add. The example code below fetches all models from the database and generates the link using a specific cms page.

public static function resolveMenuItem($item, $url, $theme)
{
    $pageName = $item->cmsPage;
    $cmsPage = \Cms\Classes\Page::loadCached($theme, $pageName);
    $items   = self
        ::orderBy('created_at', 'DESC')
        ->get()
        ->map(function (self $item) use ($cmsPage, $url, $pageName) {
            $pageUrl = $cmsPage->url($pageName, ['slug' => $item->slug]);

            return [
                'title'    => $item->name,
                'url'      => $pageUrl,
                'mtime'    => $item->updated_at,
                'isActive' => $pageUrl === $url,
            ];
        })
        ->toArray();

    return [
        'items' => $items,
    ];
}

You will now find your new menu items type in the respective editors of RainLab.Sitemap and RainLab.Pages.

==
function onInit()
{
   $dir = storage_path('app/media/your-folder');
   $this['files'] = File::files($dir);
}
==
<ul>
    {% for file in files %}
       <li>{{ file }}</li>
    {% endfor %}
</ul>

Method2: Use the Storage::files method to list the images in a path.

==
function onInit()
{
   $dir = 'media/your-folder';
   $this['files'] = Storage::files($dir);
}
==
<ul>
    {% for file in files %}
       <li>{{ file }}</li>
    {% endfor %}
</ul>

Note: Method1 returns an array of Symfony\Component\Finder\SplFileInfo objects which give much more information about the files (size, perms, owner, etc).

What if you are only interested in using the Backend of OctoberCMS, without the CMS module or a theme? This trick will help you remove the CMS module from your application.

1. Update config/cms.php:
2. Remove the activeTheme value
3. Remove Cms from the loadModules array
4. Optionally, you may remove the 'backendUri' value if you want your application accessible from the root domain. i.e. https://www.myapp.com vs https://www.myapp.com/backend

And that's all there is to it! You now have a fully functional backend application using OctoberCMS!

If you are using composer, you can also remove the cms package from your composer.json. Please note this can lead to problems if any of your plugins register components, or references classes found in the CMS module, such as the Page class. Proceed with caution!

    public function formExtendModel($model)
    {
        if ($this->formGetContext() === 'create') {
            $model->your_field = 'Your default value';
        }
    }

Add the following class to your plugin:

<?php namespace YourVendor\YourPlugin\Models;

/**
 * Custom thumbnail name attachment.
 *
 * @see https://octobertricks.com/tricks/use-original-filename-thumbnail-name
 */
class File extends \System\Models\File
{
    /**
     * Generates a thumbnail filename using the original filename.
     * @return string
     */
    public function getThumbFilename($width, $height, $options)
    {
        $original = parent::getThumbFilename($width, $height, $options);

        $newName = str_slug(pathinfo($this->file_name, PATHINFO_FILENAME));

        return str_replace('thumb_', $newName . '_', $original);
    }

    /**
     * Generates a disk name from the supplied file name. 
     */
    protected function getDiskName()
    {
        $ext  = strtolower($this->getExtension());
        $name = str_slug(pathinfo($this->file_name, PATHINFO_FILENAME));

        // A filename has to be at least 9 characters long.
        if (strlen($name) < 9) {
            $name .= str_random(9 - strlen($name));
        }

        return implode('.', array_filter([$name, $ext]));
    }
}

Now simply use this model instead of System\Models\File when you define attachMany or attachOne relationship.

<?php namespace YourVendor\YourPlugin\Models;

class Event extends Model
{
    public $attachOne = [
        'image' => \YourVendor\YourPlugin\Models\File::class,
    ];
}

Part 1 - Create sidenav partials

Create a new folder in your plugin directory called partials

Create a new file in the partials directory called _sidenav.htm with the contents below:

<!-- Main sidenav menu wrapper -->
<div style="background: steelblue;" class="layout-cell sidenav-tree" 
data-control="sidenav-tree" data-search-input="#settings-search-input">
 <div class="layout">
     <div class="layout-row min-size">
         <?= $this->makePartial('$/author/plugin/partials/_sidenav_search_toolbar.htm') ?>
     </div>
     <div class="layout-row">
         <div class="layout-cell">
             <div class="layout-relative">
                 <div class="layout-absolute">
                     <div class="control-scrollbar" data-control="scrollbar">
                         <?= $this->makePartial('$/author/plugin/partials/_sidenav_menu.htm') ?>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
</div>

Create a new file in the partials directory called _sidenav_search_toolbar.htm with the contents below:

<!-- Search form on top of sidenav -->
<div class="layout control-toolbar">
    <div class="layout-cell">
        <div class="relative toolbar-item loading-indicator-container size-input-text">
            <input placeholder="<?= e(trans('system::lang.settings.search')) ?>" type="text" name="search" value="" 
                class="form-control icon search"
                id="settings-search-input"
                autocomplete="off"
                data-track-input
                data-load-indicator
                data-load-indicator-opaque
            />
        </div>
    </div>
</div>

Create a new file in the partials directory called _sidenav_menu.htm with the contents below:

<!-- Sidebar menu -->
<?php
$sideMenuItems = BackendMenu::listSideMenuItems();
if ($sideMenuItems):
    $collapsedGroups = explode('|',
isset($_COOKIE['sidenav_treegroupStatus']) ? $_COOKIE['sidenav_treegroupStatus'] : null);
$categories = [];
foreach ($sideMenuItems as $sideItemCode => $item){
    if(!property_exists($item, 'group'))
        $item->group = 'default';
    if(!property_exists($item, 'keywords'))
        $item->keywords = '';
    if(!property_exists($item, 'description'))
        $item->description = '';
    $categories[$item->group][$sideItemCode] = $item;
}
?>        
<ul class="top-level">
<?php foreach ($categories as $category => $items):
        $collapsed = in_array($category, $collapsedGroups);
?>
    <li data-group-code="<?= e($category) ?>"
        <?= $collapsed ? 'data-status="collapsed"' : null ?>
    >
        <div class="group">
            <h3><?= e(trans($category)) ?></h3>
        </div>
        <ul>
        <?php foreach ($items as $item): ?>
            <li class="<?= BackendMenu::isSideMenuItemActive($item) ? 'active' : null ?>"
                data-keywords="<?= e(trans($item->keywords)) ?>">
                <a href="<?= $item->url ?>">
                    <i class="sidebar-menu-item <?= $item->icon ?>"></i>
                    <span class="header"><?= e(trans($item->label)) ?></span>
                    <span class="description"><?= e(trans($item->description)) ?></span>
                </a>
            </li>
        <?php endforeach ?>
        </ul>
    </li>
<?php endforeach ?>
</ul>
<?php endif; ?>

Part 2 - Registering the contextSidenavPartial

Add this code to your Plugin.php file:

use BackendMenu;

public function register()
{
    BackendMenu::registerContextSidenavPartial('Author.PluginName', 'owner', '$/author/plugin/partials/_sidenav.htm');        
}

That's all there is to it. Note we have re-created the settings style menu here, but you would be free to use any style you wish.

    $page = new \Cms\Classes\Page([
        'fileName' => 'test-page',
        'title' => 'My Page Title',
        'url' => '/test-page',
        'layout' => 'default',
    ]);

    $page->attributes['viewBag'] = [
            'localeUrl' => [
                    'fr' => '/french-URL',
                    'de' => '/deutch-URL',
            ],
            'localeTitle' => [
                    'fr' => 'French Title',
                    'de' => 'Deutch Title',
            ],
    ];

    $page->save();

(Note: to be used with Rainlab.Translate plugin)

Use this code to programatically create a CMS Page and attach a component:

    $page = new \Cms\Classes\Page([
        'fileName' => 'test-page',
        'title' => 'My Page Title',
        'url' => '/test-page',
        'layout' => 'default',
    ]);

    $page->attributes['myComponent'] = [];

    $page->save();

October uses a config array to check for allowed image extensions. This list is defined in \October\Rain\Filesystem\Definitions::imageExtensions().

To add your own extensions to the list you have to copy the default values to file_definitions.image_extensions in your config/cms.php file.

Note: If you use a upload widget in the file mode make sure to add your extension to the default_extensions key as described in the next section.

    // add in config/cms.php
    // ...
    'file_definitions' => [
        'image_extensions' => [
            // your new custom extensions
            'svg',
            // defaults
            'jpg',
            'jpeg',
            'bmp',
            'png',
            'webp',
            'gif',
        ]
    ]

General file uploads

October uses a config array to check for allowed upload extensions. This list is defined in \October\Rain\Filesystem\Definitions::defaultExtensions().

To add your own extensions to the list you have to copy the default values to file_definitions.default_extensions in your config/cms.php file.

If you use a upload widget in the image mode make sure to add your extension to the image_extensions key as described in the section above.

    // add in config/cms.php
    // ...
    'file_definitions' => [
        'default_extensions' => [
            // your new custom extensions
            'json',
            // defaults
            'jpg',
            'jpeg',
            'bmp',
            'png',
            'webp',
            'gif',
            'svg',
            'js',
            'map',
            'ico',
            'css',
            'less',
            'scss',
            'ics',
            'odt',
            'doc',
            'docx',
            'ppt',
            'pptx',
            'pdf',
            'swf',
            'txt',
            'xml',
            'ods',
            'xls',
            'xlsx',
            'eot',
            'woff',
            'woff2',
            'ttf',
            'flv',
            'wmv',
            'mp3',
            'ogg',
            'wav',
            'avi',
            'mov',
            'mp4',
            'mpeg',
            'webm',
            'mkv',
            'rar',
            'xml',
            'zip',
        ]
    ]

Via page execution lifecycle

url = "/blog/:slug"
==
use Acme\Blog\Models\Post;

function onStart()
{
  $this['post'] = Post::where('slug', $this->param('slug'))->first();
}
==
<h2>{{ post.title }}</h2>

<div>{{ post.content }}</div>

Via a custom component

Register your custom component in your Plugin.php.

// Plugin.php
public function registerComponents()
{
    return [
        Acme\Blog\Components\BlogDetail::class => 'blogDetail',
    ];
}

Create the blogDetail component as components/BlogDetail.php

namespace Acme\Blog\Components;

use Cms\Classes\ComponentBase;

class BlogDetail extends ComponentBase
{
    public $blog;

    public function defineProperties()
    {
        return [
            'slug' => [
                'type'  => 'string',
                'title' => 'Slug',
            ]
        ];
    }

    public function onRun()
    {
        $this->blog = $this->page['blog'] = Post::where('slug', $this->property('slug'))->first();
    }
}

Finally, place the component on your CMS page.

url = "/blog/:slug"

[blogDetail]
slug = "{{ :slug }}"
==

<h2>{{ blogDetail.post.title }}</h2>

<div>{{ blogDetail.post.content }}</div>

{#  Since we set $this->page['blog'] the post is also available
    via the {{ post }} variable directly.

    @see https://octobertricks.com/tricks/access-component-properties-page-or-partial
#}

# ===================================
#  Relation Behavior Config
# ===================================

items:
    label: Invoice Line Item
    view:
        list: $/acme/pay/models/invoiceitem/columns.yaml
        toolbarButtons: create|delete|custom # Add this
    manage:
        form: $/acme/pay/models/invoiceitem/fields.yaml
        recordsPerPage: 10

Next, create a new file _relation_button_custom.htm (the last part corresponds to the item in your configuration file) in your controller's partial directory (e. g. /plugins/acme/controllers/invoices/) with the following contents:

<button
        class="btn btn-sm btn-secondary"
        data-request="onDoSomething"
        data-stripe-load-indicator>
    Custom
</button>

In this case, the button will just call the handler onDoSomething of your controller. But you can also go more advanced and pass the selected (checked) items or any custom variables to the controller. You can even open a custom modal and render complex controls. A lot of the markup can be reused from the existing button partials.

public function onYourAjaxHandler($recordID)
{
   $model = MyModel::findOrFail($recordID);
   $model->fieldToUpdate = "new value";
   $this->initForm($model);

   $fieldMarkup = $this->formGetWidget()->renderField('fieldToUpdate', ['useContainer' => true]);

   return [
      '#field-id' => $fieldMarkup
   ];
}

If you need to replace the field container, set useContainer => false. If you need to keep the container, set useContainer => true.

Since v452 of OctoberCMS, it is now possible to use the formRenderField() method directly as the "options" argument has been added to it:

   $this->formRenderField('fieldToUpdate', ['useContainer'=>false]);

• copy the original view file into your plugin partials directory, under the posts folder.
• modify the copied file to your liking
• add the following code to the boot method of your Plugin registration file:

use Rainlab\Blog\Controllers\Posts;

public function boot()
{
    Posts::extend(function($controller) {
        list($author, $plugin) = explode('\\', strtolower(get_class()));
        $partials_path = sprintf('$/%s/%s/partials/posts', $author, $plugin);
        $controller->addViewPath($partials_path);
    });
}

If you want to override this behavior, create a partials with the name _relation_button_action.htm inside your controllers folder (i.e. Author\Plugin\Controllers\Controller), where _action equals the button you want to override. For example, if you wanted to override the delete button you would create authour/plugin/controllers/controller/_relation_button_delete.htm. The code for the partial can be copied from modules/backend/behaviors/relationcontroller/_button_action.htm or completely customized at this point.

The key lines determining the buttons behavior are:

disabled="disabled"
data-trigger-action="enable"
data-trigger="#<?= $this->relationGetId('view') ?> .control-list input[type=checkbox]"
data-trigger-condition="checked"

We will go over each of these lines below:

1. disabled="disabled" This should be self explanatory, but this line disables the button. We will remove this line because we want our button enabled, but hidden when a record(s) is selected.
2. data-trigger-action="enable" This line tells the framework what to do with this element. In this case, it will enable the field. We want to change this line to data-trigger-action="show".
3. data-trigger="#<?= $this->relationGetId('view') ?> .control-list input[type=checkbox]" This line targets the checkboxes in the list view. Do not modify this line.
4. data-trigger-condition="checked" This line tells the framework what condition to look for. Do not change this line.

Your final button partial should look something like this:

<button
        class="btn btn-sm btn-secondary oc-icon-random"
        onclick="$(this).data('request-data', {
            checked: $('#<?= $this->relationGetId('view') ?> .control-list').listWidget('getChecked')
        })"
        data-handler="onRelationButtonMove"
        data-control="popup"
        data-size="large"
        data-request-success="$.oc.relationBehavior.changed('<?= e($this->vars['relationField']) ?>', 'moved')"
        data-trigger-action="show"
        data-trigger="#<?= $this->relationGetId('view') ?> .control-list input[type=checkbox]"
        data-trigger-condition="checked"
        data-stripe-load-indicator>
        Move user(s)
</button>

Note: This functionality is not explicity documented. However, you should be able to infer this from looking at the Backend Form Trigger Event Docs.

When deploying your site, the backend brand will be set to October defaults which requires a login to the backend to update things like the logo, tag line and colors.

1. Create a new file in your app's config directory: config/brand.php
2. Paste the block of code below into your brand.php file:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Specify the default backend brand settings
    |--------------------------------------------------------------------------
    |
    | These parameter values can be overridden by the backend Brand settings
    |
    */

    'logoPath' => '$/author/plugin/assets/images/logo.png',
    'faviconPath' => '$/author/plugin/assets/images/favicon.ico',
    'appName' => 'APP NAME',
    'tagline' => 'APP TAGLINE',
    'primaryColor' => "#b4b4b4",
    'secondaryColor' => "#ffcc00",
    'accentColor' => "#B4B4B4",
    'menuMode' => 'inline', // options: inline, inline_no_icons, tile, collapse
    'customLessPath' => '$/author/plugin/assets/styles/backend.less',
];

3. Update the values relative to your application. Note the image paths must be relative to your filesystem and not a URL.

I want to thank @LukeTowers for pointing this functionality out to me.

<link rel="canonical" href="{{ url_current() | lower }}" />

or

<link rel="canonical" href="{{ this.page.id | page }}" />

You can use the extend() method to add a custom handler:

    // Plugin.php
    public function boot()
    {
        \System\Controllers\Settings::extend(function($controller) {
            $controller->addDynamicMethod('onMyCustomHandler', function() {
                return 'handler called!';
            });
        });
    }

You can now call this handler from any custom partial in your backend settings form:

<button class="btn btn-default"
        data-handler="onMyCustomHandler">
    Trigger AJAX request
</button>

If you declare this column as JSON type in your database you can use Laravel's JSON where clauses to query the structured data.

You need to be using a database that supports JSON columns (MySQL 5.7+ or MariaDB 10.2+).

// In your migration
Schema::create('your_table', function (Blueprint $table) {
    $table->increments('id');
    $table->json('jsonable_field'); // Declare as JSON
    // ...
});

Basic queries are supported on Laravel 5.5.

$users = DB::table('users')
           ->where('preferences->dining->meal', 'salad')
           ->get();

If you need advanced JSON features you have to fall back to raw queries.

// Filter data like {"subkey": [10]}
$users = DB::table('users')
           ->whereRaw('JSON_EXTRACT(array_of_values, ?) >= ?', ['$."subkey"[0]'])
           ->get();

// Order by JSON value like {"value_name": "abc"}
$users = DB::table('users')
           ->orderByRaw('JSON_EXTRACT(field_name, ?) ASC', ['$."value_name"'])
           ->get();

$locale = 'de';
$pageName = 'target-cms-page';
// If your model slug is translatable use
// $params = ['slug' => $model->locale($locale)->slug];
$params = ['slug' => 'your-model-slug'];

$theme = Theme::getActiveThemeCode();
$cmsPage = Page::loadCached($theme, $pageName);

$cmsPage->rewriteTranslatablePageUrl($locale);

$router = new \October\Rain\Router\Router;
$localeUrl = $router->urlFromPattern($cmsPage->url, $params);
// If you need the locale prefix use 
// $localeUrl = $router->urlFromPattern(sprintf("/%s%s", $locale, $page->url), $params);

echo url($localeUrl);

{% if record.end_date|date('U') > 'now'|date('U') %}

A nicer solution to this problem is to add a getIsPastAttribute method to your model and do the comparision there. This way you can use record.is_past in twig.

class Record extends Model
{
    public function getIsPastAttribute()
    {
        return $this->end_date->lt(now());
    }
}

    published_at:
        label: 'Published at'
        mode: datetime
        type: datepicker
        default: now

Event::listen('backend.form.extendFieldsBefore', function($widget) {
    // Extend only the Blog\Posts controller & Extend only Blog\Post model
    if (!($widget->getController() instanceof \RainLab\Blog\Controllers\Posts
        && $widget->model instanceof \RainLab\Blog\Models\Post)
    ){
        return;
    }

    $widget->secondaryTabs['fields']['content']['type'] = 'richeditor';
});

This is our robotstxt CMS page with twig variables:

title = "robots"
url = "/robots"
is_hidden = 0
==
<?php
function onStart()
{
    $this->setResponseHeader('Content-Type', 'text/plain');
}
==
Modified: 9-27-2019
User-agent: *
Allow: /
Disallow: /api/*
Disallow: /payment/*

{% set baseUrl = url('/') %}
Disallow: {{ 'myCustomPage'|page(false)|replace({ (baseUrl): '' }) }}

Sitemap: {{ url('/') }}/sitemap.xml

You may find the need to update this content dynamically, based upon some action the user could make within the report widget. October's AJAX framework makes this relatively easy, so long as you know what to return from your AJAX handler.

This trick will provide an example of how to update your report widget partial using October's AJAX framework.

Note: This trick assumes you have already created your report widget class and have a partial that needs to be updated. If you need help creating a report widget, please see the documentation Report Widgets.

1. Add a element to your partial to make the AJAX request. Here is an example:

   <button
   data-request="onUpdateWidget">
   Update
   </button>

2. Add a new method to your report widget class public function onUpdateWidget(). For example:

   public function onUpdateWidget()
   {
   return [
       '#'.$this->alias => $this->render()
       ];
   }

The secret sauce here is the widget's alias property, which determines which widget is actually being updated. Your widget should already have a render() method which returns the contents of the widget partial.

Now, when you click the button in your report widget, the AJAX framework will make a request and call the handler onUpdateWidget. In this example, we have re-rendered the widget itself so any changes to data will be displayed.

We are free to return any content we wish, even other partials, or static content. The possibilities are limitless!

Then include via:

/**
 * Extend Rich Editor.
 */
\Backend\FormWidgets\RichEditor::extend(function ($widget) {
    $widget->addJs('/plugins/author/name/assets/js/froala.clean-html.js', 'Author.Name');
});

$this->vars['formModel'];

Of course you have also access to all the model's properties and methods:

$this->vars['formModel']->id;
$this->vars['formModel']->title;
$this->vars['formModel']->customMethod();

title = "Download"
url = "/trigger-download"
is_hidden = 0
==
function onStart()
{
    $pathToFile = storage_path('your-file.pdf');
    $fileName = 'download.pdf';
    $headers = [
        'Content-Type' => 'application/pdf'
    ];

    return Response::download($pathToFile, $fileName, $headers);
}
==

You can redirect to this page from any AJAX handler and the browser will start a file download.

function onDownloadHandler()
{
    return Redirect::to('trigger-download');
}

    public function registerSettings()
    {   
        return [
            'settings' => [
                'label'       => 'Test Settings',
                'description' => 'Test settings descr',
                'class'       => 'AuthorName\PluginName\Models\Settings',
              ],
        ];
    }

Plugin's navigation registration:

    public function registerNavigation()
    {   
        return [
            'main-menu' => [
                'label'       => 'Test Menu',
                'url'         => Backend::url('AuthorName/PluginName/test'),

                'sideMenu' => [
                    'side-menu-item' => [
                        'label' => 'Settings',
                        'url' => Backend::url('AuthorName/PluginName/settings'),
                    ],
                ],
            ],
        ];
    }

Controller definition:

<?php namespace AuthorName\PluginName\Controllers;

use BackendMenu;
use Redirect;
use Request;        

class Settings extends \System\Controllers\Settings
{                       
    protected $author;
    protected $plugin;
    protected $code = 'settings'; // see registerSettings()
    protected $mainMenuId = 'main-menu'; // see registerNavigation()
    protected $sideMenuId = 'side-menu-item'; // see registerNavigation()

    public function __construct()
    {   
        parent::__construct();
        $this->viewPath = base_path().'/modules/system/controllers/settings';

        // Extract Author and Plugin name from current class path
        list($this->author, $this->plugin) = explode('\\', get_class());

        BackendMenu::setContext(sprintf('%s.%s', $this->author, $this->plugin), $this->mainMenuId, $this->sideMenuId);
    }

    public function index()
    {   
        $url = sprintf('%s/update/%s/%s/%s', Request::url(), $this->author, $this->plugin, $this->code);

        return Redirect::to($url);
    }
}

Usage from Plugin.php boot method:

/**
 * Boot.
 *
 * @return void
 */
public function boot()
{
    \RainLab\Blog\Models\Post::extend(function ($model) {
        $model->belongsToMany += [
            'related_blog_posts' => [
                'RainLab\Blog\Models\Post',
                'table'    => 'tps_blog_posts_blog_posts',
                'key'      => 'bp_id',
                'otherKey' => 'rbp_id',
                'order'    => 'title',
                'scope'    => 'isPublished',
            ],
        ];
        $model->bindEvent('model.relation.afterAttach', function ($relationName, $attachedIdList, $insertData) use ($model) {
            if ($relationName === 'related_blog_posts') {
                BidirectionalBelongsToManyRelationship::attach($model, $insertData, $relationName, $keyName = 'bp_id', $otherKeyName = 'rbp_id');
            }
        });
        $model->bindEvent('model.relation.afterDetach', function ($relationName, $attachedIdList) use ($model) {
            if ($relationName === 'related_blog_posts') {
                BidirectionalBelongsToManyRelationship::detach($model, $attachedIdList, $relationName);
            }
        });
    });
}

Migrations

The schema builder comes with a handy uuid table column that we can use to place our UUIDs. You'll also need to append primary() to ensure that the UUID becomes the primary key.

// updates/create_table.php
Schema::create('my_database_table', function (Blueprint $table) {
    $table->uuid('id')->primary();
});

Models

In your models, set the $incrementing variable to false to ensure that the Model does not increment the value of the UUID.

Finally, automatically generating a UUID will require the Ramsey\Uuid\Uuid. We'll be using this library because it already comes installed with Laravel, so there's no need to install any other UUID generator. Next, add the beforeCreate() event method into your Model. The code to generate the UUID is:

use Ramsey\Uuid\Uuid;

class Test extends Model
{
    public $incrementing = false;

    public function beforeCreate()
    {
        $this->id = Uuid::uuid4()->toString();
    }
}

You can learn more about the UUID library on GitHub.

    public $hasOne = [
        'comments_count' => [Comment::class, 'count' => true],
    ];

To display this count value in a List, use the useRelationCount option in your columns.yaml. Using the usual select: count method would result in a Unknown column 'count' in 'field list' error.

    comments_count:
        label: Number of related comments
        type: number
        relation: comments_count
        useRelationCount: true             # this is important

controllers/yourcontroller/config_filter.yaml

Paste your filter configuration in it:

scopes:
    category:
        label: Category
        modelClass: Acme\Blog\Models\Category
        conditions: category_id in (:filtered)
        nameFrom: name

Enable the filter by adding the following line to your config_list.yaml.

filter: config_filter.yaml

<script src="{{ ['@jquery'] | theme }}"></script>

By passing it as an array to the | theme filter you'll get a new filename as soon as the content of the jQuery file changes. This makes sure that users will download the new version and not use a cached one.

You can also add additional files to the array to combine all of them into a single output file.

<script src="{{ ['@jquery', 'assets/another.js'] | theme }}"></script>

| title  | genre     |
| -------| --------- |
| Book 1 | Academia  |
| Book 2 | Biography |
| Book 3 | Children  |
| Book 4 | Fiction   |
| Book 5 | Biography |

In your plugin directory create the following file:

controllers/yourcontroller/config_filter.yaml

inside config_filter.yaml

scopes:
    genre:
        label: Filter Genres
        modelClass: Path\To\Models\Model
        type: group
        conditions: genre in (:filtered)
        options: listGenres

on your model create a method listGenres

    public function listGenres()
    {
        // you can use distinct or groupBy
        return Model::groupBy->('genre')->pluck('genre', 'genre')->toArray();
    }

Step 1: Import user data

Migrate all WordPress password hashes (ẁp_users.user_pass) into the backend_users table. I won't describe in detail how you do this (for example by using Corcel). Just make sure that the wp_users.user_pass column ends up in a new backend_users.wp_password_hash column that you have added manually (or via a proper plugin migration).

The backend_users table should look like this (some columns omitted):

Step 2: Install mikemclin/laravel-wp-password

To check a plain text password against a stored WordPress password hash, we can use the mikemclin/laravel-wp-password composer package.

Install it by running composer require "mikemclin/laravel-wp-password" "~2.0.1".

Make sure to run this command from your October root directory, not a plugin's subdirectory. Otherwise you will end up with mixed versions of various Illuminate/* packages.

If you need to add the dependency to a specific plugin make sure it's included in the plugin's composer.json but always run composer install in the root directory.

Step 3: Extend the AuthManager

To extend the default AuthManager class that October uses during the login process, add the following code to a Plugin's Plugin.php file:

use YourVendor\YourPlugin\Classes\AuthManager;

class Plugin extends PluginBase
{
    public function register()
    {
        App::singleton('backend.auth', function () {
            // This overrides the default AuthManager instance with our own.
            return AuthManager::instance();
        });
    }
}

Step 4: Override AuthManager methods

There are multiple ways to hook into October's AuthManager. For this use-case, it is enough to override the findUserByCredentials method in our custom AuthManager class.

Create the following class and save it to plugins/your-vendor/your-plugin/classes/AuthManager.php

<?php

namespace YourVendor\YourPlugin\Classes;

use Backend\Classes\AuthManager as BackendAuthManager;
use MikeMcLin\WpPassword\Facades\WpPassword;
use October\Rain\Auth\AuthException;

class AuthManager extends BackendAuthManager
{
    public function findUserByCredentials(array $credentials = [])
    {
        $originalException = null;
        try {
            // Try to log in using the base class' logic. If no exception is thrown,
            // the login worked with the provided credentials.
            // In these case there's nothing for us to do.
            return parent::findUserByCredentials($credentials);
        } catch (AuthException $e) {
            // Capture the thrown exception. We will re-throw it if we are unable
            // to re-hash the user's password.
            $originalException = $e;
        }

        // Find the user by the provided login attribute. 
        // Re-throw the original exception if no user is found.
        $user = $this->findUserByLogin($credentials['login']);
        if ( ! $user) {
            throw $originalException;
        }

        // Check if the user model contains an old wp_password_hash.
        // If not, we have nothing to check against and the login should 
        // fail with the original exception.
        if ( ! $oldHash = $user->wp_password_hash) {
            throw $originalException;
        }

        // Check if the provided password matches the stored WordPress hash
        // using WpPassword's check method.
        // If it does not match, abort by re-throwing the original exception.
        if ( ! WpPassword::check($credentials['password'], $user->wp_password_hash)) {
            throw $originalException;
        }

        // We have found a user where the WordPress hash matched. Let's re-hash the password
        // to bcrypt by setting it on the model (as password and confirmation). 
        // Also remove the old WordPress hash to make sure it is gone for good.
        $user->password = $credentials['password'];
        $user->password_confirmation = $credentials['password'];
        $user->wp_password_hash = '';
        $user->save();

        // Return the updated user model. This makes sure the usual 
        // login logic is executed.
        return $user;
    }
}

Step 5: Test the new AuthManager logic

To test the new AuthManager logic, empty the password column of a user in the backends_user table. Add a WordPress password hash to the wp_password_hash column. You can generate a hash for a specific password using a WordPress Password Hash Generator.

If you log in now, you should notice no changes to the usual login routine. If you check your database after the login the wp_password_hash column should be empty and the password column should contain a valid bcrypt hash.

Make sure to test that subsequent logins with the new hash work as expected.

<?php namespace Minakari\Customisations;
use \System\Classes\ResizeImages;

class Plugin extends PluginBase
{
    public function boot()
    {
    }

    public function registerMarkupTags(): array
    {
        $filters = [
            'rich_resize' => [$this, 'richResize']
        ];
        $functions = [];

        return [
            'filters' => $filters,
            'functions' => $functions,
        ];
    }

    public function richResize($html)
    {
        // Use DOMDocument to parse the HTML and find all image tags
        $dom = new \DOMDocument();
        @$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));

        $images = $dom->getElementsByTagName('img');

        foreach ($images as $image) {
            $src = $image->getAttribute('src');

            // Resize the image using the ResizeImages::resize() interface
            $resizedSrc = ResizeImages::resize($src, 1328, null, ['mode' => 'auto', 'quality' => '40', 'compress' => true]);

            // Replace the original src with the resized src
            $image->setAttribute('src', $resizedSrc);
        }

        // Return the modified HTML
        return $dom->saveHTML();
    }
}

It can be used as follows: {{your_field|rich_resize|content}} or `{{your_field|rich_resize|raw}}

public function boot(): void
{
    /** @var \Illuminate\Routing\Router $router */
    $router = $this->app->make(\Illuminate\Routing\Router::class);
    $router->pushMiddlewareToGroup('web', YourMiddleware::class);
}