• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freo講座>初心者の為のfreoサイト運営講座> 【イラスト編(08)】アルバムプラグインを利用してギャラリーを作る。

【freo】【freo講座】【初心者の為のfreoサイト運営講座】【イラスト編(08)】アルバムプラグインを利用してギャラリーを作る。

これまで、エントリー・ページ・メディアに登録した画像でギャラリーを作成する方法をご紹介しました。
色々制約やルールがあってわかりにくかったかもしれません。

今回は、当サイトで配布しているギャラリー用のプラグイン「アルバムプラグイン」を利用してギャラリーを作成する方法をご紹介します。

アルバムプラグインとは

アルバムプラグインは、freoでギャラリーを表示するためにご利用いただけるプラグインです。
アルバムプラグインの機能は下記の通りです。

  • 複数件のアルバムを一覧にして表示することができます。
  • 1件のアルバムを選択して個別に表示することができます。
  • 1件のアルバムに、「タイトル」「本文」「オプション10種」を登録できます。
  • 1件のアルバムに、添付ファイル(画像に限る)を登録できます。
    登録できる画像数に制限はありません。
  • 画像登録時にサムネイルを自動作成できます。
  • 1件のアルバムを、タグとカテゴリーで分類できます。
  • 閲覧制限(フィルタリング・ユーザー制限・パスワード制限・グループ制限)を利用できます。
  • アルバムに登録された画像を一覧表示できる他、画像を本文内に挿入して表示することもできます。
利用サンプル
アルバムファイル(画像)の表示順について

アルバムプラグインでは、画像は「ファイル名順(昇順または降順)」に表示されます。
よって、画像の表示順を変更するには、ファイル名を変更する必要があります。

管理ページ→アルバム管理→編集したいアルバムを選んで「編集」をクリックでアルバムの編集画面が表示されます。
名前を変更したいファイルを選んで「編集」で画像の名前を変更できます。

画像登録時に表示順を意識した名前を設定し、ご登録されることをおすすめします。

アルバム関連のその他プラグイン

当サイトでは、新着アルバムを表示するための新着アルバムプラグインを配布しています。
また、アルバムの月別件数を表示するアルバムアーカイブ表示プラグインを配布しています。
アルバムに関連するタグは、アルバムタグクラウド表示プラグインを利用すれば一覧表示できます。
アルバムレスポンスプラグインを利用すると、アルバムにレスポンス(コメント)をつけることができます。

アルバムプラグインを利用したギャラリーの作成

アルバムプラグインを導入すると、アルバムを作成できるようになります。
1件のアルバムには複数の画像を登録することができますので、画像のみを一覧で表示したり、本文に挿入して表示したり、ご自由に記事を作成してください。

アルバム一覧画面(freo/index.php/album)の表示方法を変更する

アルバム一覧画面(freo/index.php/album)は、デフォルトの状態では、アルバムの情報をタイトル・本文・画像含め、全ての情報を表示できるようにしています。
これを例えば、タイトルと画像だけ表示するように変更するには下記のようにしてください。

  1. [freo/templates/plugins/album/default.html]の26~56行目を下記の通り変更する
            <div id="album">
                <!--{foreach from=$plugin_albums|smarty:nodefaults item='plugin_album'}-->
                    <div class="album">
                        <h3><a href="{$freo.core.http_file}/album/view/{$plugin_album.id}">{$plugin_album.datetime|date_format:'%Y/%m/%d'}<!--{if $plugin_album.title}-->{$plugin_album.title}<!--{/if}--></a><!--{if $freo.user.authority == 'root' or $freo.user.authority == 'author'}--><a href="{$freo.core.http_file}/album/admin_form?id={$plugin_album.id}"><img src="{$freo.core.http_url}images/icons/edit.png" alt="編集" title="編集" width="16" height="16" /></a><!--{/if}--></h3>
                        <ul class="album_image">
                            <!--{if $plugin_album_files[$plugin_album.id]|smarty:nodefaults}-->
                            <!--{foreach from=$plugin_album_files[$plugin_album.id]|smarty:nodefaults item='plugin_album_file'}-->
                            <li><a rel="album{$plugin_album.id}" title="{$plugin_album.title}" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/album_files/{$plugin_album.id}/{$plugin_album_file.name}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/{if $plugin_album_file.thumbnail|smarty:nodefaults}album_thumbnails{else}album_files{/if}/{$plugin_album.id}/{$plugin_album_file.name}" alt="{$plugin_album_file.name}" title="{$plugin_album_file.name}" /></a></li>
                            <!--{/foreach}-->
                            <!--{/if}-->
                        </ul>
                        <!--{if $plugin_album.restriction == 'password' and !$smarty.session.security.plugin_album[$plugin_album.id] and $freo.user.authority != 'root' and $freo.user.authority != 'author'}-->
                        <form action="{$freo.core.http_file}/album/view/{$plugin_album.id}" method="post">
                            <fieldset>
                                <legend>認証フォーム</legend>
                                <dl>
                                    <dt>パスワード</dt>
                                        <dd><input type="text" name="plugin_album[password]" size="30" value="" /></dd>
                                </dl>
                                <p><input type="submit" value="認証する" /></p>
                            </fieldset>
                        </form>
                        <!--{/if}-->
                    </div>
                <!--{/foreach}-->
            </div>
    
  2. 上記テンプレートを上書き保存しアップロードする。

