October CMS - 快速入门 9 Images And Galleries
October CMS    2018-10-23 11:11:32    114    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和分页

114 人读过
文档导航