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插件进行显示和展现。