Image width and height attributes swapped when portrait format

Could you please add direct and simple steps to reproduce on a freshly-installed Drupal site? There is quite a lot of information here and if I understand correctly, graphql is not really involved.

@cilefen
graphql is not involved, but that is where I first became aware of the issue.

Steps to reproduce

On a fresh drupal install v10.2.3

1. create a content type with an image field
2. ensure in "Manage display" for the contentType Image is not hidden and set to "Image" (not "Url to Image")
3. create 2 examples of this content, one with a jpeg image in landscape format and another with an image in portrait format.
   • Portrait is an image where its height is greater then its width
   • Landscape is an image where its width is greater then its height
4. go to "view" page for each of these (portrait and landscape) and using the browser developer tools inspect the DOM img tag for the image
5. what you should see:
6. For images with Portrait format, the img tag's width and height attributes are wrong, height is where width should be and visa versa: <img ... width="imageHeight" height="imageWidth" />
   • My screenshot in my original post shows what you will see in the Browser DOM inspector
   • You can only see the error with the browser DOM inspector, but it is a major problem for me in my react graphql implementation
7. The example with a Landscape format image is correct and as expected
8. you can repeat this for other image styles created using the "Scale" effect, be sure to alter "Manage display" accordingly, the result will be the same. Images with a portrait format will have the width and height values in the img tag swapped :-(

My guess is something like Drupal::service('image.factory') is incorrectly always setting width and height as if width is always the greater of the 2 values, which it is for landscape but not portrait formates.

I can confirm that this is coming in Drupal 10.2.4 and PHP 8.3.

My finding is when we manually change the image orientation from landscape to portrait or portrait to landscape then only this issue is occurs.
Say I have an original image of size 500x1000 and manually changes it to 1000x500 using Rotate right or Rotate left feature of Windows system, Drupal is saving it's width as 500 and height as 1000 as original image size, but when I rotate that same image using the MS Paint the image width and height saved correctly in Drupal.

This has nothing to do with Drupal as it's using PHP's default getimagesize() function which itself is giving the wrong info about height and width in above mentioned scenario.

I have use below code snippet to test the issue.

1. The First image ls1.jpeg is a portrait image(500*1000)
2. The second image ls2.jpeg is a manually rotated to 1000*500 which is returning width=500 and height=1000.
3. The Third image ls3.jpeg is rotated using Ms Paint to 1000*500 which is returning width=1000 and height=500.

list($width, $height, $type, $attr) = getimagesize("\images\ls1.jpeg");
echo "<img src=\"\images\ls1.jpeg\" $attr alt=\"getimagesize() example\" />";

list($width, $height, $type, $attr) = getimagesize("\images\ls2.jpeg");
echo "<img src=\"\images\ls2.jpeg\" $attr alt=\"getimagesize() example\" />";

list($width, $height, $type, $attr) = getimagesize("\images\ls3.jpeg");
echo "<img src=\"\images\ls3.jpeg\" $attr alt=\"getimagesize() example\" />";

This has nothing to do with Drupal as it's using PHP's default getimagesize() function which itself is giving the wrong info about height and width in above mentioned scenario.

I have use below code snippet to test the issue.

1. The First image ls1.jpeg is a portrait image(500*1000)
2. The second image ls2.jpeg is a manually rotated to 1000*500 which is returning width=500 and height=1000.
3. The Third image ls3.jpeg is rotated using Ms Paint to 1000*500 which is returning width=1000 and height=500.

list($width, $height, $type, $attr) = getimagesize("\images\ls1.jpeg");
echo "<img src=\"\images\ls1.jpeg\" $attr alt=\"getimagesize() example\" />";

list($width, $height, $type, $attr) = getimagesize("\images\ls2.jpeg");
echo "<img src=\"\images\ls2.jpeg\" $attr alt=\"getimagesize() example\" />";

list($width, $height, $type, $attr) = getimagesize("\images\ls3.jpeg");
echo "<img src=\"\images\ls3.jpeg\" $attr alt=\"getimagesize() example\" />";

This has nothing to do with Drupal as it's using PHP's default getimagesize() function which itself is giving the wrong info about height and width in above mentioned scenario.

I have use below code snippet to test the issue.

1. The First image ls1.jpeg is a portrait image(500*1000)
2. The second image ls2.jpeg is a manually rotated to 1000*500 which is returning width=500 and height=1000.
3. The Third image ls3.jpeg is rotated using Ms Paint to 1000*500 which is returning width=1000 and height=500.

list($width, $height, $type, $attr) = getimagesize("\images\ls1.jpeg");
echo "<img src=\"\images\ls1.jpeg\" $attr alt=\"getimagesize() example\" />";

list($width, $height, $type, $attr) = getimagesize("\images\ls2.jpeg");
echo "<img src=\"\images\ls2.jpeg\" $attr alt=\"getimagesize() example\" />";

list($width, $height, $type, $attr) = getimagesize("\images\ls3.jpeg");
echo "<img src=\"\images\ls3.jpeg\" $attr alt=\"getimagesize() example\" />";

Is this because of phone cameras setting the orientation metadata? If so there is a fix for that: image effects module.

Thank you @priyanka277 for pointing out.

I have dig deeper and found that in core\modules\system\src\Plugin\ImageToolkit\GDToolkit.php file we are using getimagesize() function which is creating this issue.
Please find attached patch which fixes the issue using below reference link.

PHP getimagesize() mixes up width and height

Image Orientation has Strange Behavior

I think this is a duplicate. Please confirm.

@cilefen Thanks for your help, I think this can be closed
It may be related to "#2664632: Add Auto orientation image effect"

What I have discovered, particularly after reading all of the comments

• My guess is it is related to iphone images or something like that
• I'm still in an early dev phase and am using images from various random sources to test and develop
• I now see many are correct, and many show the error I reported
• Often (but not always) in MS-Word and Libra, when inserting images taken from my iphone, they are turned 90 , 180 or 270 degrees, eventhough they appear correct in mac's Preview app
• To fix this in those cases, I have to open them again in mac's Preview app, turn them left and back right again, and save the change. Then when inserting in Word or Libra they will be correct (strange!!)
• So I guess the real bug is buried deep inside iphone images somewhere :-|

It’s not buried deep. EXIF data in phone images can encode the phone orientation. It’s easy to see in most image viewers.