October CMS - 快速入门 9 Images And Galleries

这一部分我们将为影片创建图片和图片库
首先我们将分页改为每页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插件进行显示和展示。