Piwigoのカスタマイズ

写真のオンラインギャラリーを実現するオープンソースのサーバーアプリケーション、多数あるけれども、ざっと調べてみて、Piwigo (http://piwigo.org/)が柔軟性も高く、しかもコミュニティの活発さもあって、よさそうだということでインストールしてみた。

MySQL5とPHP5が使えればインストールはきわめて簡単。
写真のアップロードは複数ファイルをまとめてWebインターフェースを通じてすることもできるし、Windows、Mac、Linux対応の専用ソフトpLoaderを使って透かし(watermark)を入れつつアップロードという芸当もできる。

写真の分類は1つの写真を複数のアルバムに入れることができ、しかもアルバムは階層構造、つまり入れ子にできるため、極めて柔軟にフォトライブラリーを構築することができる。

ユーザーごとに権限を指定できる(ただし、顧客によって個別の高解像度を提供したりしなかったり、というような高度な制御は標準機能では無理そう)。

Extensionが多く開発されていて、Facebook、Twitter、Google+などのお馴染みのものはもちろん、たとえばアップした写真をWordPressで表示するとか、ページを完全に多言語対応にするものや、PayPalでの支払いを実現するExtensionもある(PaypalやWordPressのケースはどこまで使えるかはまだ未確認)。

デザインはテーマとしてすでに開発されているものをダウンロードして利用することができる。CSSでのカスタマイズもLocalFiles EditorというExtensionを使うと、ブラウザー上で簡単に書き換えられる。簡単に静止ページを作るExtensionであるAdditional Pagesも便利。

3つの異なる用途にさっそくインストールしてみたが、異なる用途に対応する柔軟さがある。

特にExtended Descriptionは多言語化を可能にするExtensionで、多言語化が不可欠な人には非常に魅力なので、少しメモしておく。

多言語化対応にするExtended Description

Piwigoのメニューは多言語対応している(45言語![追記]Piwigo 2.3.3でエスペラントが加わり46言語になった)ので、Language SwitchというExtensionを有効化すれば、メニューはすぐに多言語対応になる。

写真のデータやアルバムの表記は基本的に1つしか入力項目がない(データベースの入力項目が1つずつしか存在していない)が、このデータを[lang=defalut]デフォルト言語用[/lang][lang=en]英語用[/lang][lang=ja]日本語[/lang]などという書式で書くことで多言語化するのがこのExtension。

ブラウザーのデフォルト言語の表記が表示され、またLanguage Switchのアイコンで切り替えることでブラウザの設定にはない言語に変更することもできる。

データの入力スペースは言語別に書く欄が分かれておらず、1つの欄に複数の言語のデータをタグと共に入力しなければならないので、入力の手間は大きくなり、管理画面からデータの視認性も少し落ちるが、多言語で組みたいという場合は大きな威力を発揮するだろう。

こうしたすぐれたシステムを見てしまうと、それを使って何か作ってみたくなる。それくらいおもしろい。

その他、いくつか、使う際にカスタマイズする必要を感じるので、そのやり方を記録しておく。

日本語の言語設定のアイコンが日の丸になってしまうことを修正

多国語切り替え(Language Switch)を有効化すると、日の丸が日本語表示のマークになる。
こりゃいやなので、
Piwigoインストールしたディレクトリ/language/ja_JP/ja_JP.jpgを書き換える。

アルバムの領域がクリックできるようにする

トップのページからアルバムをクリックする際、アルバムの文字やサムネイルの写真はクリックできるが、その他の部分はそうではない。アルバムが表示される領域はマウスでポインターを持って行く(hover)で色が変わるので、あたかもその領域をクリックすればそのアルバムが表示されるようになっているように思える。しかし何も変わらないため、人によってはそこから先に行けないと思ってしまうかもしれない。

そこで、文字・サムネイル画像以外のアルバムの領域をクリックしても当該アルバムに飛ぶようにjQueryを使って改造する。

Piwigoのインストールディレクトリ/themes/default/template/header.tpl
{get_combined_scripts load=’header’}
の下に以下を書き加える。

{combine_script id='jquery' path='themes/default/js/jquery.min.js'}
{literal}
<script type="text/javascript">
$(function(){
$(".thumbnailCategory").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
</script>
{/literal}

これでアルバムをクリックすれば飛んでくれるはず。

高解像度の写真はダウンロードのアイコンクリックに限るように改造

高解像度が許可されたユーザーに対してはWebページの写真(サムネールよりも大きな個別の写真ページで表示される写真)をクリックすると高解像度の写真が出るようになっている。

しかし、この方法だと高解像度の写真をダウンロードした人が把握できなくなる。高解像度の写真をダウンロードした人をアクセス解析(History追跡機能)で把握したい、しかし、管理者だけは写真クリックで高解像度の写真を表示できるようにという団体のニーズに合わせるため、ソースに手を加えた(管理者には可能にしたのは高解像度の写真のURLが管理者にはすぐにわかるようにするため)。

インストールディレクトリ/themes/default/template/picture_content.tpl
のファイルを書き換える。下記で
{if isset($U_ADMIN)}
{/if}

でくくったところがそれ。

{if isset($high)}
{combine_script id=’core.scripts’ load=’async’
path=’themes/default/js/scripts.js’}
{if isset($U_ADMIN)}
<a href=”javascript:phpWGOpenWindow(‘{$high.U_HIGH}’,'{$high.UUID}’,’scrollbars=yes,toolbar=no,status=no,resizable=yes’)”>
{/if}
{/if}
<img src=”{$SRC_IMG}”
style=”width:{$WIDTH_IMG}px;height:{$HEIGHT_IMG}px;” alt=”{$ALT_IMG}”
id=”theMainImage”
{if isset($COMMENT_IMG)}
title=”{$COMMENT_IMG|@strip_tags:false|@replace:'”‘:’
‘}” {else} title=”{$current.TITLE|@replace:'”‘:’ ‘} – {$ALT_IMG}”
{/if}>
{if isset($high) }
{if isset($U_ADMIN)}
</a>
<p>{‘Click on the photo to see it in high definition’|@translate}</p>
{/if}
{/if}

日本語に対応していないExtensionを使う場合

Piwigoインストールしたディレクトリ/plugins/プラグインの名前/language
の下に ja_JP というディレクトリを作り、たぶん存在しているだろうen_USかen_UKのディレクトリーの中味をコピーした上で、plugin.lang.phpなどというファイル名のファイルを翻訳していく。
書式は
$lang[‘Top’] = ‘Top’;
のようになっているので、
$lang[‘Top’] = ‘トップ’;
としてやればいい。

オープンソースの精神に立てば、使う以上、日本語対応させた時はそのプラグイン(Extension)の作者に日本語の翻訳ファイルを送って貢献すべきだろう。しかしものによっては大量の翻訳になるので、全部やろうと思うと大変になることもある。

Extension download_multiの翻訳を修正する

アルバムごとや個々の写真をまとめてダウンロードできるExtension、Download_Multi、便利なプラグインだが、管理画面が英語を選択しても、フランス語のまま。これも上記の方法で、ja_JPディレクトリーを作成して、そこで翻訳すればいい。実はen_UKの翻訳セットは準備されているのだけど、管理画面のところはフランス語のままになっているので、言語設定を変えても管理画面は変わらない。

download_multi/language/ja_JP

download_multi/language/en_UK
の内容をコピーして、フランス語になっているものを日本語にしてやればいい。なお、グループは複数選ばなくても、Ctrlを押して指定してやらないと、選択したことにならず、エラーが出て、いつまでたっても設定できないことになってしまうので注意が必要。

翻訳の足りない部分、おかしい部分

バッチ・マネージャーで下記の翻訳が足りないのでlanguage/ja_JP/admin.lang.php に追加。
$lang[‘The whole page’] = ‘このページすべて’;
$lang[‘The whole set’] = ‘すべての写真’;
$lang[‘Who can see this photo?’] = ‘この写真の閲覧許可対象’;

同ファイルで
s/アックション/アクション/ ←アックションと書かれた部分3カ所一括置換
s/アドミニ/管理ページ/

日本語で問題になるかも=メール文字コード

コンタクトフォーム用のExtensionはあるが、日本語用のメールのExtensionは存在していないので、メールの文字コードはUTF-8になる。今時、ほとんどのメールクライアントはUTF-8は読めると見なせれば問題ないが、そうでない場合、文字化けする。

気になる人はExtension作るしかない。

使用しなかったExtension

LMT
著作権を選択して表示する。よくできているが、単に著作権の種類を表示するだけでなく、カメラマンの写真を預かるような場合、著作権者の名前を保存しなければならない場合、Piwigoのauthorとは別にデータを保存することになってしまい、煩雑になるので、利用をあきらめた。写真によってCreative Commonsの異なるレベルやCopyright (CopyLeft) を使い分けるという時は威力を発揮するかもしれない。
Extended_authorとCopyrights

著作権者をプルダウンで選択できると思ったのだけど、うまくいかなかった。あらかじめ著者情報を入れておけばよかったのだろう。今後使ってみようと思うが、個人的なメモとして残しておく。

いずれにしても、写真を効果的に共有したいという場合にはひじょうに使えるシステムであると思う。今後の発展にも期待したい。

追記: タイトルバナーにHomeへのリンクを追加

タイトルバナーにHomeへの戻りのリンクがないのは使いにくい、ということで

themes/default/template/header.tpl に下記のリンクを追加。こうすると管理画面で書き込むPage bannerの文章にまで同じリンクがかかってしまう(Page bannerで書き込む文章を</a>で始め、その続きの文章のどこかにリンクを設定して最後の</a>を省けば、ちょうどうまく行くんだが…)。またリンク文字の色はテーマによって決めさせた方がいいからここでstyleで書くのは御法度だろうが、何と書けば正解なのか今わからないので暫定的に。

<div id=”theHeader”><a href=”/photos/” style=”text-decoration:none;color:white”>{$PAGE_BANNER}</a></div>

Piwigoに関する情報

:
Piwigo Website: http://piwigo.org/
Twitter: @Piwigo

“Piwigoのカスタマイズ” への1件の返信

  1. Hi :-)

    If you are interested in translating Piwigo

    you can contact me on the site Piwigo ;-)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA