Last Updated:

The suffix "-rotated" in a picture, or what WP does with image orientations

 

Since WordPress 5.3, when uploading images, the VP checks the image orientation metadata. If the metadata indicates that the orientation of the image is different from the standard (the standard orientation index should be equal to one - 1 or simply should not be specified), then the VP changes the orientation of the original so that the basic orientation is obtained in the end.

To change the orientation, the VP, before creating intermediate dimensions, rotates the image based on the orientation meta-data and saves the result with the suffix .-rotated

The new "-rotated" picture is now considered the original picture and the path to it is recorded in the metafield. And now the function that usually returns the original path get_attached_file() or the original URL wp_get_attachment_url() and other functions that should return the original image will return the new path/URL._wp_attached_file-rotated

The original image file is not deleted and is located in the uploads folder. A label that there is an original is added to the metadata of the VP attachment, to the array key: . The path or URL to the source can be obtained through the functions:original_image

  • wp_get_original_image_path()
  • wp_get_original_image_url()
Let's look at an example:

Suppose we have uploaded a picture that has . Then wp will create another file, put it next to the original in the uploads folder and make it the main file, and add the name of the original file to the metadata.Landscape_2.jpg[Orientation] => 2Landscape_2-rotated.jpg

'original_image' => 'Landscape_2.jpg',
WP image orientations

Data from the table :wp_postmeta

+---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+ | post_id | meta_key | meta_value | +---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+ | 1863 | _wp_attached_file | 2022/06/Landscape_2-rotated.jpg | | 1863 | _wp_attachment_metadata | a:7:{s:5:"width";i:1800;s:6:"height";i:1200;s:4:"file";s:31:"2022/06/Landscape_2-rotated.jpg";s:8:"filesize";i:400881;s:5:"sizes";a:6:{s:6:"medium";a: | | | | 5:{s:4:"file";s:23:"Landscape_2-300x200.jpg";s:5:"width";i:300;s:6:"height";i:200;s:9:"mime-type";s:10: "image/jpeg";s:8:"filesize";i:14295;} s:5:"large | | | | "; a:5:{s:4:"file";s:24:"Landscape_2-1024x683.jpg";s:5:"width";i:1024;s:6:"height";i:683;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:130033;} s:9 | | | | :"thumbnail";a:5:{s:4:"file";s:23:"Landscape_2-150x150.jpg";s:5:"width";i:150;s:6:"height";i:150;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:60 | | | | 50;} s:12:"medium_large";a:5:{s:4:"file";s:23:"Landscape_2-768x512.jpg";s:5:"width";i:768;s:6:"height";i:512;s:9:"mime-type";s:10:"image/jpeg";s:8:"fil | | | | esize";i:75295;} s:9:"1536x1536";a:5:{s:4:"file";s:25:"Landscape_2-1536x1024.jpg";s:5:"width";i:1536;s:6:"height";i:1024;s:9:"mime-type";s:10:"image/jp | | | | eg";s:8:"filesize";i:283925;} s:14:"post-thumbnail";a:5:{s:4:"file";s:25:"Landscape_2-1568x1045.jpg";s:5:"width";i:1568;s:6:"height";i:1045;s:9:"mime-t | | | | ype";s:10:"image/jpeg";s:8:"filesize";i:295929;}} s:10:"image_meta";a:12:{s:8:"aperture";s:1:"0";s:6:"credit";s:0:"";s:6:"camera";s:0:"";s:7:"caption"; | | | | s:0:"";s:17:"created_timestamp";s:1:"0";s:9:"copyright";s:0:"";s:12:"focal_length";s:1:"0";s:3:"iso";s:1:"0";s:13:"shutter_speed";s:1:"0";s:5:"title"; | | | | s:0:"";s:11:"orientation";i:1;s:8:"keywords";a:0:{}}s:14:"original_image";s:15:"Landscape_2.jpg";} | | 1863 | _edit_lock | 1656265849:1 | +---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+

Array::_wp_attachment_metadata