また、添付ファイルの内最初の1枚目だけを表示し、あとの画像は表示しないのであれば、

  1. [freo/templates/plugins/album/default.html]の47~53行目を
                        <ul class="album_image">
                            <!--{if $plugin_album_files[$plugin_album.id]|smarty:nodefaults}-->
                            <!--{foreach from=$plugin_album_files[$plugin_album.id]|smarty:nodefaults item='plugin_album_file' name='album_loop'}-->
                            <!--{if $smarty.foreach.album_loop.first}-->
                            <li><a rel="album{$plugin_album.id}" title="{$plugin_album.title}" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/album_files/{$plugin_album.id}/{$plugin_album_file.name}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/{if $plugin_album_file.thumbnail|smarty:nodefaults}album_thumbnails{else}album_files{/if}/{$plugin_album.id}/{$plugin_album_file.name}" alt="{$plugin_album_file.name}" title="{$plugin_album_file.name}" /></a></li>
                            <!--{/if}-->
                            <!--{/foreach}-->
                            <!--{/if}-->
                        </ul>
    
    のように変更する。
  2. 上記テンプレートを上書き保存しアップロードする。
アルバム個別表示画面(freo/index.php/album/view/アルバムID)の表示方法を変更する

アルバムプラグインを導入すると、アルバムを作成できるようになります。
1件のアルバムには複数の画像を登録することができますので、画像のみを一覧で表示したり、本文に挿入して表示したり、ご自由に記事を作成してください。

例えば、画像を本文に挿入して表示し、画像の一覧表示を削除する方法は下記の通りです。

  1. [freo/templates/plugins/album/view.html]の19行目
                <!--{if $plugin_album.text}--><p>{$plugin_album.text|smarty:nodefaults|nl2br}</p><!--{/if}-->
    
    をそのまま残し、
  2. [freo/templates/plugins/album/view.html]の32~39行目
                <!--{if $plugin_album_files|smarty:nodefaults}-->
                <h3>添付ファイル</h3>
                <ul class="album_image">
                    <!--{foreach from=$plugin_album_files|smarty:nodefaults item='plugin_album_file'}-->
                    <li><a rel="album{$plugin_album.id}" title="{$plugin_album.title}" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/album_files/{$plugin_album.id}/{$plugin_album_file.name}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/{if $plugin_album_file.thumbnail|smarty:nodefaults}album_thumbnails{else}album_files{/if}/{$plugin_album.id}/{$plugin_album_file.name}" alt="{$plugin_album_file.name}" title="{$plugin_album_file.name}" /></a></li>
                    <!--{/foreach}-->
                </ul>
                <!--{/if}-->
    
    を削除する。
  3. 上記テンプレートを上書き保存しアップロードする。

その他のアルバム関連TIPS

その他のカスタマイズは下記を参考にして下さい。

まとめ

freoには、エントリー・ページ・メディアなどの画像を登録できる機能があり、それらを利用して登録した画像をギャラリーとして利用するには、様々なプラグインが公開されています。
それらを利用してギャラリーを作成することもできますし、アルバムプラグインなどのギャラリー専用プラグインを利用することも出来ます。

どれが一番自分の作成したいギャラリーに適しているかを検討し、自分にあった機能を選んで利用することが大切です。

ページ移動

関連記事

ページ上部へ