Wordpressの標準ギャラリーをカッコ良くする「Photospace」プラグイン

Wordpressの標準ギャラリーを拡張できる良いプラグインが無いかな～と探していたところ、
Photospaceというプラグインに辿り着きました。開発元のサイトを見ると、GallerifficというjQueryPluginを元に作られているようです。

見た目がカッコ良いのはもちろんですが、
キャプションや説明文をギャラリー上で簡単に表示できる点がナイスです。

キャプション表示については、ソースを編集して表示するという方法もありますが、
やはりプラグインで対応出来たほうが楽ですね。

他にもスライドショーやサムネイル画像のコントロールを細かく設定できる上、
レスポンシブに画像サイズを自動調整して表示することも可能となってます。

以下、Photospaceの紹介と導入した際の手順を書いてみました。

導入準備(Wordpressのメディア設定)

AjaxThumbnailRebuildなどの自動サムネイル生成プラグインを利用する場合は影響ありませんが、
Photospaceプラグイン単体で利用する場合は、管理メニューの「設定」＞「メディア設定」を開き、
サムネイル画像が有効になっているか確認してください。

サムネイルを無効（「サムネイルのサイズ」の幅:0 高さ:0）としている場合は、
Photospaceのサムネイル系機能は正しく動作しません。

他のギャラリー系プラグインを停止する

Photospace以外のギャラリー系プラグインを利用している場合は、一旦停止した方が良さそうです。

実際、他のプラグインの影響で画像が表示されない事があり、ハマる原因となりました。

プラグインのインストール

下記のプラグインをインストールしてください。
AjaxThumbnailRebuildはサムネイルの自動生成に使用します。

• Photospace
• AjaxThumbnailRebuild

とりあえずギャラリーを表示してみる

インストールが終わったら、さっそくギャラリーを表示してみます。

ページ編集画面にて、画像idを指定してgalleryのショートコードを入れてください。

ショートコードのリファレンス

ページを表示してみると・・・

でました！デフォルト設定の場合は、このように表示されます。
次は、画像サイズ変更＆キャプジョンの情報を出すように設定を変えてみます。

サムネイル画像サイズを変更する

管理画面サイドバーの「Photospace Gallery Options」を開いてください。

デフォルトの50x50だと少しサムネイルが小さい気がするので、
「Thumbnail Width」「Thumbnail Height」をそれぞれ「50」から「75」に変更します。

サムネイル画像を大きくしたので、メイン画像の横幅を小さくしないとレイアウトが崩れてしまいます。

なので「Main image width」を「500」に変更します。

また、ページボタンを表示する場合は、「Page button size」もサムネイルと同じサイズに変更した方がいいでしょう。

次に、サムネイル画像のサイズを変更したのでサムネイル画像の再生成を行う必要があります。
先ほどインストールしたAjaxThumbnailRebuildプラグインを使用して、自動的にサムネイルを生成してもらいましょう。

！「Crop thumnails」オプションを無効にすると、サムネイルのトリミングは適用されません！

サムネイル画像の再生成

「ツール」＞「Rebuild Thumbnails」を開くと、Photospace用のサムネイルが表示されているかと思います。

photospace_thumbnailsとphotospace_fullにチェックを入れ、

Rebuild All Thumbnailsを実行するとサムネイルの再生成が始まるので、完了するまで待ちます。

画像と一緒にキャプション情報を表示する

デフォルト設定ではキャプション情報は非表示になっています。
表示するには、「Show Title / Caption / Desc under image」の項目にチェックを入れるだけでOKです。

ギャラリーの変更結果

サムネイルのサイズが変わり、画像の下にはキャプションが表示されるようになりました。

今回使用したのは画像サイズとキャプション周りの設定が主ですが、
他にも細かいOptionがいろいろとあるので試してみてください。

おまけ：サムネイル画像を水平かつレスポンシブなGallaryにする

Photospaceのオプションでは、サムネイル画像の位置まで指定できないようですが、

開発元サイトにそれ用のCSSが用意されているのでこちらを使わせてもらいます。

thrive - Horizontal responsive layout

「外観」＞「テーマ編集」を開き、style.cssに上記サイトのCSSコードを追加します。

次に、ページ編集画面にて、galleryのショートコードに「horizontal_thumb="true"」を追加します。

例） [gallery horizontal_thumb="true" ids="1,2,3,4,5・・・"]

これでサムネイルが水平にレイアウトされるようになりました。

また、ウィンドウを小さくするとメイン画像が自動的に縮小されるかと思います。

!画像のサイズが自動で調整されるのはメイン画像のみです。サムネイル画像は可変にはなりません。!

※レスポンシブだけ対応したい場合は、Photospace Responsiveというプラグインを使うと良さげです。

おまけ２：CSSを変更してキャプションをメイン画像の右側に表示する

Alternate layout using custom previous/next page controls

私の場合は上記のデモサイトのようなレイアウトにしたかったので、
CSSをいじってメイン画像の右側にキャプション情報が表示されるようにしてみました。

/* style.cssに追加 */

.photospace .caption {
text-align: left;
}
.photospace .caption-container {
float: right;
width: 350px;
}
.photospace .slideshow,
.photospace .slideshow span,
.photospace .slideshow img {
float: left;
width: 550px;
}
.photospace .slideshow-container {
margin-top: 25px;
}

これで画像の右側にキャプション情報が出るようになりました。
（キャプションを横に置いた為に、画像の自動縮小は効かなくなってしまいましたが。）