g4b0 / simple-gallery
一个简单的照片相册管理模块
4.0.0
2018-03-16 08:59 UTC
Requires
- colymba/gridfield-bulk-editing-tools: dev-master
- silverstripe/cms: ^4@dev
- silverstripe/framework: ^4@dev
- silverstripe/vendor-plugin: ^1.0
- undefinedoffset/sortablegridfield: dev-master
README
一个简单的照片相册管理模块。
简介
使用此模块,您将能够扩展每个数据对象,包括页面,以便将其与照片相册关联。如果页面需要多个相册,则可以创建一个Gallery数据对象,将其扩展为SimpleGallery,然后将其作为has_many关系分配到页面。以下是一个示例。
要求
- SilverStripe ^4.0 (版本 master/4+)
- SilverStripe ^3.1 (版本 1.+ / 3.+)
- colymba/gridfield-bulk-editing-tools ^3.0.* (版本 master/4+)
- colymba/gridfield-bulk-editing-tools ^2.1.* (版本 1.+ / 3.+)
- undefinedoffset/sortablegridfield ^2.0.* (版本 master/4+)
- undefinedoffset/sortablegridfield ^0.* (版本 1.+ / 3.+)
安装
通过 composer 安装此模块
composer require g4b0/simple-gallery
composer update
单个相册
要为每个页面创建单个相册,请通过以下yaml扩展所需的页面类型
Page: extensions: - g4b0\SimpleGallery\SimpleGalleryExtension
模板
提供了一个非常基础的模板,要使用它只需将此代码放入您的页面模板中
<% include simplegallery %>
要在默认SS模板中添加漂亮的视觉效果,请添加以下CSS代码
.simplegallery img {width: 30%; float: left; margin: 10px;}
您需要编写自己的.ss文件以实现更高级的功能。只需将模板/simplegallery.ss覆盖到您的主题中,并遍历$SortedImages以编写HTML代码
<div class="simplegallery"> <% loop SortedImages %> <% if $CustomLink %> <a href="$CustomLink">$Image</a> <% else %> $Image <% end_if %> <% end_loop %> </div>
您可以访问以下图像变量
$CustomLink $Title $Text $Disabled $SortOrder
多个相册
如果您希望在一个特定的页面类型中拥有多个可排序的相册,请简单地添加一个has_many关系,如下例所示
class Portfolio extends Page { private static $has_many = array( 'Galleries' => 'SimpleGallery' ); public function getCMSFields() { $fields = parent::getCMSFields(); $gridFieldConfig = GridFieldConfig_RelationEditor::create(); $gridFieldConfig->addComponent(new GridFieldSortableRows('SortOrder')); $field = new GridField( 'Galleries', 'Galleries', $this->SortedGalleries(), $gridFieldConfig ); $fields->addFieldToTab('Root.Galleries', $field); return $fields; } public function SortedGalleries() { return $this->Galleries()->sort('SortOrder'); } }
模板
与simplegallery一样,提供了一个非常基础的模板,要使用它只需将此代码放入您的页面模板中
<% include simplegalleries %>
要在默认SS模板中添加漂亮的视觉效果,请添加以下CSS代码
.simplegallery {clear: both;} .simplegallery img {width: 30%; float: left; margin: 10px;}
您需要编写自己的.ss文件以实现更高级的功能。只需将模板/simplegalleries.ss覆盖到您的主题中,并遍历$SortedGalleries,然后遍历$SortedImages
<% loop $SortedGalleries %> <div class="simplegallery"> <article> <h3>$Name</h3> $Description <div> <% loop SortedImages %> <% if $CustomLink %> <a href="$CustomLink">$Image</a> <% else %> $Image <% end_if %> <% end_loop %> </div> </article> </div> <% end_loop %>
配置
通过编辑 _config/simplegallery.yml,可以修改相册行为
* gallery_name: The gallery name that appear in backend tabs (default: Gallery)
- folder_path: 存储上传图像的路径(默认:simplegallery)