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插件進行顯示和展現。