Image EXIF orientation

support
11

@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/ - very interesting article.

For documentation purposes, the source code I have below:

Bildschirmfoto 2020-01-24 um 12.20.03
Bildschirmfoto 2020-01-24 um 12.20.032302×2124 1.38 MB

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;
  }
}
1 Like