By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
October CMS - 快速入门 9 Images And Galleries
October CMS    2018-10-23 11:11:32    119    0    0
emengweb   October CMS

这一部分我们将为影片创建图片和图片库
首先我们将分页改为每页10个影片

设置图片

下面,我们将设置图片,点击菜单【builder】选择【Movies】选择【Models】选择【Forms】中的fields.yaml
添加一个上传表单,而且我们不需要为此创建数据库字段,October会自动处理

现在我们点击【视频】菜单,选择一个视频编辑

会出现如下错误说明没有定义poster

我们需要在代码编辑器中,修改文件:pluginsraiseinfomoviesmodelsMovie.php

为poster添加一个关系,关联到系统的图片表,把图片附加到视频表上。

    /**
     * 关系,用于将图片附加到Movies表上
     */
    public $attachOne = [
        'poster' => 'System\Models\File'
    ];

再次刷新页面,现在可以进行图片上传了。

如何显示上传的图片:
themesraiseinfopagesmovie-single.htm

{{ record.poster }}
{% if record %}
<!--{{ attribute(record, displayColumn) }}-->
<h2>{{ record.name }}</h2>

{{ record.poster }}

<h4>{{ record.year }}</h4>

<h3>简介</h3>

<p>
    {{ record.description|raw }}
</p>

{% else %}
    {{ notFoundMessage }}
{% endif %}

查看视频页面:http://octobermovie.dev.raise...

会出现上面图片显示的信息,图片并没有显示出来。

如果我们使用{{ record.poster.path }}
则显示图片地址,到这里,你或许就明白了,我们需要构建一个img标签,把这个地址作为img的标签属性即可。

<img src="{{ record.poster.path }}" alt="">

再次刷新:

但是,我们发现图片太大了。好的,我们可以继续设置。

<img src="{{ record.poster.thumb(200,auto) }}" alt="">

再比如:对图像进行200x200的裁剪

<img src="{{ record.poster.thumb(200,200,{'mode':'crop'}) }}" alt="">

设置画廊

我们将在Models——Movie——Forms——fields.yaml中添加新的字段

接下来,如果我们保存后,去编辑视频,则还会出现错误

那么和原来一样,我们修改插件的Models文件
pluginsraiseinfomoviesmodelsMovie.php

 public $attachMany = [
    'movie_gallery' => 'System\Models\File'
];

再次刷新:

现在可以上传多张图片了

这些图片可以拖动,调整顺序,或者是删除。

我们要是显示这些图片,则在themesraiseinfopagesmovie-single.htm进行代码修改

<h3>图集</h3>
<ul>
    {% for image in record.movie_gallery %}
        <li>
            <a href="{{ image.path }}">
                <img src="{{ image.thumb(80,auto) }}" alt="">
            </a>
        </li>
    {% endfor %}
</ul>

当然我们可以使用js插件进行显示和展示。

上一篇: October CMS - 快速入门 10 Relations

下一篇: October CMS - 快速入门 8 slugs和分页

119 人读过
文档导航