[
	'width' => 1800, 'height' => 1200, 'file' => '2022/06/Landscape_2-rotated.jpg', 'filesize' => 400881, 'sizes' => [ 'medium' = > [ 'file' => 'Landscape_2-300x200.jpg', 'width' => 300, 'height' => 200, 'mime-type' => 'image/jpeg', 'filesize' => 14295 , ], 'large' => [ 'file' => 'Landscape_2-1024x683.jpg', 'width' => 1024, 'height' => 683, 'mime-type' => 'image/ jpeg', 'filesize' => 130033, ], 'thumbnail' => [ 'file' => 'Landscape_2-150x150.jpg', 'width' => 150, 'height' =>  150, 'mime-type' => 'image/jpeg', 'filesize' => 6050, ], 'medium_large' => [ 'file' => 'Landscape_2-768x512.jpg' , 'width' => 768, 'height' => 512, 'mime-type' => 'image/jpeg', 'filesize' => 75295, ], '1536x1536'  => [ 'file' => 'Landscape_2-1536x1024.jpg', 'width' => 1536, 'height' => 1024, 'mime-type' => 'image/jpeg' , 'filesize' => 283925, ], 'post-thumbnail' => [ 'file' <b1184&gt;=</b1184>> 'Landscape_2-1568x1045.jpg', 'width' => 1568, 'height' => 1045, 'mime-type' => 'image/jpeg', 'filesize' => 295929 , ], ], 'image_meta' => [ 'aperture' => '0', 'credit' => '', 'camera' => '', ' caption' => '', 'created_timestamp' => '0', 'copyright' => '', 'focal_length' => '0', 'iso' => '0' , 'shutter_speed' => '0', 'title' => '', 'orientation' => 1, 'keywords' => [ ], ], 'original_image' => 'Landscape_2.jpg',
]

WP does not always correctly change the orientation of the picture so that everything works correctly there is a mini plugin https://github.com/gagan0123/fix-image-rotation This plugin is probably I would recommend installing on all sites, especially if the site has a lot of pictures that are downloaded from phones.

General information about the orientation of pictures.

When viewing an image, the browser or any other viewer reads the image's meta-data about orientation and automatically cooks the image as specified in the data so that we always see the picture correctly, even if the original file is for example turned over.

For example. We took a photo from the phone, the phone saved the picture in an inverted form (apparently so as not to do unnecessary operations), and added a label about orientation to the metadata, for example. Now, when viewing a picture, say, in a browser, the browser will read this information and before displaying it will rotate the picture as it should. As a result, we see a normal picture, not suspecting anything about the fact that in reality the picture is recorded on a disk, for example, in an inverted form.Orientation=3

Why does WP need this?

Basic orientation is important when creating image thumbnails. So that you do not need to check the orientation of a similar file, but you can just work with the source in the standard form.

For example, if you create a thumbnail from a source that has a non-standard orientation, for example, flipped, then the thumbnail will turn upside down. In this case, in order for the thumbnail to turn out to be normal, you need to specify the EXIF orientation data to it or correct the original in advance and only then create a thumbnail.

In order not to process separately the non-standard orientation, WP brings the original picture to the standard form, so that you can then work with it as usual.

How do I disable orientation conversion in WP?

To do this, you can use the wp_image_maybe_exif_rotate filter - paste it into functions.php themes:

add_action( 'wp_image_maybe_exif_rotate', '__return_false' );

I would not recommend disabling this feature altogether. Because it's a useful fitsch. However, in order not to create a duplicate in the form of an abandoned original picture, I recommend installing a mini-plugin: https://wordpress.org/plugins/fix-image-rotation/ It fixes some bugs in the conversion of WP itself, and also replaces the original picture with a new one (with a basic orientation). Therefore, a new file with the suffix is not created, but simply the original is modified.-rotated

Here's how it works:

When creating a picture, the following chain of functions is triggered:

  • media_handle_upload()

    • wp_generate_attachment_metadata()

      • wp_create_image_subsizes()

        • wp_get_image_editor()

           orientation is checked and corrected if necessary $editor = wp_get_image_editor( $file ); $rotated = $editor->maybe_exif_rotate(); if ( true = == $rotated ) { $saved = $editor->save(  $editor->generate_filename( 'rotated' ) ); $image_meta = _wp_image_meta_replace_original( $saved, $file, $image_meta, $attachment_id ); } wp_update_attachment_metadata( $attachment_id , $image_meta );  intermediate _wp_make_subsizes sizes are created();

--