Alt: Cybergate9.Net

Cybergate9.Net

Online ramblings, both current and historic, by just another human bean

Photo Gallery Tests

Testing 1 2 3 ..

ShaunO

2-Minute Read

My initial implementation of a ‘fancybox’ gallery, by folder, auto gathering images, extracting EXIF using built in hugo image processing.

Gallery captions created by concatenating a whole bunch of stuff together out of EXIF and adding creative commons statements.

5 random photos from different cameras to test EXIF functionality.

The hugo shortcode looks like this presently:

<style>
    div.gallery {
        display: flex;
        flex-wrap: wrap;
    }
    div.gallery a {
        flex-grow: 1;
        object-fit: cover;
        margin: 3px;
        display: flex;
    }
    div.gallery a img {            
        height: 220px;
        object-fit: cover;
        flex-grow: 1;
    }
</style>
{{$cclicence := print `This work is licensed under <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0  <img style="height:22px!important;margin-left:3px;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a>` }}
{{ with .Page.Resources.ByType "image" }}
 <div class="gallery">
  {{ range . }}
    {{ $focallength := print .Exif.Tags.FocalLength " mm"}}
    {{with .Exif.Tags.FocalLengthIn35mmFilm}}
       {{ $focallength = "" }}
       {{ $focallength = print . "mm (35mm equiv.)" }}
    {{end}}
    {{with .Exif.Tags.LensModel}}
       {{ $focallength = print $focallength " [Lens: " . "]" }}
    {{end}}
    {{ $usercomment := substr .Exif.Tags.UserComment "5" }}
    {{ $usercomment = print `"` $usercomment `"` }}
    {{
    $caption := print `<p>` $usercomment `<div class="fa fa-camera"/>` "  " 
    .Exif.Tags.Make ", " .Exif.Tags.Model "&nbsp;|&nbsp;" 
    `<div class="fa fa-ring"/> : `
    $focallength "&nbsp;|&nbsp;" 
    `<div class="fa fa-sliders-h"/>  SS:` .Exif.Tags.ExposureTime  
    ", F" .Exif.Tags.FNumber ", ISO" .Exif.Tags.ISOSpeedRatings 
    "&nbsp;|&nbsp;"  $cclicence "</p>"
    }}
     <a data-fancybox="gallery" data-caption="{{ $caption }}" 
     href="{{ .RelPermalink }}">
        <img src="{{ .RelPermalink }}" alt="{{ $caption }}">  <br/>            
     </a>
    {{ end }}
 </div>
{{ end }}

This work is licensed
CC BY-NC-ND 4.0

Recent Posts

Categories

About

Online ramblings, both current and historic, by just another human bean