SmoothGalleryをXOOPSで使う-（２）

カスタマイズ＆運用TIPS : SmoothGalleryをXOOPSで使う-（２）

投稿者 : taka 投稿日時： 2007-5-2

前回は弊社提供中のテーマchampagne_goldへのSmoothGalleryの適応方法についてご説明しました。ご要望の多かった内容だったのですが、実践できましたでしょうか？
前回の文末に書いたように、今回はもっとXOOPSらしいSmoothGalleryの使い方についてご紹介したいと思います。ちょっと難易度高めですが、皆さんなら大丈夫。

さてさて、ここでいう「XOOPSらしい使い方ってどういう意味？」についてまず説明しますと、

CMS的に便利に更新が出来ること
コミュニティサイトとしてユーザ活性を促す要因となること
ポータルサイトとしての質を高められる要素となること

以上のようなことです。なにやら良く分からないかもしれませんが、順を追って説明していきますので、お付き合い下さい。今日はまず一つ目です。

１．CMS的に便利に更新が出来ること。

Gallery部に当てはめる写真をちまちまHTMLで作ってUPして...まぁ真っ当な使い方なのですが、せっかくXOOPSでやるからには、CMS的にHTML編集とかFTPとかなしで実現したいですよね、スマートに。そこで、myalbumを使って、Gallery部分を更新しちゃう方法をお教えしましょう。
前回の続きでchampagne_goldのスライドショー部分を、この方法で変更できるようにしてみます。

準備その１（基本環境を整備する）

SmoothGalleryを使える状態にセッティングしてください。（前回と内容は同じなので、説明は省きます。前回内容を復習する）

次にgalleryを更新するための画像管理ツールとしてGIJOEさんのmyalbum-Pを使いますのでインストールしてください。

さらにこれが今回最大のポイントですが、SmoothGalleryとmyalbum-Pの"触媒"として、マライカシステムのTOMさんのxoops_block Smartyプラグインを使用しますので、ダウンロードし適切な場所(XOOPSのルートディレクトリ/class/smarty/plugins/)にインストールしておいてください。

準備その2（各種設定）

今回は、myalbumというディレクトリ名でインストール、写真フォルダは/uploads/photos/、サムネイルフォルダは/uploads/thumbs/、と仮定して説明します。皆さんの環境に読み替えて設定してください。

まず今回のギャラリー用カテゴリを作成します。とりあえず名称は“slideshow”とでもしておきましょう。スライドショーさせたい写真や画像をこのカテゴリに登録してください。

前回作成しました、slideshow.htmlを

<{xoops_block mod="myalbum" func="b_myalbum_topnews_show" opt="myalbum,5,50,1,0" assign="slideshow"}>

<script type="text/javascript">
	function startGallery() {
		var main_img = new gallery($('main_img'), {
			timed: true,
			showArrows: false,
			showCarousel: false,
			showInfopane: false,
			embedLinks: false,
			delay: 10000,
			fadeDuration: 2000
		});
		document.gallery = main_img;
	}
	window.onDomReady(startGallery);
</script>

<div id="main_img">
	<{foreach item=photo key=count from=$slideshow.photo}>
		<div class="imageElement">
			<img src="<{$xoops_url}>/uploads/photos/<{$photo.lid}>.<{$photo.ext}>" class="full" alt="" />
		</div>
	<{/foreach}>
</div>

として保存します。

個人個人で環境が異なると思いますので説明を補足する必要がありますね。

上記の1行目

<{xoops_block mod="myalbum" func="b_myalbum_topnews_show" opt="myalbum,5,50,1,0" assign="slideshow"}>

が、xoops block smarty pluginを使ってmyalbumのブロック：「最新の画像（画像付）」を利用し、こういう設定で表示しますよ、というものです。

このプラグインの使用ルールが
引用：

<{xoops_block mod="モジュールディレクトリ名"
func="ブロック関数名"
opt="関数の引数（必要に応じて）"
assign="テンプレートアサイン名"}>

というものです。

myalbumモジュールのb_myalbum_topnews_showという関数を使うというところまでは分かると思いますが、myalbumのオプションが分かり辛いので説明を加えますと、左から、

モジュールディレクトリ名(myalbum)
表示画像数(5)
titleテキストの文字数(50)
カテゴリid(1)
サブカテゴリを含めるかどうか？(0)

ですので、これを各自の環境に合わせて設定を行って下さい。

もう後は保存して、トップページを見てみるだけ。

どうですか、myalbumでアップロードしたファイルがスライドショーされてますか？

あとがき

これでmyalbumへの投稿権限さえあれば、テーマヘッダ画像をコントロールできるようになりました。このGallery + myalbum + xoops block smartyプラグイン( + pico )を使ったやり方を覚えると、かなり応用が利くようになります。

TOMさんのxoops block smartyプラグイン、ホントに便利です。また今回の内容では触れてませんが、GIJOEさんのpicoでsmartyが使えることのすばらしさ。も～涙モノです。

JonDesign (Jonathan Schemoul)さんに加え、お二人のXOOPS牽引者への感謝と、冒頭で触れた２，３の使い方をまた後日ご紹介することをお約束して、疲れたので今日はこれでおしまい...。