FlatPress.info

Information & blog

写真と画像データのアルバム風表示にプラグインを利用する

画像データを簡易アルバム風に表示させたい場合には、アルバム風表示プラグインを利用することができます。このプラグインは 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

ダウンロード先:https://raw.githubusercontent.com/evacchi/flatpress-extras/master/fp-plugins/quickgallery/plugin.quickgallery.php

 

インストール手順

  1. まず、fp-plugins/quickgallery/という、このプラグイン用のディレクトリを作成します。
  2. 次に、https://raw.githubusercontent.com/evacchi/flatpress-extras/master/fp-plugins/quickgallery/plugin.quickgallery.php のファイルをダウンロードするか、内容をコピーしてplugin.quickgallery.phpとして上記のディレクトリに格納します。
  3. 「管理エリア」の「プラグイン」で、同quickgalleryのプラグインを有効にセットしておきます。

plugin-quickgallery

 

 

画像の表示手順

  1. アルバム風に表示したい写真または画像は、以下の表示専用ディレクトリを作成してそこにアップロード(管理エリア)または、FTP をします。
  2. この専用ディレクトリ内の画像が一覧で表示されるので、一覧したいまとまりごとに専用ディレクトリを準備する必要があります。
  3. 専用ディレクトリの場所は、例えば、/fp-content/images/alubm/ となりますが、fp-content/images/ ディレクトリはインストール当初には存在しておらず、何らかの画像を初回アップロードした瞬間に生成されるようです。
  4. 記事中でこの簡易アルバム(quickgallery)を利用する文法は次の通りです。ここでの scale はポップアップする前の画像の縮小率を意味しています。(サイズを指定することも可能ですので、詳細は前述の「利用方法」を参考にしてください)
[gallery=images/album scale=20%]

quickgallery-edit

このような感じにアルバムが表示され、クリックするとポップアップして拡大してきます。

quickgallery-normalquickgallery-normal-popup

 

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を改良してみてください)

quickgallery-art

 

なお、記事の背景のグラデーションを調整するには、ウェブサービスを利用するのが便利です。

FYI: http://kenyo--c.com/css/954/

FlatPess 記事

Copyright c  flatpress.info 2015. All Rights Reserved.