こんにちは、TOSHIです。
とある制作案件でWordPressの投稿をCSVで一括アップロードしたいという要望がありました。その際に色々とカスタマイズがしたかった都合で、「Really Simple CSV Importer」というプラグインを使っていたのですが、画像が横向きにアップロードされる事象に出くわしました。
一般的なプラグインを導入しているサイトで、且つCSVアップロードをしたことがなければ、あまり出会わない問題かもしれません。元々縦向きの画像が意図せず横向きにアップロードされる理由は、画像が持つexif情報、とくにiPhoneなどによって付与されるOrientationが影響しています。
通常のメディアへのアップロードに関しては、「EWWW Image Optimizer」や「Imsanity」などの画像を最適化するプラグインを使っている場合、アップロード時に自動で画像のexif情報が削除され、回転した画像は修正されていることがほとんどです。
今回は通常のアップロードではなく、CSVでアップロードされた画像に対して、意図しない回転を修正する方法を紹介します。
「iOS images fixer」を使えば一撃で解決
画像が回転してしまう問題を解決する方法を調べた結果、「iOS images fixer」というプラグインを見つけました。
このプラグインはアップロード時だけではなく、アップロード後の画像に対しても回転の修正が可能です。
アップロード済の画像を修正する場合は、管理画面の中の メディア > Fix iOS images のページでFix All iOS-brokenボタンを押せばokです。
他のプラグインもいくつか試しましたが、メディアのアップロード時にしか回転が修正されないものばかりなので、アップロード後の画像の修正に関しては、このプラグインを使うのが確実だと思います。
iOS images fixer
https://ja.wordpress.org/plugins/ios-images-fixer/
プラグインを使わずに画像を修正する方法
「Really Simple CSV Importer」を使ったCSVアップロードでは、どのプラグインを使ってもアップロード時に修正はされませんでした。
これは、内部的にメディアのアップロード関数media_handle_upload()を使っておらず、各プラグインが画像アップロード時に挟み込んでいるフック処理が効いていない為です。
大抵の場合は、プラグインを使えば済むことですが、敢えてプラグインを使わない方法にチャレンジしてみました。
add_action('really_simple_csv_importer_post_saved', 'my_really_simple_csv_importer_post_saved', 10);
function my_really_simple_csv_importer_post_saved($post_object) {
if( !($post_object instanceof WP_Post) ) return;
$pst_id = $post_object->ID;
$att_id = get_post_thumbnail_id($pst_id);
if( !$att_id ) return;
$fpath = get_attached_file($att_id);
$ext = pathinfo($fpath, PATHINFO_EXTENSION);
if( !(preg_match('/jpg|jpeg/', $ext)) ) return;
$image = wp_get_image_editor($fpath);
if( is_wp_error($image) || !$image ) return;
$exif = @exif_read_data($fpath);
$orientation = ( isset($exif['Orientation']) ) ? $exif['Orientation'] : 0;
if( !$orientation ) return;
switch ($orientation) {
case 8:
$image->rotate(90);
break;
case 3:
$image->rotate(180);
break;
case 6:
$image->rotate(-90);
break;
}
$image->save($fpath);
$metadata = wp_generate_attachment_metadata($att_id, $fpath);
if( is_wp_error($metadata) || !$metadata ) return;
wp_update_attachment_metadata($att_id, $metadata);
return;
}
やや強引なやり方かもしれませんが、これで画像の回転が修正されます。
最後に「Regenerate Thumbnails」のプラグインを使って回転前に生成された各サイズの画像を削除してしまえば、uploadsフォルダを無駄に圧迫しなくて済みます。
まとめ
- iPhoneで撮影された画像は回転してアップロードされることがある。
- アップデートのタイミングで回転を直すプラグインはあるが、「Really Simple CSV Importer」によるCSVアップロードには対応出来ていない。
- アップロード済の画像を取得して、適切に回転をかけ直すことで修正出来る。
もう少し工夫すれば、各画像サイズの削除などもプラグインを使わずに処理可能になると思うので、時間がある時にもう少し調整してみようと思います。
参考サイト
[WordPress] スマホで縦向き撮影した写真が勝手に横向く（回転する）問題
https://sachips.byeto.jp/wordpress/photo_upload_rotate.html
EWWW Image Optimizerで画像の回転が直らない。
https://raisez.com/blog/ios-images-fixer
