【写真集ページの最速作成術】大量画像の一括処理&ポップアップの挿入設定まで

写真集ページ フォトショップ

コーポレートサイトやイベントサイトでは写真集のような大量画像のページを制作することもありますよね。

 

画像1枚ごとに作業をバラバラに考えると…

画像の処理→アップロード&レイアウト→ポップアップ設定などの工程があってものすごく時間がかかりそうですが、

それぞれの工程ごとにサクッとまとめて終わらせていく方法があったのでまとめてみました。

 

実際最近Wordpressページに写真を約200枚一気に掲載する作業がありましたが、この記事で紹介している方法(&プラグイン活用)で10分くらいで終わりましたのでその手順をご紹介。

 

この記事のポイントは下記2点です。

  1. 数十枚~数百枚の画像をまとめて処理する方法
  2. 記事に挿入した画像に一括でタグやクラスを追加したり、ポップアップの設定をする方法

 

応用していけば写真集ページ以外でも画像処理関係・ページレイアウトの一括変更などがスピーディーにできるようになる技を使っていきます。

 

実際の作業の流れ

今回やるべきことと手順

1.無駄に大きな画像をまとめて自動リサイズ
2.メディアライブラリにアップロードしつつ同時に<a>リンクも設定
3.置換を活用してレイアウト修正&jqueryのポップアップをまとめて設定

 

1.画像が無駄に高画質で重いので、まとめてリサイズ

今回はたくさんの写真のサイズをまとめて小さくしたいので、まずは画像のリサイズです。

 

Photoshopにはバッチ処理機能があります。

これは設定した処理を複数ファイルに対して一気に行ってくれるということです。

今回は複数の画像ファイルを一括でリサイズしたい!

ということで改めてググったところやり方は2通りあるようでした。(他にもあるかも?あったら教えてください!^^)

 

1.「アクション」機能を使って一括処理する

アクション機能というのは、繰り返しやりたい処理を記録するというものです。

Photoshop内で一度操作を行なえばソフトが覚えてくれるので、それを自分の代わりに繰り返しやってもらうというイメージです。

アクションとは、Photoshop での一連の作業を記憶しておいて、必要な時に再利用できるようにする機能です。

Adobe公式:「アクションの作成および再生方法 (Photoshop CC)」より

アクション機能はExcelのマクロみたいな感じでいろいろ活用できるので使いこなせるようになりたい…

 

特にアクションを使ってまとめてリサイズしていく流れについてはこちらのサイトさんがとてもわかりやすかったです。感謝。

Photoshopのバッチでファイルを一括で処理する方法【初心者向け】

 

今回この方法を使うとすると

1.まずアクション機能でリサイズして保存という処理を記録

2.それをドロップレット機能でバッチ処理

  Adobe公式:ドロップレットの作成方法 (Photoshop CC)

という流れになります。

 

各画像に対して複数処理(リサイズ&明るさも調整等)をならばこれでやろうと思いましたが、今回はリサイズのみの処理なのでよりシンプルな次の方法を選びました。

2.「イメージプロセッサー」機能を使って一括処理する

Photoshopにはイメージプロセッサーという機能があります。

 

下が公式ヘルプページのリンク。ちなみに英語ですが動画の説明もあります。

Adobe公式:ビデオ | イメージプロセッサーを使った、複数ファイルのバッチ処理

 

同じバッチ処理でも、1と違うのは最初にアクションを作成せずにファイルを処理できることです。

 

ちなみに実際の手順はこちらの記事を参考にさせていただきました。感謝。

複数画像の一括リサイズならPhotoshopのイメージプロセッサが超便利

 

200枚くらいでしたが、2~3分くらいで終わりました。しかもPhotoshopが自動で処理してくれている間は自由なので違う作業(次の工程の準備)もできちゃう。

もともと紙のパンフレット用だった素材(縦横4000×3000くらいの高画質)を横1000で統一する作業が数クリックで完了。

 

(参考)ちなみにAdobe公式の説明によると、こちらのイメージプロセッサー機能は他にこんなこと(一部抜粋)もできます。

  • ファイルのセットを JPEG、PSD または TIFF の各形式に変換するか、同時に 3 つすべての形式に変換します。
  • 著作権のメタデータを変換後の画像内に挿入します。

まとめて拡張子を変更したいときや著作権関係は特に使えそう!

 

2.メディアライブラリにアップロードしつつ同時に<a>リンクも設定

今回はWordpressページに画像をアップロードしていきます。

ただし、今回はクリックしたときにポップアップを出したかったので<img>に<a>リンクを付けたい。

 

普通に編集画面から「メディアを追加」で何十枚とか一気に入れると上のように<img>タグが並んでしまいますが、下のようにそれぞれ<a>で括りたいわけです。

