写真と画像データのアルバム風表示にプラグインを利用する
画像データを簡易アルバム風に表示させたい場合には、アルバム風表示プラグインを利用することができます。このプラグインは quickgallery というものなのですが、これ以外のプラグインの情報を見つけることはできませんでした。picasa_for_flatpress(http://wiki.flatpress.org/res:plugins#picasa_for_flatpress)については、Google API について不勉強なこと、加えて、Google 側の事情でその API が変更されたら一切手が出ないだろうことから、当初から見送りました。
quickgallery について：http://wiki.flatpress.org/res:plugins#quickgallery
利用方法：http://wiki.flatpress.org/res:plugins:nowhereman:quickgallery
インストール手順
- まず、fp-plugins/quickgallery/という、このプラグイン用のディレクトリを作成します。
- 次に、https://raw.githubusercontent.com/evacchi/flatpress-extras/master/fp-plugins/quickgallery/plugin.quickgallery.php のファイルをダウンロードするか、内容をコピーしてplugin.quickgallery.phpとして上記のディレクトリに格納します。
- 「管理エリア」の「プラグイン」で、同quickgalleryのプラグインを有効にセットしておきます。
画像の表示手順
- アルバム風に表示したい写真または画像は、以下の表示専用ディレクトリを作成してそこにアップロード（管理エリア）または、FTP をします。
- この専用ディレクトリ内の画像が一覧で表示されるので、一覧したいまとまりごとに専用ディレクトリを準備する必要があります。
- 専用ディレクトリの場所は、例えば、/fp-content/images/alubm/ となりますが、fp-content/images/ ディレクトリはインストール当初には存在しておらず、何らかの画像を初回アップロードした瞬間に生成されるようです。
- 記事中でこの簡易アルバム(quickgallery)を利用する文法は次の通りです。ここでの scale はポップアップする前の画像の縮小率を意味しています。（サイズを指定することも可能ですので、詳細は前述の「利用方法」を参考にしてください）
[gallery=images/album scale=20%]
このような感じにアルバムが表示され、クリックするとポップアップして拡大してきます。
CSSを活用する方法
上記のリンク先の記事 に自動的に挿入される CSS のクラス名が載っています。それによると、.img-gallery{ }として記述すればよいので、これも利用して少しデザイン性を高めてみました。/fp-interface/themes/leggero/leggero/res/common.css に追加を施します。
/fp-interface/themes/leggero/leggero/res/common.css
#main .img-gallery {
margin-top: 40px;
background:-moz-linear-gradient(59% 36% 275deg, #ffffff, #88cc99 100%);
}
#main .img-gallery img {
position: relative;
display: inline-block;
border: 10px solid #fff
box-shadow: 0 0 4px #999;
transform: rotate(20deg);
overflow: hidden;
margin: 10px; transform-origin: 0 0; transform: rotate(-20deg);
}
上記のCSSが適用されると、デザイン性が良くなってきますね。（お好みでCSSを改良してみてください）
なお、記事の背景のグラデーションを調整するには、ウェブサービスを利用するのが便利です。