BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. WordPress・その他CMS
  5. WordPressで画像アップロード時に自動的に回転・リサイズさせる方法
by ウラカワ ウラカワ

WordPressで画像アップロード時に自動的に回転・リサイズさせる方法

WordPressで画像アップロード時に自動的に回転・リサイズさせる方法

はじめまして、引越し先が決まって荷物整理や書類準備に追われているデザイナーのウラカワです。

WordPressで記事を書いていると、スマートフォンで撮影した写真が勝手に回転してしまうことがないでしょうか?
一旦画像編集ソフトやアプリで保存してしまえば問題ないのですが、そこが自動で出来ればお客さんにも喜んで頂けますよね。

ということで、今回はプラグインに頼らずどうにか実装出来ないかグーグル先生に相談しながらやってみました。

そもそも何で回転しちゃうんですか…?

iOSや特定の端末では縦位置で撮った写真であっても強制的に横位置とし、ExifのOrientation属性(90度などの回転情報)で写真の向きを調整して保存するようです。

それが原因でExif読み取りに対応してないビューワーやブラウザでは勝手に回転しているように見えるため、この環境ではちゃんと縦で見れてるのに他の環境だとダメだ…という状況になっちゃうわけですね…悩ましい。

問題のOrientation属性ですが、1~8の値となっており、ぱっと見ではどういうことなのか分かりません。
また、回転だけではなく反転も含まれていたりします…。(反転は定義として存在しているだけで実際はほとんど無いようですが)
それぞれどういう定義になっているのかが以下の記事で分かりやすく解説されていますのでこちらをご覧ください。

で、具体的にどうすれば良いの?

今回は画像の回転に対応したいのでOrientation属性が3・6・8の写真をどうにかします。Exifの取得にはexif_read_dataを使用します。

アップロード時に処理を施したいので、wp_handle_uploadにフックしますが、
実際に画像を編集するにはWP_Image_Editorクラスを使用します。まずはサンプルを見てみますか。

ふむふむ…めちゃくちゃ分かりやすいですね…。
そしてさらに詳しい解説をしている方がいました。ありがとうございます!

材料は揃った!さっそくやってみます。

Orientationの値によって画像を回転

あっさり出来てしまった…。
ついでに画像のサイズが大きい場合にリサイズしてくれたら素敵。
ということでリサイズもやってみる。

一定以上の大きさの場合リサイズ

画像サイズを取得するには…?

ではこれを使って…

こちらもあっさりいけました。
WordPressがいろいろ用意してくれてるおかげですが。

最終的に…

これらをまとめて最終的に出来上がったのが以下です。
functions.php内に記述します。

慣れない解説をある程度流れに沿ってやってみました。
こんな感じで良いのでしょうか…?校舎裏に呼び出されないか心配です。
使う場合は自己責任でお願いします★

ページの先頭に戻る