【freo】【freoTips】【プラグイン系TIPS】エントリーギャラリー表示プラグインをサイドメニューに表示する方法
- 2013/11/16 01:01
- エントリー
- イメージ
- ファイル
- エントリーギャラリー表示プラグイン
- 68
エントリーギャラリー表示プラグインとは
エントリーギャラリー表示プラグインとは、freoにデフォルトで導入されているプラグインです。
エントリーにイメージまたはファイルまたは記事本文内の画像ファイルがあれば、最初の1個だけを自動的に表示してギャラリーを作成してくれるプラグインです。
画像はエントリーの投稿日時順に表示されます。
実際に動いてるのサンプルはこちらをどうぞ(テンプレート編集してないので見栄え悪いですが)。
[freo/index.php/entry_gallery]にアクセスすると、上記ギャラリー画面を閲覧できます。
デフォルト画面・エントリー画面・カテゴリー画面・エントリー個別表示画面(VIEW画面)でもギャラリーを表示できますが、その場合は[管理メニュー]→[システム]→[設定管理]→[プラグインの設定]→[エントリーギャラリー表示プラグイン]で設定した新着の表示件数分のエントリーしか表示されません。
サイドメニューにエントリーギャラリー表示プラグインを表示してみる。
サイドメニュー(utillity)でエントリーギャラリー表示プラグインを表示する方法は以下のとおりです。
- [freo/templates/utillity.html]をエディタで開く。
- エントリーギャラリー表示を追加したい場所に下記の通り加筆する。
<!--{if $plugin_entry_galleries|smarty:nodefaults}--> <div class="utility"> <h3>新着画像</h3> <div class="content"> <ul class="gallery"> <!--{foreach from=$plugin_entry_galleries|smarty:nodefaults item='plugin_entry_gallery'}--> <li><a href="{$freo.core.http_file}/view/{if $plugin_entry_gallery.code}{$plugin_entry_gallery.code}{else}{$plugin_entry_gallery.id}{/if}"><!--{if $plugin_entry_gallery.image}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.image}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{elseif $plugin_entry_gallery_thumbnails[$plugin_entry_gallery.id]}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_thumbnails/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{elseif $plugin_entry_gallery.file and $plugin_entry_gallery_files[$plugin_entry_gallery.id].width and $plugin_entry_gallery_files[$plugin_entry_gallery.id].height}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{elseif $plugin_entry_gallery_medias[$plugin_entry_gallery.id].file}--><img src="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{else}-->{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}<!--{/if}--></a></li> <!--{/foreach}--> </ul> </div> </div> <!--{/if}-->
- [freo/templates/utillity.html]をアップロードする。
おまけのCSS
上記エントリーギャラリーをそれっぽく表示するためのおまけのCSSです。
[freo/css/default.css]などに加筆してご利用下さい。
div.utility div.content ul.entry_gallery{padding: 0; margin: 5px 0;} div.utility div.content ul.entry_gallery li{float: left; list-style: none;} div.utility div.content ul.entry_gallery li img{width: 50px; margin: 5px} div.utility div.content p.clear{clear: left;}