hugo框架stack主题图片旋转问题

stack是 hugo 框架里非常流行的一个主题。最近使用时发现手机拍摄的竖屏的照片，插入到页面时会被旋转，即出现下面这种情况。

图片自动旋转的例子

问题定位

搜索 hugo 论坛之后，发现遇到这类问题的开发者并不少。作者在这个帖子里面对这个问题进行了回复：hugo 在Resize图片的时候，没有考虑 EXIF 里面的方向信息。但在v0.121.2版本，增加了AutoOrient来解决这个问题。

EXIF

EXIF 的全名为：Exchangeable image file format 可交换的图片文件格式，它记录了图片在拍摄时的一些原始信息。Windows 下可以安装 IrfanView 这款软件查看图片的 EXIF 信息。上面的熊猫图的 EXIF 信息如下，Orientation为Right Top。EXIF 的目的是保证在不同的显示设备上都能正确的显示图片。

exif信息

问题代码

hugo-theme-stack\layouts\_default\_markup\render-image.html文件是 stack 用来渲染图片的代码。下面片段，是调用Resize方法的地方。因为 hugo 没有考虑 EXIF 的方向信息，导致图片Resize出现问题。

1
2
3
4
5


		{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
			{{- $small := $image.Resize `480x` -}}
			{{- $big := $image.Resize `1024x` -}}
			{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
		{{- end -}}

解决方案

去掉EXIF信息

IrfanView 能够去掉 EXIF 信息，点击File-Save，在弹窗里面去掉Keep original EXIF data选项，保存即可。

去掉exif信息

修改render-image的代码

在渲染图片的地方加上AutoOrient，即可解决页面上图片方向的问题。但 stack 支持相册模式——点击查看图片详情，故还需要修改相册模式的代码。这是一段 js 代码，修改难度比较高，建议直接使用第一种方案。

1
2
3
4
5


		{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
			{{- $small := $image.Resize `480x` | images.Filter images.AutoOrient -}}
			{{- $big := $image.Resize `1024x` | images.Filter images.AutoOrient -}}
			{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
		{{- end -}}