# Image EXIF orientation

**URL:** <https://discourse.gohugo.io/t/image-exif-orientation/22902>\
**Category:** support\
**Created:** [January 20, 2020, 9:18am UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902 "2020-01-20T09:18:04Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![myFrank-wk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/myfrank-wk/32/18912_2.png) [@myFrank-wk](https://discourse.gohugo.io/u/myFrank-wk)\
**Post date:** [January 20, 2020, 9:18am UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/1 "2020-01-20T09:18:04Z")

</div>

Hi,

how can I determine which EXIF orientation a photo has? I have various photos in a directory with different orientations (portrait, landscape). I want to automatically align and adjust the size. Resizing works. I just can’t do the turning. Below a photo with my result, the shortcode itself and the shortcode call in an .md file. Can somebody help me with it?

Hugo Static Site Generator v0.62.2/extended darwin/amd64 BuildDate: unknown

Frank

Shortcode gallerie.html

```
{{ with .Get "title" }}
  <h2>{{ . }}</h2>
{{ end }}
  <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  {{/* {{ range (.Page.Resources.Match (printf "%s*" (.Get "folder"))) }} */}}
  {{ range .Page.Resources.Match "gallery/*" }}
    {{ $resource := .Permalink }}
    {{ $thumbnail := .Resize "250x" }}
    <figure itemscope itemtype="http://schema.org/ImageObject" class="image gallery-item">
    <a href="{{ .Permalink }}" itemprop="contentUrl" data-size="{{ .Width }}x{{ .Height }}" >
      <img src="{{ $thumbnail.Permalink }}" itemprop="thumbnail" alt="{{ .Params.alt }}" class="galleryImage" />
    </a>
    <figcaption itemprop="caption description">
      {{ .Params.caption }}
      <span itemprop="copyrightHolder">{{ .Params.copyright }}</span>
    </figcaption>
    </figure> 
  {{ end }}
  </div>

```

shortcode call in the .md-File

{{\< gallerie folder=“gallery” title=“eine überschrift” \>}}

 ![Bildschirmfoto 2020-01-20 um 09.20.02](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/2/2025986a377d668acf4d6952f013ec297c4bb9f7.jpeg)

---

<div class="post-metadata">

**Author:** ![b\_rad](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@b\_rad](https://discourse.gohugo.io/u/b_rad)\
**Post date:** [January 20, 2020, 12:36pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/2 "2020-01-20T12:36:04Z")

</div>

> **[Image Processing](https://gohugo.io/content-management/image-processing/#exif)**
>
> Image Page resources can be resized and cropped.

> **[Image Processing](https://gohugo.io/content-management/image-processing/#image-processing-config)**
>
> Image Page resources can be resized and cropped.

---

<div class="post-metadata">

**Author:** ![myFrank-wk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/myfrank-wk/32/18912_2.png) [@myFrank-wk](https://discourse.gohugo.io/u/myFrank-wk)\
**Post date:** [January 20, 2020, 1:35pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/3 "2020-01-20T13:35:48Z")

</div>

Can you provide me with a snippet of source code for asking if the picture was taken in portrait mode?  
[https://www.impulseadventure.com/photo/exif-orientation.html](https://www.impulseadventure.com/photo/exif-orientation.html) - Don’t understand how to query it.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 20, 2020, 1:47pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/4 "2020-01-20T13:47:24Z")

</div>

> [@myFrank-wk](#):
>
> how can I determine which EXIF orientation a photo has?

So, I have an open issue about “auto rotation” based on exif. But time is scarce …

I guess it should be possible to look into `$image.Exif` and find the exif tag for this, but don’t ask me for the details …

---

<div class="post-metadata">

**Author:** ![b\_rad](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@b\_rad](https://discourse.gohugo.io/u/b_rad)\
**Post date:** [January 20, 2020, 2:48pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/5 "2020-01-20T14:48:46Z")

</div>

> **[Rotate photos to be upright - Sirv Support Center](https://sirv.com/help/resources/rotate-photos-to-be-upright/#EXIF_orientation_values)**
>
> How to rotate photos so they appear upright. Save time with auto-rotate and use Sirv to fix incorrect EXIF orientation values in your images.

---

<div class="post-metadata">

**Author:** ![myFrank-wk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/myfrank-wk/32/18912_2.png) [@myFrank-wk](https://discourse.gohugo.io/u/myFrank-wk)\
**Post date:** [January 20, 2020, 3:13pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/6 "2020-01-20T15:13:20Z")

</div>

It is clear to me that I can rotate the photos manually beforehand. But I don’t want that, it should be recognized and rotated automatically. The user should not worry about it and simply upload his photos to the “gallery” directory. But since I cannot see whether the photo is in portrait or landscape format, I cannot work with rotate (r90).

The following source also did not recognize which format is available:

```
{{ with .Get "title" }}
  <h2>{{ . }}</h2>
{{ end }}
  <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  {{/* {{ range (.Page.Resources.Match (printf "%s*" (.Get "folder"))) }} */}}
  {{ range .Page.Resources.Match "gallery/*" }}
    {{ $resource := .Permalink }}
    
    {{ $thumbnail := . }}
    {{ $orientation := cond (ge $thumbnail.Width $thumbnail.Height) "landscape" "portrait" }}
    {{ if eq $orientation "portrait" }}
    {{ $thumbnail := .Resize "x250" }}
    {{ else }}
      {{ $thumbnail := .Resize "250x" }}
    {{ end }}
    <figure itemscope itemtype="http://schema.org/ImageObject" class="image gallery-item">
    <a href="{{ .Permalink }}" itemprop="contentUrl" data-size="{{ .Width }}x{{ .Height }}" >
      <img src="{{ $thumbnail.Permalink }}" itemprop="thumbnail" alt="{{ .Params.alt }}" class="galleryImage" />
    </a>
    <figcaption itemprop="caption description">
      {{ .Params.caption }}
      <span itemprop="copyrightHolder">
        {{ .Params.copyright }}
        {{ if eq $orientation "portrait" }}
        {{ $orientation }}-portrait
        {{ else }}
        {{ $orientation }}-Landscape
        {{ end }}
      </span>
    </figcaption>
    </figure>  
  {{ end }}
  </div>
```

---

<div class="post-metadata">

**Author:** ![setphen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/setphen/32/10385_2.png) [@setphen](https://discourse.gohugo.io/u/setphen)\
**Post date:** [January 20, 2020, 9:05pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/7 "2020-01-20T21:05:19Z")

</div>

Hi!

You will have to check the value of the `$photo.Exif.Tags.Orientation` to determine which way the photo needs to be rotated. The link provided by @b_rad shows how the values of the `.Orientation` field relate to the spacial orientation of the image:

> **[Rotate photos to be upright - Sirv Support Center](https://sirv.com/help/resources/rotate-photos-to-be-upright/#EXIF_orientation_values)**
>
> How to rotate photos so they appear upright. Save time with auto-rotate and use Sirv to fix incorrect EXIF orientation values in your images.

Using this, you can write a snippet that can rotate the image based on the `.Oritientation` value:

```auto
{{ with $photo }}
    {{ $orientation = .Exif.Tags.Orientation }}
    {{ if eq $orientation 1 }}
      // Do nothing, image is right-side up
    {{ else if (eq $orientation 8) }}
      // Rotate the image 90deg CCW (.Resize "r90")
     ... so on
    {{ end }}
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [January 20, 2020, 9:55pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/8 "2020-01-20T21:55:39Z")

</div>

Today I learned ^

---

<div class="post-metadata">

**Author:** ![myFrank-wk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/myfrank-wk/32/18912_2.png) [@myFrank-wk](https://discourse.gohugo.io/u/myFrank-wk)\
**Post date:** [January 21, 2020, 8:08am UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/9 "2020-01-21T08:08:25Z")

</div>

@setphen  
Thanks for your help, unfortunately this doesn’t work for me. What am I doing wrong?

```
{{ with .Get "title" }}
  <h2>{{ . }}</h2>
{{ end }}
<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  {{/* {{ range (.Page.Resources.Match (printf "%s*" (.Get "folder"))) }} */}}
  {{ range .Page.Resources.Match "gallery/*" }}
    {{ $resource := .Permalink }}
    
    {{ $thumbnail := . }}
    {{ with $thumbnail }}
      {{ $orientation := .Exif.Tags.Orientation }}
    {{ end }}

```

ERROR 2020/01/21 08:29:00 Rebuild failed:

ERROR 2020/01/21 08:29:00 “/Users/frank/…/hugo-projects/ombud/content/blog/post2/index.md:22:1”: failed to render shortcode “gallerie”: failed to process shortcode: “/Users/frank/…/hugo-projects/ombud/themes/verein/layouts/shortcodes/gallerie.html:12:30”: execute of template failed: template: shortcodes/gallerie.html:12:30: executing “shortcodes/gallerie.html” at \<.Exif.Tags.Orientation\>: nil pointer evaluating \*exif.Exif.Tags

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 21, 2020, 12:29pm UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/10 "2020-01-21T12:29:28Z")

</div>

> [@myFrank-wk](#):
>
> {{ with $thumbnail }} {{ $orientation := .Exif.Tags.Orientation }} {{ end }}

I suspect that you have some images without Exif (or that Hugo failed to read it for some reason).

I suggest you rewrite it to somthing like this:

```auto
{{ with $photo }}
{ { $orientation := 1 }}
{{ with .Exif }}
{{ $orientation = .Tags.Orientation }}
{{ end }}
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![myFrank-wk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/myfrank-wk/32/18912_2.png) [@myFrank-wk](https://discourse.gohugo.io/u/myFrank-wk)\
**Post date:** [January 24, 2020, 11:40am UTC](https://discourse.gohugo.io/t/image-exif-orientation/22902/11 "2020-01-24T11:40:11Z")

</div>

@bep  
You were right, the EXIF data of the pictures was broken. I do not need to rotate the pictures because they are automatically displayed correctly. What an effort, but it does. Thank you for your help and for your working time that you are investing in the Hugo project.

Thanks for all other comments.

I got the original source code from Bruno Amaral: [https://brunoamaral.eu/post/creating-a-gallery-component-for-the-hugo-static-site-generator/](https://brunoamaral.eu/post/creating-a-gallery-component-for-the-hugo-static-site-generator/) - very interesting article.

For documentation purposes, the source code I have below:

 ![Bildschirmfoto 2020-01-24 um 12.20.03](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/f/fd02beea9198f472226c6c218e9c6b56a2ff46e1.jpeg)

**Content structure:**

```
content
   blog
      <blogpost title>
          gallery
             picture01.jpg
             picture02.jpg
          index.md

```

**Shortcode call in index.md:**

`{{<gallery folder="gallery/*" title="Gallery Title>}}`

**Shortcode source:**

I want to display 3 photos side by side. My content area is 1100px wide on the desktop. 1100/3 = 366px. Since I add a space for the photos, 365px is enough for a normal screen. For high-resolution Apple devices, the whole thing has to be doubled: 365px \* 2 = 730px. The area around the image tag could be optimized in the code. This would deliver 365px for normal devices and 730px for high-resolution devices.

```
{{ with .Get "title" }}
  <h2>{{ . }}</h2>
{{ end }}
<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  {{ range (.Page.Resources.Match (printf "%s*" (.Get "folder"))) }}

    {{ $resource := .Permalink }}
    {{ $thumbnail := .Resize "730x" }}
    <figure itemscope itemtype="http://schema.org/ImageObject" class="image gallery-item">
    <a href="{{ .Permalink }}" itemprop="contentUrl" data-size="{{ .Width }}x{{ .Height }}" >
      <img src="{{ $thumbnail.Permalink }}" itemprop="thumbnail" alt="{{ .Params.alt }}" class="galleryImage" />
    </a>
    <figcaption itemprop="caption description">
      {{ .Params.caption }}
      <span itemprop="copyrightHolder">{{ .Params.copyright }}</span>
    </figcaption>
    </figure> 

  {{ end }}
</div>

```

**SCSS:**

Due to the different device sizes, the respective photo must be reduced dynamically. You can do this in the .gallery-item class and there in the img tag with width: 100%; height: auto;

```
.gallery {
  width: 100%;
  display: block;
  margin: 0 auto;
}
@media only screen and (min-width: 480px) {
  .gallery {
    column-count: 1;
    column-gap: 3px;
  }
}
@media only screen and (min-width: 768px) {
  .gallery {
    column-count: 2;
    column-gap: 3px;
  }
}
@media only screen and (min-width: 992px) {
  .gallery {
    column-count: 3;
    column-gap: 0.2rem;
  }
}
.gallery-item {
  background-color: #eee;
  display: inline-block;
  margin: 0 0 0.2rem;
  width: 100%;
  border: 1px solid lightgrey;

  img {
    width: 100%;
    height: auto;
  }
}
```