【freo】【freoTips】【プラグイン系TIPS】スライドショーをメディア機能で管理する方法（メディア一括表示プラグインの利用例）
- 2013/09/13 03:05
- メディア一括表示プラグイン
- スライドショー
- メディア
- include
- 119
サイトに表示するスライドショーなどをメディア一括表示プラグインで利用する場合の利用例です。
スライドショーを設置する
スライドショーの設置は下記を参考にしてください。
32877：【html】画像をスライドショーで表示するjQuery
スライドショーをメディアで管理してみる
まずは、スライドしたい画像をfreo管理画面→メディアに登録します。
今回は、メディアフォルダ内に「imageslide」というフォルダを作って、その中の画像をスライドショーにしてみます。
メディアに登録した画像のうち、特定のフォルダにある画像を一覧で表示するには、メディア一括表示プラグインを利用します。
メディア一括表示プラグインを実装する
freo公式サイトからメディア一括表示プラグインをDLして実装してください。
このプラグインは、[freo/index.php/media_all]画面を表示したとき、メディアを一覧表示するプラグインです。
特定のフォルダを一覧表示することもできます。
[freo/index.php/media_all] 画面だけでなく、デフォルト画面やページ画面でも一覧表示シたい場合は、拙サイトで配布しているトップページとかでもメディア一括表示プラグインを利用するためのdisplayプラグインが必要です。
トップページとかでもメディア一括表示プラグインを利用するためのdisplayプラグインを実装する
当サイトからトップページとかでもメディア一括表示プラグインを利用するためのdisplayプラグインをDLして実装してください。
このプラグインは、メディア一括表示プラグインを、デフォルト画面、エントリー画面、カテゴリー画面、エントリー記事表示画面（freo/index.php/view）、ページ画面でも利用できるようにするためのプラグインです。
上記２つのプラグインを実装したら、下記のようにテンプレートを作成してみましょう。
スライドショー用のテンプレートを作成する
エディタで新しいページを開き、「imageslide.html」として保存します。
文字コードは「UTF-8」、改行コードは「CR+LF」で作成してください。
保存場所は[freo/templates]フォルダがいいでしょう。
このテンプレート内にスライドショー用のコードを書き込み、スライドショーを設置したい部分のテンプレート（例えばデフォルト画面に設置したいなら[freo/templates/internals/default/default.html]）でincludeするといいでしょう。
smartyのinclude機能についての説明はコチラを御覧ください。
imageslide.htmlの内容は、上記スライドショーのHTML部分の記述を参考に作成します。
たとえばですが、Favorite Laboさんで解説されているjQueryでスライドショーを作成を参考に、スライドしたい画像をリスト（<ul>～</ul>）で取得してみます。
まず、「imageslide.html」には、このように書きます。
<div id="imageslide">
<h2>スライドショー</h2>
{assign var="path" value='files/medias/imageslide/'}
{include file='plugins/media_all/media_all.html'}
</div>
とりあえず、スライドショーをDIVで囲んで、見出しをつけておきました。
DIVや見出しが必要なければ削除してください。
メディア画像を取得してリスト表示するには、メディア一括表示プラグインを利用します。
メディア一括表示プラグインを呼び出すのが
{assign var="path" value='files/medias/imageslide/'}
{include file='plugins/media_all/media_all.html'}
↑の部分なので、この部分だけ記載してもOKです。
この部分で、どのフォルダを一括表示するか、どのテンプレートを利用して表示するかを指定しています。
メディアフォルダ下の「imageslide」フォルダを、[media_all.html]を使って一括表示します。
詳細はfreo公式サイトのメディア一括表示プラグインの機能解説を御覧ください。
メディア一括表示プラグインテンプレートを確認する
メディアをどのように一括表示しているのかを確認してみましょう。
[freo/templates/plugins/media_all/media_all.html]を開いてください。
<!--{foreach from=$media_alls|smarty:nodefaults item='media_all'}-->
<!--{if $media_all.path == $path}-->
<!--{php}if (!$flag) :{/php}--><ul><!--{php}endif;{/php}-->
<li>
<!--{if $media_all.type == 'directory'}-->
<span title="{$media_all.id}" class="directory">{$media_all_names[$media_all.id]|default:$media_all.name}</span>
<!--{if $media_all.restriction}-->
<p class="attention">このディレクトリには、閲覧制限が設定されています。</p>
<!--{/if}-->
<!--{elseif $media_all.width and $media_all.height}-->
<a href="{if $media_all.restriction}{$freo.core.http_file}/file/media/{$media_all.directory}{$media_all.name}{else}{$freo.core.http_url}{$media_all.id}{/if}"{if $media_all.memo} title="{$media_all.memo}"{/if}><img src="{if $media_all.restriction}{$freo.core.http_file}/file/media/{$media_all.directory}{$media_all.name}{if $media_all.thumbnail.id}?type=thumbnail{/if}{else}{$freo.core.http_url}{if $media_all.thumbnail.id}{$media_all.thumbnail.id}{else}{$media_all.id}{/if}{/if}" alt="{$media_all.name}（{$media_all.width}px × {$media_all.height}px）" title="{$media_all.name}（{$media_all.width}px × {$media_all.height}px）" /></a>
<!--{else}-->
<a href="{if $media_all.restriction}{$freo.core.http_file}/file/media/{$media_all.directory}{$media_all.name}{else}{$freo.core.http_url}{$media_all.id}{/if}"{if $media_all.memo} title="{$media_all.memo}"{/if}>{$media_all.name}</a>
<!--{/if}-->
<!--{assign var="path" value=$media_all.id}-->
{include file='plugins/media_all/media_all.html'}
<!--{assign var="path" value=$media_all.path}-->
</li>
<!--{php}$flag = 1;{/php}-->
<!--{/if}-->
<!--{/foreach}-->
<!--{php}if ($flag) :{/php}--></ul><!--{php}endif;{/php}-->
このように書かれています。
ディレクトリの中にあるメディアをリスト形式で一覧表示しています。
解説はこんなかんじです↓
<!--{メディアをmedia_allとして繰り返して表示するここから}-->
<!--{もしメディアのパスがimageslide.htmlで設定した表示したいディレクトリのパスと同じだったらここから}-->
<!--{最初だったらここから}--><ul><最初だったらここまで}-->
<li>
<!--{もしメディアがディレクトリだったここから}-->
<span title="メディアのID" class="directory">メディアの名前</span>
<!--{もしメディアの閲覧制限がかかってたらここから}-->
<p class="attention">このディレクトリには、閲覧制限が設定されています。</p>
<!--{もしメディアの閲覧制限がかかってたらここまで}-->
<!--{またはメディアに横幅と高さがあったら＝画像ファイルだったらここから}-->
<a href="{もしメディアに閲覧制限がかかってたらここから}{$freo.core.http_file}/file/media/{メディアのディレクトリ}{メディアの名前}{そうじゃなければ}{$freo.core.http_url}{メディアのID}{もしメディアに閲覧制限がかかってたらここまで}"{もしメディアに説明がついてればここから} title="{メディアの説明}"{もしメディアに説明がついてればここまで}><img src="{もしメディアに閲覧制限がかかってたらここから}{$freo.core.http_file}/file/media/{メディアのディレクトリ}{メディアの名前}{もしメディアのサムネイルがあればここから}?type=thumbnail{もしメディアのサムネイルがあればここまで}{そうじゃなければ}{$freo.core.http_url}{もしメディアにサムネイルがあればここから}{メディアのサムネイルID}{そうじゃなければ}{メディアのID}{もしメディアにサムネイルがあればここまで}{もしメディアに閲覧制限がかかってたらここまで}" alt="{メディアの名前}（{メディアの横幅}px × {メディアの高さ}px）" title="{メディアの名前}（{メディアの横幅}px × {メディアの高さ}px）" /></a>
<!--{そうじゃなければ}-->
<a href="{もしメディアに閲覧制限がかかってたらここから}{$freo.core.http_file}/file/media/{メディアのディレクトリ}{メディアの名前}{そうじゃなければ}{$freo.core.http_url}{メディアのID}{もしメディアに閲覧制限がかかってたらここまで}"{もしメディアに説明がついてればここから} title="{メディアの説明}"{もしメディアに説明がついてればここまで}>{メディアの名前}</a>
<!--{もしメディアがディレクトリだったここまで}-->
<!--{このディレクトリ以下のディレクトリのメディアを読み込むここから}-->
{include file='plugins/media_all/media_all.html'}
<!--{このディレクトリ以下のディレクトリのメディアを読み込むここまで}-->
</li>
<!--{php}$flag = 1;{/php}-->
<!--{もしメディアのパスがimageslide.htmlで設定した表示したいディレクトリのパスと同じだったらここまで}-->
<!--{メディアをmedia_allとして繰り返して表示するここまで}-->
<!--{最後だったらここから}--></ul><最後だったらここまで}-->
このように、[imageslide]フォルダに登録されているメディアを<li>～</li>で挟んで繰り返して表示しています。
画像のタイトルなどをいじりたければ上記の解説を参考にテンプレートの該当箇所をいじってみてください。
以上の手順でスライドショーをメディアで一括表示することができると思います。
