Question

扩展功能以将相关图像包含到每个页面对象（CMS页面或静态页面），将相应的上传窗口小部件添加到OctoberCMS后端的页面配置中，有哪些最佳和最简洁的方法？

（另外，并且只是旁边：以什么方式可以将相关图像添加到网站的主题？）

Answer 1

对于CMS页面，在Plugin.php文件中添加register（）方法：

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值

获得

Answer 2

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

一种方法是使用10月份CMS文档中的附件系统，该系统需要插件，我想你不希望这样。

另一种方法是在前端主题定制表单中进行。

只需在您的OctoberCMS主题中有一个文件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() }}

因此，您可以通过调用以下方式访问此图像：

.config(['ChartJsProvider', function (ChartJsProvider) {
                ChartJsProvider.setOptions( {
                    options: {
                        scales: {
                            xAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            }])

您可以转到后端 - ＆gt;在后端上传图片。前端主题 - ＆gt;定制

Answer 3

是否尝试扩展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 4

好的，在我们获得adding an associated image to your theme或adding an associated image to a StaticPage的良好规范答案后，我将介绍将相关图片添加到CMS页面的剩余案例：

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

编辑文件{% 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',
                    ]
            ]);
        }
    });
}

你已经完成了。

（编辑：请参阅this答案，了解更为规范的方法。可能是不推荐使用$form->config->model访问模型类属性的方式，现在它更加流行使用$widget->model，因为我已经从一段较旧的代码中对其进行了调整。虽然不太确定技术差异，所以我将其作为替代方案。）

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

这会扩展与Cms\Classes\Page类相关联的字段，可在{% 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对象的树枝访问，即在树枝中写{{ 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过滤器来获取页面中正确的图片网址。）

十月CMS - 扩展页面以获得相关图像

4 个答案: