HUGO

Why is hugo rotating my image?

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.

Hugo does not render snything, this are the browsers :roll_eyes: have you tried different browsers?

Can you give us the hugo generated code?

Please check the exif values of the jpg file.

By “render” I guess I mean “compile” or “generate” or whatever it is that happens when I run the hugo command.

It looks wrong in both Chrome and Safari.

The hugo generated code is live at http://scholvin.com/posts/2020/02/08/test/

The markdown that generated it is:

---
title: "test"
date: 2020-02-08T12:08:42-06:00
draft: false
---
{{< figure src="/2020/img/IMG_9730.JPG" title="sideways" >}}
some text

You can see the same JPEG alone in a browser facing the right way at http://scholvin.com/files/IMG_9730.JPG

The output from exiftool on that JPEG is:

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.

Looks like I’m running into this.

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.