メディアギャラリーにレスポンシブカルーセル機能を追加する

[Yasuyuki Takeo, geändert vor 8 Jahren.]

まず、カルーセル用のApplication Display Template(ADT)を作成します。

<#assign aui = taglibLiferayHash["/WEB-INF/tld/aui.tld"] />
<#assign liferay_portlet = taglibLiferayHash["/WEB-INF/tld/liferay-portlet.tld"] />

<#if entries?has_content>

	<div id="<@liferay_portlet.namespace />carousel">
		&lt;#assign imageMimeTypes = propsUtil.getArray("dl.file.entry.preview.image.mime.types") /&gt;

		&lt;#list entries as entry&gt;
			&lt;#if imageMimeTypes?seq_contains(entry.getMimeType()) &gt;
				<div class="carousel-item">
					<img src="${dlUtil.getPreviewURL(entry, entry.getFileVersion(), themeDisplay, " ")}">
				</div>
			<!--#if-->
		<!--#list-->
	</div>

	&lt;@aui.script use="aui-carousel"&gt;
		new A.Carousel(
			{
				contentBox: '#&lt;@liferay_portlet.namespace /&gt;carousel',
								intervalTime: 5}
		).render();
	<![e-mail]-->
<!--#if-->

メディアギャラリーポートレットの設定から、上記の作成したADTをテンプレートとして選択します。

以下のCSSをThemeを自作してれば_diff/CSSディレクトリ 以下、もしくはメディアギャラリーポートレットのカスタマイズCSSの項目に配置します。

/* ---------- Extras ---------- */
/* This line is reqired to make Carousel responsive */
.carousel-content {
	overflow: hidden;
	position: relative;

	.carousel-item {
		position: absolute;
		top: 0;
		width: 100%;
	}

	.carousel-item-active {
		position: relative;
	}

	@include respond-to(phone) {
		margin: 0 -20px;
	}
}

ドキュメントライブラリに例えば「Carousel」というフォルダを作成します。そこにカルーセル内に表示したい画像を配置します。また必要であればリンクも登録します。配置後、メディアギャラリーの設定より、ルートフォルダーに「Carousel」を選択することで、Carouselフォルダ内の画像がカルーセルとして表示されるようになります。