ZenphotoでかんたんWebギャラリー

第6回 テンプレートをカスタマイズする

この記事を読むのに必要な時間:およそ 3 分

タグの自動非表示化

アルバム説明文と同様に,タグも設定されていない場合には「⁠⁠タグなし...⁠⁠」という代替文が自動的に表示されます。

図3 タグが設定されていない場合の代替文

図3 タグが設定されていない場合の代替文

こちらも設定されているならば表示して,されていないければ代替文も含めて何も表示しない,というカスタマイズをしてみましょう。

設定されているタグは,album.phpの55行目あたりにあるprintTags()というコードが出力を行っています。

album.php 52-55行目:タグを出力するコード「printTags()」

52 :    </div>
53
54 :    <?php printPageListWithNav("« ".gettext("prev"), gettext("next")." »"); ?>
55 :    <?php printTags('links', gettext('<strong>Tags:</strong>').' ', 'taglist', ''); ?>

printTagsも特定の引数を与えてやることで,設定されているタグが無いときには何も表示されなくなります。この場合は6番目の引数にfalseを与えればOKです。

album.php 55行目:printTags() の編集

<?php printTags('links', gettext('<strong>Tags:</strong>').' ', 'taglist', '',true,'',false); ?>

これで,アルバム説明文とあわせて,設定がされていなかったらどちらも何も表示しない,というスッキリしたページになりました。

図4 タグが設定されていない場合に自動非表示化

図4 タグが設定されていない場合に自動非表示化

ランダムで画像を一枚表示

余分なものを省くカスタマイズから,今度は新たに追加していくカスタマイズをおこなってみましょう。ギャラリーのトップページの冒頭に,ランダムで切り替わる1枚の大きな画像が表示されるようにします。

図5 ギャラリートップページの冒頭をカスタマイズ

図5 ギャラリートップページの冒頭をカスタマイズ

トップページのカスタマイズなので,編集するテンプレートファイルは「index.php」です。そしてZenphotoには,ランダムでギャラリーの中から一枚の画像を表示するコードが最初から備わっています。それがprintRandomImages()です。

index.php 30行目:printRandomImages() の挿入

26 :<div id="gallerytitle">
27 :    <?php if (getOption('Allow_search')) {  printSearchForm(''); } ?>
28 :    <h2><?php printHomeLink('', ' | '); echo getGalleryTitle(); ?></h2>
29 :</div>
30 :<?php printRandomImages(1,null,'all','',630,420); ?>
31 :    <div id="padbox">

printRandomImagesはランダムでピックアップする数や出力時のhtmlに付与するclass,ランダムの選択範囲や表示するサイズなどを引数で指定することができます。上記の場合はギャラリー全体から,1枚の画像を,横630px,縦420pxで出力するように引数を設定しています。

出力されるHTMLをCSSで調整することで,ギャラリー説明文の上に大きな画像がランダムで1枚表示されるようになりました。

図6 ギャラリートップページの冒頭に画像をランダムで表示

図6 ギャラリートップページの冒頭に画像をランダムで表示

ソーシャルブックマークの設置

CMSといえば,その動的な出力を活かして,ソーシャルブックマークと連動させるのが昨今のよく使われる手法です。そこで,このギャラリーの詳細画像ページにもTwitterのツイートボタンを導入してみます。Twitter公式ページから取得したツイートボタンの埋め込み用コードを利用します。

図7 ツイートボタン埋め込み用コード

図7 ツイートボタン埋め込み用コード

詳細画像ページの場合,編集するテンプレートファイルは「image.php」です。

図8 詳細画像ページ

図8 詳細画像ページ

image.phpの任意の場所に,ツイートボタン埋め込み用のコードを挿入します。また挿入する際に,アルバムと同様で説明文とタグが設定されていない場合は非表示になるように編集しています。

image.php 71-84行目:ツイートボタン埋め込み用コードの挿入

71 :<div id="narrow">
72 :    <?php printImageDesc(true,'',false); ?>
73 :    <?php if (function_exists('printSlideShowLink')) printSlideShowLink(gettext('View Slideshow')); ?>
74 :    <br />
75 :    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
76 :    <?php if(getTags()): ?> 
77 :    <hr /><br />
78 :    <?php endif; ?>
79 :    <?php
80 :        if (getImageMetaData()) {echo "<div id=\"exif_link\"><a href=\"#\" title=\"".gettext("Image Info")."\" class=\"colorbox\">".gettext("Image Info")."</a></div>";
81 :            echo "<div style='display:none'>"; printImageMetadata('', false); echo "</div>";
82 :        }
83 :    ?>
84 :    <?php printTags('links', gettext('<strong>Tags:</strong>').' ', 'taglist', '', '',true,'',false); ?>

これで詳細画像ページにツイートボタンが実装されました。その他のソーシャルブックマークの追加や,挿入の位置など,お好みにあわせて調整してください。

図9 ツイートボタンの付いた詳細画像ページ

図9 ツイートボタンの付いた詳細画像ページ

いかがでしたでしょうか。この最終回では,前回までの話を引き継いだ上で,少し技術的な面に足を踏み入れました。CMSはソースコードを理解できればできるほど,使い勝手を向上することができます。ぜひ技術的な面にも触れてみてください。

連載を通して,Zenphotoに魅力を感じていただけたならば幸いです。紹介していない機能などもありますので,ぜひ色々と試していただき,オリジナルのギャラリーサイトを制作してみてください。

最後までお読みいただきまして,ありがとうございました。

著者プロフィール

一戸健宏(いちのへたけひろ)

株式会社ロクナナにて,主にWeb案件のディレクションや,CMSの構築などを担当しているクリエイティブディレクター。

Webだけでなくイベントや撮影など様々な案件を扱うロクナナでは,イベント受付や撮影助手の他,体格を活かして荷物・機材運びなどの力仕事で最前線に立つことも。

URLhttp://rokunana.com/