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

> Entry >freo>freoTips>プラグイン系TIPS> エントリーギャラリー表示プラグインをサイドメニューに表示する方法

【freo】【freoTips】【プラグイン系TIPS】エントリーギャラリー表示プラグインをサイドメニューに表示する方法

エントリーギャラリー表示プラグインとは

エントリーギャラリー表示プラグインとは、freoにデフォルトで導入されているプラグインです。
エントリーにイメージまたはファイルまたは記事本文内の画像ファイルがあれば、最初の1個だけを自動的に表示してギャラリーを作成してくれるプラグインです。
画像はエントリーの投稿日時順に表示されます。
実際に動いてるのサンプルはこちらをどうぞ(テンプレート編集してないので見栄え悪いですが)。

[freo/index.php/entry_gallery]にアクセスすると、上記ギャラリー画面を閲覧できます。
デフォルト画面・エントリー画面・カテゴリー画面・エントリー個別表示画面(VIEW画面)でもギャラリーを表示できますが、その場合は[管理メニュー]→[システム]→[設定管理]→[プラグインの設定]→[エントリーギャラリー表示プラグイン]で設定した新着の表示件数分のエントリーしか表示されません。

サイドメニューにエントリーギャラリー表示プラグインを表示してみる。

サイドメニュー(utillity)でエントリーギャラリー表示プラグインを表示する方法は以下のとおりです。

  1. [freo/templates/utillity.html]をエディタで開く。
  2. エントリーギャラリー表示を追加したい場所に下記の通り加筆する。
            <!--{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}-->
    
  3. [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;}

ページ移動

関連記事

ページ上部へ