README

一个简单的图片画廊，它渲染包含静态或基于文件夹的图片的FileCollection。它提供了一个简单的布局，带有分页和灯箱。基于流体模板，前端布局可以快速轻松地编辑。

由于这个画廊渲染了FileCollection中的一组文件，它可能渲染的不仅仅是图片画廊，这取决于提供的模板。（例如，可下载文件的列表）。

安装

安装Simple FileCollection Gallery并包含静态模板。

设置

Simple FileCollection Gallery提供了自定义输出的设置。

view.templateRootPaths = The root path for templates as fallback array
view.partialRootPaths = The root path for partials as fallback array
view.layoutRootPaths = The root path for layouts as fallback array

settings.lightbox = Additional output for lightbox settings, default 'lightbox'
settings.enableLightbox = Switch if lightbox is enabled  NOTE: You need some other extension (or anything else) to render that lightbox.
settings.cssFile = Path to CSS File

settings.image.width = Width of single image
settings.image.height = Height of single image
settings.image.lightboxWidth = The maxWidth of the lightbox image

使用方法

在TYPO3安装的页面树中的某个位置创建一个FileCollection。通过向导或页面树选择插件中的FileCollection（s）。图片的顺序与FileCollection中的排序相同，集合的顺序与插件中的顺序相同。

插件还有一些其他选项

fileCollection = the selected fileCollection(s)
imagesPerPage = Sets the count of images to be rendered per pagination page
numberOfPages = Sets the count of visible pages in the pagination list
insertAbove = Switches the pagination above the images list
insertBelow = Switches the pagination below the images list
enableLightbox = Switches if a lightbox is enabled for the images list  NOTE: You need some other extension (or anything else) to render that lightbox.
enableDescription = If the metadata 'description' is provided, this switches the description below a single image

模板

从版本1.2.0开始，可以使用嵌套布局，并为每个包含的FileCollection提供一个预览图片。归功于Ferhat36

从sf_filecollection_gallery的版本1.1开始，可以使用templateRootPaths数组来提供一些带有回退的更多模板文件夹。

目前使用了两个模板，请查看Resources/Private/Templates中的它们

• Gallery/List.html用于画廊视图
• Paginate/Index.html用于分页小部件

创建自己的模板

如果您想提供自己的模板，只需在TS中的templateRootPaths数组中添加另一个条目即可

plugin.tx_sffilecollectiongallery {
	view.templateRootPaths.1 = fileadmin/path/to/Templates
}

您可能想要添加一些滑动功能，因此我们在简单的教程中使用bxSlider。您需要做的所有事情就是将FileCollection项作为无序列表渲染，并且假设您已经包含了bxSlider的CSS和JS，那么在document.ready上添加一些方便的JS初始化。

您的新Gallery/List.html文件可能看起来像这样

{namespace s=SKYFILLERS\SfFilecollectionGallery\ViewHelpers}

<f:layout name="Default"/>

<f:section name="main">
	<f:if condition="{imageItems}">
		<ul class="fadeImages">
			<f:for each="{imageItems}" as="object">
				<li class="sf-filecollection-gallery-image-container">
					<f:image image="{object}" width="{settings.image.width}" height="{settings.image.height}" alt="{object.properties.alternative}" title="{object.properties.title}"/>
				</li>
			</f:for>
		</ul>
	</f:if>
</f:section>

使这个开始工作的JS如下

$(document).ready(function(){
	$('.fadeImages').bxSlider();
});

闪亮！当然，您可能还想添加一些更复杂的流体模板。

在模板中使用内容元素uid

从版本1.1.4开始，可以在模板中使用元素的uid。这对于一些JS功能（如灯箱或滑块）是必要的。可以通过：{currentUid}访问uid

鸣谢

此扩展使用了一些第三方代码。

• Array Pagination Widget 由Paul Beck和Armin Ruediger Vieweg提供的Array分页小部件
• IncludeFileViewHelper 由Georg Ringer在他的新闻扩展中提供的用于通过扩展布局包含CSS文件的ViewHelper