2013-03-19

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

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

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

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

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

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



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


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

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





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

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が用意されているのでこちらを使わせてもらいます。

「外観」＞「テーマ編集」を開き、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;
}

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



投稿者 時刻:
ラベル:

18 件のコメント:

  1. こんにちは。

    ワードプレスで作成中のサイト用に、なにか良いギャラリーを探していてこちらの記事に出会いました。とてもわかりやすい記事で、「これにしよう！」とすぐに思いました！
    参考にさせていただいて、早速使ってみようと思うのですが。。。いくつか質問させてください。

    プラグインのインストールは済んだのですが、「ページ編集画面にて、画像idを指定してgalleryのショートコードを入れてください。」←画像idというのは、メディアの中にあるアップロードした画像のパーマリンクのところに見られる「attachment_id=279」のことでしょうか？

    また、自分のMacのiphotoにはいっている画像をアップロードする感じになるのですが、できればフルサイズの画像サイズはみな同じになるようにした方がよいのでしょうか？（自動的にクロップされたくない場合）

    アドバイス頂けたら幸いです。よろしくお願いします。by AR

    返信削除
    返信

    1. ARさん
      コメント頂き有難うございます。

      >画像idというのは、メディアの中にあるアップロードした画像のパーマリンクのところに見られる「attachment_id=279」のことでしょうか？

      画像idと書きましたが、ご指摘の通り正しくはattachment_idのことです。

      >できればフルサイズの画像サイズはみな同じになるようにした方がよいのでしょうか？

      ギャラリーに使用する画像サイズについては、統一する必要はありません。
      ただし、幅の取り方によっては、レイアウト崩れが発生する場合もありますので、
      その場合は調整が必要です。
      レイアウト崩れが気になる場合は、水平サムネイルを使用すると良いです。

      削除

  2. ギャラリーをクリックすると新しいページが読み込まれ(アドレスは変わっていない)画像がいつまでも読み込んでいる状態になります。アドバイス頂けたら幸いです。

    返信削除

  3. 質問よろしいですか？
    ギャラリーの画像をクリックすると新しいウィンドウが立ち上がり画像がいつまでも読み込んでいる状態に成ります。link="none"を入れてもだめでした
    アドバイスお願いします。

    返信削除

  4. はじめまして。

    ＷＰのギャラリーを検索していたら、こちらのページで自分が現在作成しているホームページのレイアウトに合ったＰｈｏｔｏｓｐａｃｅが見つかりました。日本語で色々説明していただけるので、参考にさせていただきました。しかしながら、当方は初心者で分からないことばかりですので、よろしければこちらの設定の仕方を教えていただけませんか。

    使用したいレイアウトが、Horizontal thumbnails on the bottomです。「とりあえずギャラリーを表示してみる」内の設定詳細が分からないので、設定詳細を教えていただければ助かります。

    http://thriveweb.com.au/photospace-plugin-examples/horizontal-thumbnails-bottom/

    よろしくお願いいたします。

    返信削除
    返信

    1. kmさんコメント読ませていただきました。
      「Horizontal thumbnails on the bottom」のようなレイアウトにする設定を知りたいとのことですが、
      レイアウトの変更は、プラグインの設定ではなくWordpressのスタイルシート（style.css）を編集することにより実現しています。
      要は、プラグイン標準のレイアウトを自分の好きなように変更しているだけです。

      このプラグインのレイアウトを変更するには、Wordpressのスタイルシートをある程度知ってる必要がありますので、申し訳ないですがスタイルの説明は、他サイトの方が詳しく載ってますのでそちらをご参考にしてみてください。

      削除

  5. こんにちは！
    良いギャラリーが見つかりました、参考にさせて頂きます。
    1つ質問させてください、Captionにリンクを付けることは可能なのでしょうか？

    返信削除
    返信

    1. 当記事を参考にしていただきありがとうございます。
      Captionの説明文の中でしたら、HTMLタグが使えますのでリンクを付けることはできます。

      削除

  6. ギャラリー系プラグインを探していてこちらにたどり着きました。ありがとうございます。設置できました。
    現在は最初から水平にレイアウトされるようになっているみたいですね。

    そこで質問なのですが、サムネイルをメイン画像の下に表示されるようにしたいと考えています。

    http://thriveweb.com.au/photospace-plugin-examples/horizontal-thumbnails-bottom/

    上記を参考にしてみたのですが、うまく反映されていないようで・・・
    サムネイルを下に表示させる方法を教えていただけないでしょうか。

    返信削除
    返信

    1. >http://thriveweb.com.au/photospace-plugin-examples/horizontal-thumbnails-bottom/
      上記のページは、私も参考にしようとしましたが、信憑性がなかったので無視しました。
      実際のデモ画面でbottomレイアウトになっていませんし、CSSの記述も意図がよく分からなかったので。

      残念ながらプラグインの仕様としてはサムネイルのbottom表示はないものかと思います。
      強引にやるとすれば、プラグインのソース「photospace-responsive.php」を開き、
      419行目辺りの$output_bufferに設定してるHtmlテキストをいじればできるかもしれません。
      具体的にはdiv class="thumbs_wrap2"の固まりをdiv class="gal_content"の下に移してしまえばレイアウトも変わるかと思います。（すみませんが、検証はしていません。）

      以上です。うまくいく事をお祈りしています。

      削除

    2. 横から失礼ながらお邪魔いたします。
      自分も、サムネイルを下にしなければならなくて、こちらを拝見したのですが、「photospace-responsive.php」が見当たりません。
      「プラグイン編集」とは別のところにあるのでしょうか？
      初歩的な質問で申し訳ありません。

      削除

    3. お返事が遅れてすみません。
      管理画面からではなく、ファイルシステム上のファイルを直接編集する形になります。
      Wordpressのプラグインディレクトリの中のphotospaceの中に該当ファイルがあるかと思います。

      削除

  7. 質問させてください。
    http://isowanted.blogspot.jp/2013/03/wordpressphotospace.html
    手順通りやりましたが「ページと表示してみるとtestページの様な表記になりません。

    まずは3枚でギャラリーを作成してみましたが、右はじに写真が3つならんで、メイン画像が一番下にどーんと来る感じです。
    テストの様に、右はじに小さな写真を並べて表示して、その写真達の横に大きく表示するにはどうしたらいいのでしょうか？

    cssは多少わかります。教えて下さいお願いします。

    返信削除
    返信

    1. このプラグインは、デフォルト設定で、左端に画像サムネイル、その右に選択画像といったレイアウトで表示されるようになってます。
      なので、CSSや設定を変更していない状態で正しく表示されないのであれば、環境に原因があるかもしれません。

      可能性としてはプラグインかWordpressのテーマがレイアウトを崩しているかもしれません。

      とりあえず画像系プラグイン、画面の見栄えを変更するようなプラグインを一時停止して試してみてはどうでしょうか。
      Wordpressテーマについても、デフォルトテーマ以外の物を使用されているのであれば、一度デフォルトに戻して再表示してみてください。

      削除

    2. ありがとうございます！！！
      Wordpressのテーマはテンプレートではなく、作成したものを使用しています。
      となるとそれが影響してって可能性が高いですね、、、
      助かりました！！ありがとうございます！！

      削除

  8. こんにちは！とても素敵なデザインで参考にさせていただきました。
    1つ質問をお願いします。

    「サムネイル画像を水平かつレスポンシブなGallaryにする」を参考にさせていただき同じようにできました。
    しかしサムネイルをクリックすると、選んだ画像がいったん下に下がってから表示されます。

    サムネイルを選ぶたびに画像が滑らかに表示されるようにするためにはどうしたらいいのでしょうか？
    ご指導よろしくお願いします。

    返信削除
    返信

    1. 当記事を参考にしていただきありがとうございます。

      以前に私も同じ現象に遭遇しました。
      ただ、申し訳ないですがこの記事を書いたのが1年以上前なので、対処方法はうろ覚えなのですが、、、
      「下に下がる」ということは、横幅が大きすぎて一時的に改行されているからだっと思います。
      確か画像表示サイズの設定で、横幅を縮めたら直ったような気が、、、自信ないですが。
      何をやっても直らなければ、プラグインのインストールからやり直すのもひとつの手ですよ。

      削除

  9. こんにちわ。
    ID指定しなくても動きますよ。
    （例）[gallery order="DESC" orderby="ID" horizontal_thumb="true"]

    結局、他にしましたが。。

    返信削除

登録: コメントの投稿 (Atom)