<img><img><img><img><img>…

<a><img></a><a><img></a><a><img></a><a><img></a><a><img></a>…

 

これを一発で、「メディアを追加」と同時に行なってしまうことができます。

それは画像をアップロードした時に「リンク先」を「メディアファイル」にするという方法です。

 

これはポップアップのための<a>のリンク先が<img>画像のurlだからできることです。

「リンク先」を「メディアファイル」にする手順

おなじみメディアライブラリのアップロード画面の右下の方にリンク先という項目があります。

これがデフォルトでなしになっているのをメディアファイルに変更します。

これで画像のurlを<a>のリンク先にできました。

 

今まで写真にしてもpdfにしても、画像をアップ→リンク追加。という風に別々にやっていました。

より早くやるためにはどんな技があるのか、細かいことでも常に調べる姿勢が大事ですね…汗

というわけで、記事に画像を投入すると同時にポップアップ用の<a>リンクはつけ終わりました。

 

3.置換機能を活用してレイアウト修正&jqueryのポップアップをまとめて設定

上の工程までで<a>リンクが挿入されている状態になります。

ただこれだとまだ課題が2つ残ります。

1.<a><img></a><a><img></a>……という形になってしまうので、それぞれブロック要素<div>で括りたい。

2.jquery「lightbox」のポップアップを有効にするために、それぞれの<a>タグ内にrel=”lightbox”の記述を追加。

 

つまり

<a ><img></a>

<a><img></a>

<a><img></a>

……

となっているのを

<div><a rel=”lightbox”><img></a></div>

<div><a rel=”lightbox”><img></a></div>

<div><a rel=”lightbox”><img></a></div>

……

にしたい。

 

さすがに200か所くらい手作業は無理なので、ここでは「置換」を活用してサクッと終わらせることにしました。

とはいえWordpressにはデフォルトで「置換」機能はないので他のテキストエディタを借用。

手順は以下

  1. wpのテキストエディタ画面内から該当箇所をまるっと他のテキストエディタ(サクラエディタとかBrackets)にコピペ
  2. 置換で下記3点を実行
    • <a → <div class=”item”><a
    • jpg”><img → jpg” rel=”lightbox”><img
    • </a> → </a></div>
  3. wpのテキストエディタにコピペで返してあげる

(補足)

<div class=”item”><a → <div>にレイアウト用のclassをつけたかったので、<div class=”item”>という形で置き換えました。

jpg” rel=”lightbox”><img → 実際にはlightboxのグループ分け機能を使うために何回かに分けて置換をしました。rel=”lightbox[group1]” rel=”lightbox[group2]”という感じで。

 

これは一例ですが、「置換」は大量作業のときに最初に検討したい手の一つです。

 

頻繁に置換を使うならWordpressの置換プラグインはありですが、通常はこの方法で十分かと思います。wpプラグインはメンテナンス・脆弱性から考えて少なくしたい。

ちなみにポップアップをWordPressプラグインでやるなら、インストールするだけでほぼ作業完了する便利なのが多いです。おすすめは「Easy FancyBox」。名前もよい~

ただ今回はテーマ側にすでにjquery「lightbox」が設置された状態だったのでこれを活用しました。

 

大量画像ページを作成する際に便利なjQueryプラグイン

ちなみにたくさんの画像があるページを作成する場合、以下の2点が課題になったりしますので、

現場で活用しているjQueryプラグイン・JavaScriptプラグインをご紹介。

画像のレイアウトをサクッと終わらせたいなら「Masonry」

Masonry

Masonry.pngのページイメージ

たぶん大量画像ページの場合、縦一列に配置することはないので、横2列~4列に置く形になると思います。

このプラグインなら例えばcolumnWidth: 300とかパラメーターで横幅を指定できるのでとてもラクです。

多少縦横比が違う写真が混ざっていても、横幅指定をすることでグリッドレイアウトみたいにそこそこ綺麗に並んでくれちゃいます。(上のページ例だと煽枠で括っているやつみたく)

 

今回画像200枚を8カテゴリ(見出し)に分けて掲載する作業でしたが、これに頼ったおかげでサクッと終わりました。

画像の読み込み/表示を制御したいなら「imagesloaded」

imagesloaded

imagesLoadedページイメージ

大量画像ページでは画像に対していろいろな処理を行なうというパターンは多いですよね。

ですが処理によっては最初に読み込んだ際にboxが重なってしまう感じになりうまく表示されないことがあります。

「imagesloaded」では画像のローディング完了後に画像の処理をおこなうよう指示することでこの問題を回避できます。

 

 

以上、写真集のような画像がたくさんあるページの効率的な作業方法でした。

コメント