I’ve got a JPEG image, shot in portrait mode on my camera (recent iPhone). Hugo is rendering the page with the image in landscape orientation, turned 90 degrees CCW. This happens whether I include it with {{< figure >}}, the markdown ![] code, or raw HTML.
When I have my web server just display the image directly, it is correct. It’s correct when I view it in macOS Preview on the desktop. And I see nothing in the CSS that would transform the image, so this is pretty clearly something happening at page rendering time.
Version is v0.63.0-DEV/extended. Any help would be appreciated.
ExifTool Version Number : 9.46
File Name : IMG_9730.JPG
Directory : /home/scholvin/blog/static/2020/img
File Size : 2.8 MB
File Modification Date/Time : 2020:02:08 12:07:49-06:00
File Access Date/Time : 2020:02:08 12:07:37-06:00
File Inode Change Date/Time : 2020:02:08 16:33:41-06:00
File Permissions : rw-r--r--
File Type : JPEG
MIME Type : image/jpeg
Exif Byte Order : Big-endian (Motorola, MM)
Make : Apple
Camera Model Name : iPhone 8
Orientation : Rotate 90 CW
X Resolution : 72
Y Resolution : 72
Resolution Unit : inches
Software : 13.3
Modify Date : 2020:02:08 11:27:25
Y Cb Cr Positioning : Centered
Exposure Time : 1/40
F Number : 1.8
Exposure Program : Program AE
ISO : 25
Exif Version : 0231
Date/Time Original : 2020:02:08 11:27:25
Create Date : 2020:02:08 11:27:25
Components Configuration : Y, Cb, Cr, -
Shutter Speed Value : 1/40
Aperture Value : 1.8
Brightness Value : 4.460885433
Exposure Compensation : 0
Metering Mode : Multi-segment
Flash : Off, Did not fire
Focal Length : 4.0 mm
Subject Area : 2015 1511 2217 1330
Run Time Flags : Valid
Run Time Value : 1757942958855791
Run Time Scale : 1000000000
Run Time Epoch : 0
Sub Sec Time Original : 936
Sub Sec Time Digitized : 936
Flashpix Version : 0100
Color Space : Uncalibrated
Exif Image Width : 4032
Exif Image Height : 3024
Sensing Method : One-chip color area
Scene Type : Directly photographed
Exposure Mode : Auto
White Balance : Auto
Focal Length In 35mm Format : 28 mm
Scene Capture Type : Standard
Lens Info : 3.99000001mm f/1.8
Lens Make : Apple
Lens Model : iPhone 8 back camera 3.99mm f/1.8
GPS Latitude Ref : North
GPS Longitude Ref : West
GPS Altitude Ref : Above Sea Level
GPS Speed Ref : km/h
GPS Speed : 0
GPS Img Direction Ref : True North
GPS Img Direction : 168.8156587
GPS Dest Bearing Ref : True North
GPS Dest Bearing : 168.8156587
GPS Horizontal Positioning Error: 65 m
Compression : JPEG (old-style)
Thumbnail Offset : 2294
Thumbnail Length : 10579
Profile CMM Type : appl
Profile Version : 4.0.0
Profile Class : Display Device Profile
Color Space Data : RGB
Profile Connection Space : XYZ
Profile Date Time : 2017:07:07 13:22:32
Profile File Signature : acsp
Primary Platform : Apple Computer Inc.
CMM Flags : Not Embedded, Independent
Device Manufacturer : APPL
Device Model :
Device Attributes : Reflective, Glossy, Positive, Color
Rendering Intent : Perceptual
Connection Space Illuminant : 0.9642 1 0.82491
Profile Creator : appl
Profile ID : ca1a9582257f104d389913d5d1ea1582
Profile Description : Display P3
Profile Copyright : Copyright Apple Inc., 2017
Media White Point : 0.95045 1 1.08905
Red Matrix Column : 0.51512 0.2412 -0.00105
Green Matrix Column : 0.29198 0.69225 0.04189
Blue Matrix Column : 0.1571 0.06657 0.78407
Red Tone Reproduction Curve : (Binary data 32 bytes, use -b option to extract)
Chromatic Adaptation : 1.04788 0.02292 -0.0502 0.02959 0.99048 -0.01706 -0.00923 0.01508
0.75168
Blue Tone Reproduction Curve : (Binary data 32 bytes, use -b option to extract)
Green Tone Reproduction Curve : (Binary data 32 bytes, use -b option to extract)
Image Width : 4032
Image Height : 3024
Encoding Process : Baseline DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:2:0 (2 2)
Aperture : 1.8
GPS Altitude : 190.4 m Above Sea Level
GPS Latitude : 41 deg 54' 18.42" N
GPS Longitude : 87 deg 49' 5.54" W
GPS Position : 41 deg 54' 18.42" N, 87 deg 49' 5.54" W
Image Size : 4032x3024
Run Time Since Power Up : 20 days 8:19:02
Scale Factor To 35 mm Equivalent: 7.0
Shutter Speed : 1/40
Create Date : 2020:02:08 11:27:25.936
Date/Time Original : 2020:02:08 11:27:25.936
Thumbnail Image : (Binary data 10579 bytes, use -b option to extract)
Circle Of Confusion : 0.004 mm
Field Of View : 65.5 deg
Focal Length : 4.0 mm (35 mm equivalent: 28.0 mm)
Hyperfocal Distance : 2.07 m
Light Value : 9.0
More info: in Chrome, if I click on the image and tell it to open in a new tab, it has the correct orientation. And if I download the image, it orients correctly in any viewer I use on either a Mac or PC. I’m at a complete loss.
It looks like the problem happened when the images converted from HEIC to JPG on the way out of my phone. I am using FTPManager which appears to have a bug. When I use Apple’s conversion toolkit, like what happens when I use AirDrop or email to send the photo, it appears correct. Thanks for the help.
I was having a similar problem where my photos were rotating 90 degrees but I was able to just resize the image.
I would just add the bolded part {{ $image.Resize “600x r90” }} and play around with number to see what can get you what you want. For me, I had to add r270 to rotate the image back to where I wanted it.
have you tried different browsers?