g4b0/simple-gallery

一个简单的照片相册管理模块

安装: 27

依赖项: 0

建议者: 0

安全: 0

星级: 1

关注者: 2

分支: 2

开放问题: 1

类型:silverstripe-vendormodule

4.0.0 2018-03-16 08:59 UTC

This package is not auto-updated.

Last update: 2024-09-15 02:58:28 UTC


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)