October CMS - 快速入门 9 Images And Galleries

dadong 发布于2019-07-01 10:09 / 1650人阅读

摘要：关系，用于将图片附加到表上再次刷新页面，现在可以进行图片上传了。如何显示上传的图片简介查看视频页面会出现上面图片显示的信息，图片并没有显示出来。我们要是显示这些图片，则在进行代码修改图集当然我们可以使用插件进行显示和展示。

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

设置图片

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

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

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

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

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

    /**
     * 关系，用于将图片附加到Movies表上
     */
    public $attachOne = [
        "poster" => "SystemModelsFile"
    ];

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

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

{{ record.poster }}

{% if record %}

{{ record.name }}

{{ record.poster }}

{{ record.year }}

简介


    {{ record.description|raw }}


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

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

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

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

再次刷新：

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

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

设置画廊

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

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

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

 public $attachMany = [
    "movie_gallery" => "SystemModelsFile"
];

再次刷新：

现在可以上传多张图片了

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

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

图集

    {% for image in record.movie_gallery %}
        
            
                
            
        
    {% endfor %}

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

GPU云服务器云服务器 java 9天快速前端快速入门 Galleries October

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28857.html

October CMS - 快速入门 17 - 为组件添加选项

摘要：上一节我们通过组件为首页添加了组件，显示了演员的列表。但是，我们只是设置了选项，这个选项并没有对数据进行控制。演员排序对演员排序以姓名升序排列以姓名降序排列好的，现在选项显示出来。上一节我们通过actor组件为首页添加了组件，显示了演员的列表。下面我们将为组件添加一些属性：defineProperties这个函数会返回一个数组，数组里面的每个数组将返回的是每个选项添加显示演员个数限...

longmon 2019-07-01 10:11 评论0 收藏0
October CMS - 快速入门 6 基本模板

摘要：本节将编写一些实现对页面中内容的控制。将内容放入容器文件添加类，让输出的内容在一个容器中。创建菜单编辑点击菜单此页没有头和尾，是因为我们没有给这个页面使用布局再次查看页面，则显示正常了为当前页面菜单添加样式本节将编写一些css实现对页面中内容的控制。将内容放入容器文件：themesraiseinfolayoutsdefault.htm ...

littleGrow 2019-07-01 10:09 评论0 收藏0
October CMS - 快速入门 1 安装

摘要：项目源码地址视频按照开发环境的要求安装环境，必不可少的是了。在命令行执行上述命令完成后，进入对应的目录，这里执行根据提示输入您对应的开发环境参数。项目源码地址：https://gitee.com/494901823/O... 视频：http://www.365yg.com/i6567340... 按照laravel开发环境的要求安装环境，必不可少的是composer了。在命令行执行c...

xcold 2019-07-01 10:08 评论0 收藏0
October CMS - 快速入门 5 创建插件

摘要：创建插件对于来讲是很简单的事情，因为，提供了一个插件构建器具体步骤这里就不赘述了。安装完成后，会出现上图所示的菜单创建自己的插件的方法是点击如下图所示的小按钮。创建插件对于October来讲是很简单的事情，因为，October提供了一个插件构建器：RainLab.Builder showImg(https://segmentfault.com/img/bVbcoxL?w=1266&h...

macg0406 2019-07-01 10:09 评论0 收藏0
October CMS - 快速入门 18 - 创建联系表单

摘要：邮件设置设置为。创建插件打开编辑器，在插件目录下创建目录，并在目录下创建表单文件定义组件增加新页面查看页面前端，确认已经生效，只是插件没有定义，所以没有内容可以显示。邮件设置：config/mail.php；设置为smtp。创建插件Contact showImg(https://segmentfault.com/img/bVbctuz?w=940&h=624); 打开编辑器，在co...

jlanglang 2019-07-01 10:11 评论0 收藏0