October CMS - 扩展页面以具有关联图像

Question

扩展功能以将关联图像包含到每个页面对象（CMS 页面或 StaticPage），将相应的上传小部件添加到 OctoberCMS 后端的页面配置的最佳和干净的可能方法是什么？

（另外，顺便提一句：可以通过什么方式将关联图像添加到网站主题？）

Answer 1

有两种方法可以在前端附加图像（或文件）。

一种是使用 OctoberCMS 文档中的附件系统，它需要在插件中，我猜你不希望这样。

另一种方式是在前端主题自定义表单中制作。

在您的 OctoberCMS 主题中有一个文件 theme.yaml，您可以将此代码添加到其中：

name: ''
description: ''
author: 'Ahmed Essam'
homepage: ''
code: my_theme
name: 'My Theme'
form:
    fields:
        my_image:
            type: fileupload
            mode: image
            label: Upload my image

因此，您可以在前端主题的任何位置通过调用访问此图片：

{{ this.theme.my_image.getPath() }}

您可以在后台上传图片，方法是后台-> 前端主题-> 自定义

Answer 2

是否尝试扩展 Rainlab 的 page plugin 或 CMS 页面？

对于静态页面插件，要在静态页面的设置部分添加一个选项卡，您需要创建一个扩展 Rainlab 页面插件的插件，并使用 extendFields 函数添加一个选项卡式字段。这是一个扩展的例子。此代码必须放在插件的 Plugin.php 文件中。

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'
            ]
        ]);
    });
}

然后在您的布局文件、部分或 CMS 页面中，您可以使用以下代码显示图像：

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

并且不要忘记在您的 Plugin.php 文件中注入依赖项：

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

Answer 3

好的，在我们对 or 有了很好的规范答案后，我将介绍 将关联图像添加到 CMS 页面的剩余案例：

通过运行 php artisan create:plugin yourname.nameofyourplugin 在您的 10 月应用程序目录中创建一个插件。

编辑文件 {% october app root %}/plugins/yourname/nameofyourplugin/Plugin.php，将以下内容添加到插件的 boot() 方法中：

public function boot()
{
    Event::listen('backend.form.extendFields', function($form) {
        if (get_class($form->config->model) == 'Cms\Classes\Page')
        {
            $form->addFields([
                    'settings[associated_image]' => [
                        'label'   => 'Associated image for this page',
                        'type'    => 'mediafinder',
                        'mode'    => 'image',
                        'span'    => 'auto',
                        'comment' => 'na logo alter',
                    ]
            ]);
        }
    });
}

大功告成。

（编辑：请参阅答案以获得更规范的方式。可能是 $form->config->model 访问模型 class 属性的方式已被弃用，现在使用 $widget->model 更流行，因为我从一段较旧的代码中改编了它。虽然我不太确定技术差异，所以我将把它作为替代方案。）

现在您找到了一个小部件，可以将关联的图像添加到您的任何标准 CMS 页面。

这扩展了与 Cms\Classes\Page class 关联的字段，在 {% october app root %}/cms/classes/page/fields.yaml 中找到，添加了 associated_image 字段它。通过将此字段包含在 settings 数组中（即为新表单字段选择字段名称 settings[associated_image]，我们确保可以在页面模板的 config section 中设置此字段（即通过在顶部添加 associated_image = "/path/to/my/cool/image.jpg" 行）然后可以通过 page 对象通过 twig 访问，即通过在 twig.

中写入 {{ page.associated_image }}

因此，在将关联图片添加到任何 CMS 页面后，您可以在页面上放置类似 <img src="{{ page.associated_image | media}}">（或 {% if (page.associated_image | length) > 0 %}<img src="{{ page.associated_image | media}}">{% endif %} 以检查图片是否存在）之类的内容以包含图片你添加的。

(注意我们这里图片使用的是MediaFinder表单控件，它保存了上传图片相对于{% october app root %}/storage/media目录的路径。所以我们需要{{ ... | media }} twig过滤器在页面中获得正确的图像 url。）

Answer 4

对于 CMS 页面，将 register() 方法添加到您的 Plugin.php 文件：

public function register()
{
    Event::listen('backend.form.extendFields', function($widget) {
        if (!$widget->model instanceof \Cms\Classes\Page) return;

        $widget->addTabFields([
            'settings[image_filet]' => [
                'label' => 'Page image',
                'tab' => 'Image',
                'field' => 'settings[image_file]',
                'type' => 'mediafinder',
                'comment' => 'Image url is available via the page settings under the name of image_file'
            ],
        ], 'primary');
    });
}

并且该值可通过 this.page.image_file Twig value

获得

October CMS - 扩展页面以具有关联图像

October CMS - extend page to have an associated image

php

laravel

octobercms