Migrate *all* photos to the cavelab setup. Header/footer still broken.
Completely remove the other image gallery themes. I now have: image galleries, with lightboxes, and captions, with links in them (and to Hugo pages), with full images lazy-loaded, with all thumbnails auto-generated, and the ability to do this on both individual images *and* with globbing, from page resources, from this page or any specified one. See cavelab_notes.txt. It also has the ability to use Exif data of the photo - if I preprocess it into a JSON file. Known issues: - The theme header/footer are now being overridden. I am working to fix this first. - I am missing some kind of fonts/images needed for the lightbox to show up properly.
This commit is contained in:
Chris Hodapp
8
layouts/partials/footer.html
Normal file
8
layouts/partials/footer.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<!-- From https://blog.cavelab.dev/2021/04/photo-gallery-posts/ -->
|
||||
|
||||
{{- if and (eq .Type "photos") (eq .Kind "page") -}}
|
||||
<script src="{{ (resources.Get "assets/lightgallery.min.js" | fingerprint).Permalink }}"></script>
|
||||
<script>lightGallery(document.getElementById('lightgallery'), {selector: '.photo-item'});</script>
|
||||
{{- end -}}
|
||||
|
||||
<!-- lightgallery is: https://github.com/sachinchoolur/lightGallery -->
|
||||
8
layouts/partials/header.html
Normal file
8
layouts/partials/header.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<!-- From https://blog.cavelab.dev/2021/04/photo-gallery-posts/ -->
|
||||
{{- if and (eq .Type "photos") (eq .Kind "page") -}}
|
||||
<link rel="stylesheet" href="{{ (resources.Get "assets/lightgallery.css" | fingerprint).Permalink }}" />
|
||||
{{- end -}}
|
||||
<!-- lightgallery is: https://github.com/sachinchoolur/lightGallery -->
|
||||
|
||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/custom.css">
|
||||
|
||||
@@ -1,71 +1,107 @@
|
||||
<!--
|
||||
Put this file in /layouts/shortcodes/figure.html
|
||||
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
<!-- See cavelab_notes.txt at root of repo. -->
|
||||
|
||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
||||
{{- if not ($.Page.Scratch.Get "figurecount") -}}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{- end -}}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 -}}
|
||||
<!-- Started from: https://blog.cavelab.dev/2021/04/photo-gallery-posts/ -->
|
||||
|
||||
<!-- if 'resource' is given, look for a page resource by that name. -->
|
||||
<!-- if 'page' is given, find the page resource there. -->
|
||||
<!-- if not, find the page resource in the current page. -->
|
||||
<!-- (yes, my description is probably at least 50% wrong) -->
|
||||
|
||||
<!-- Thumbnail image size/type -->
|
||||
{{- $resize_opts := "600x jpg" -}}
|
||||
<!-- TODO: This isn't generating a JPEG on my configuration. Not sure
|
||||
why. Hugo version issue? -->
|
||||
{{- $thumb := "" -}}
|
||||
{{- $href := "" -}}
|
||||
{{- if .Get "resource" -}}
|
||||
{{- $page := $.Page -}}
|
||||
{{- with .Get "page" -}}
|
||||
{{- $page = $.Site.GetPage . -}}
|
||||
{{- end -}}
|
||||
{{- if not $page -}}
|
||||
{{- errorf "Error: Can't find page %s" (.Get "page") -}}
|
||||
{{- end -}}
|
||||
{{- $resource := (.Get "resource") -}}
|
||||
{{- $original := $page.Resources.GetMatch (printf "*%s*" $resource) -}}
|
||||
{{- if eq $original nil -}}
|
||||
{{- errorf "Error: Can't find resource %s on page %s" $resource (.Get "page") -}}
|
||||
{{- end -}}
|
||||
{{- if .Get "noresize" -}}
|
||||
{{- .Scratch.Set "image" $original -}}
|
||||
{{- else -}}
|
||||
{{- .Scratch.Set "image" ($original.Resize $resize_opts) -}}
|
||||
{{- end -}}
|
||||
{{- $image := .Scratch.Get "image" -}}
|
||||
{{- $thumb = $image.RelPermalink -}}
|
||||
{{- $href = $original.RelPermalink -}}
|
||||
{{- else -}}
|
||||
<!-- use either src or link-thumb for thumbnail image -->
|
||||
{{- $thumb = .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") -}}
|
||||
{{- $href = .Get "link" | default (.Get "src") -}}
|
||||
<!-- if 'page' is given, find page resources there. -->
|
||||
<!-- if not, find page resources in the current page. -->
|
||||
{{- $page := $.Page -}}
|
||||
{{- with .Get "page" -}}
|
||||
{{- $page = $.Site.GetPage . -}}
|
||||
{{- end -}}
|
||||
{{- if not $page -}}
|
||||
{{- errorf "Error: Can't find page %s" (.Get "page") -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
|
||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<!-- Prepending ../.. below is a hack to get around
|
||||
https://github.com/gohugoio/hugo/issues/2744 when I don't
|
||||
feel like setting baseURL and using absolute URLs. -->
|
||||
<div class="img"{{ if .Parent }} style="background-image: url('../..{{ $thumb }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
|
||||
<img itemprop="thumbnail" src="{{ $thumb }}" {{ with .Get "alt" | default (.Get "caption" | markdownify) }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
|
||||
<a href="{{ $href }}" itemprop="contentUrl"></a>
|
||||
{{- if or (or (.Get "title") (.Get "caption" | markdownify)) (.Get "attr") -}}
|
||||
<figcaption>
|
||||
{{- with .Get "title" -}}<h4>{{.}}</h4>{{ end }}
|
||||
{{- if or (.Get "caption" | markdownify) (.Get "attr")}}
|
||||
<p>
|
||||
{{- .Get "caption" -}}
|
||||
{{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
|
||||
</p>
|
||||
{{- $linkto := .Get "linkto" -}}
|
||||
{{- $linktitle := "" -}}
|
||||
{{- if $linkto -}}
|
||||
{{- $linktitle = ($.Site.GetPage $linkto).Title -}}
|
||||
{{- end -}}
|
||||
{{- $title := .Get "title" -}}
|
||||
|
||||
{{- $resources := .Get "resources" -}}
|
||||
{{- if not $resources -}}
|
||||
{{- errorf "Error: 'resources' must be given" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- range $src := $page.Resources.Match $resources -}}
|
||||
{{- $exifJson := $page.Resources.GetMatch (printf "%s.json" .Name) -}}
|
||||
|
||||
{{- $exif := slice -}}
|
||||
{{- with $exifJson -}}
|
||||
{{- with (index (.Content | unmarshal) 0) -}}
|
||||
{{- with .Title -}}
|
||||
<!-- If user gave no title, but Exif has one, use that: -->
|
||||
{{- if not $title -}}
|
||||
{{- $title = . -}}
|
||||
{{- end -}}
|
||||
</figcaption>
|
||||
{{- end -}}
|
||||
{{- with .Make2 -}}{{- $exif = $exif | append (printf "Make: %s" .) -}}{{- end -}}
|
||||
{{- with .Model -}}{{- $exif = $exif | append (printf "Camera: %s" .) -}}{{- end -}}
|
||||
{{- with .LensSpec -}}{{- $exif = $exif | append (printf "Lens: %s" .) -}}{{- end -}}
|
||||
{{- with .FocalLength -}}{{- $exif = $exif | append (printf "Focal length: %s" .) -}}{{- end -}}
|
||||
{{- with .FNumber -}}{{- $exif = $exif | append (printf "Aperture: ƒ/%.1f" .) -}}{{- end -}}
|
||||
{{- with .ExposureTime -}}
|
||||
{{- if eq (printf "%T" .) "float64" -}}
|
||||
{{- $exif = $exif | append (printf "Exposure time: %.1f s" .) -}}
|
||||
{{- else -}}
|
||||
{{- $exif = $exif | append (printf "Exposure time: %s s" .) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- with .ISO -}}{{- $exif = $exif | append (printf "ISO: %.0f" .) -}}{{- end -}}
|
||||
{{- end -}}
|
||||
</figure>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
<!-- If still no title, just use the filename: -->
|
||||
{{- if not $title -}}
|
||||
{{- $title = .Title -}}
|
||||
{{- end -}}
|
||||
|
||||
<!-- If *still* no title, but a link was given, use page title from link: -->
|
||||
{{- $text := $title -}}
|
||||
{{- if $linkto -}}
|
||||
{{- if not $title -}}
|
||||
{{- $title = $linktitle -}}
|
||||
{{- end -}}
|
||||
{{- $text = (printf "<a href=\"%s\">%s</a>" (relref $.Page $linkto) $title) -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="photo-item" data-src="{{ .Permalink }}" data-sub-html="<h4>{{ $text }}</h4><p>{{ delimit $exif " | " }}</p>">
|
||||
{{- $crop := default "smart" -}}
|
||||
{{- $tinyw := printf "500x375 %s Lanczos q85" $crop -}}
|
||||
{{- $smallw := printf "800x600 %s Lanczos q80" $crop -}}
|
||||
{{- $mediumw := printf "1200x900 %s Lanczos q40" $crop -}}
|
||||
{{- $largew := printf "1600x1200 %s Lanczos q30" $crop -}}
|
||||
|
||||
{{- $srcset := slice -}}
|
||||
|
||||
{{- $tiny := ($src.Fill $tinyw) -}}
|
||||
{{- $srcset = $srcset | append (printf "%s 500w" $tiny.Permalink) -}}
|
||||
{{- $img := dict "src" $tiny.RelPermalink "w" $tiny.Width "h" $src.Height -}}
|
||||
|
||||
{{- if and (ge $src.Width "800") (ne $src.MediaType.SubType "png") -}}
|
||||
{{- $small := ($src.Fill $smallw) -}}
|
||||
{{- $srcset = $srcset | append (printf "%s 800w" $small.Permalink) -}}
|
||||
{{- $img = dict "src" $small.RelPermalink "w" $small.Width "h" $small.Height -}}
|
||||
{{- end -}}
|
||||
{{- if and (ge $src.Width "1200") (ne $src.MediaType.SubType "png") -}}
|
||||
{{- $medium := ($src.Fill $mediumw) -}}
|
||||
{{- $srcset = $srcset | append (printf "%s 1200w" $medium.Permalink) -}}
|
||||
{{- end -}}
|
||||
{{- if and (ge $src.Width "1600") (ne $src.MediaType.SubType "png") -}}
|
||||
{{- $large := ($src.Fill $largew) -}}
|
||||
{{- $srcset = $srcset | append (printf "%s 1600w" $large.Permalink) -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $sizes := "(min-width: 900px) 420px, (min-width: 684px) 310px, calc(100vw - 40px)" -}}
|
||||
|
||||
<a href="{{ .Permalink }}">
|
||||
<picture>
|
||||
<source type="{{ $src.MediaType }}" sizes="{{ $sizes }}" srcset='{{ delimit $srcset ", " }}'>
|
||||
<img loading="lazy" class="center"
|
||||
src="{{ $img.src }}" width="{{ $img.w }}" height="{{ $img.h }}" alt="{{ $title }}">
|
||||
<!-- CMH: img was missing closing tag on his website -->
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,41 +1,4 @@
|
||||
<!--
|
||||
Put this file in /layouts/shortcodes/gallery.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
||||
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 }}
|
||||
{{ $baseURL := .Site.BaseURL }}
|
||||
<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
{{- with (.Get "dir") -}}
|
||||
<!-- If a directory was specified, generate figures for all of the images in the directory -->
|
||||
{{- $files := readDir (print "/static/" .) }}
|
||||
{{- range $files -}}
|
||||
<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
|
||||
{{- $thumbext := $.Get "thumb" | default "-thumb" }}
|
||||
{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
|
||||
{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
|
||||
{{- if and $isimg (not $isthumb) }}
|
||||
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
|
||||
{{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
|
||||
{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
|
||||
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
|
||||
{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
|
||||
<div class="box">
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
|
||||
<img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
<figcaption>
|
||||
<p>{{ $caption }}</p>
|
||||
</figcaption>
|
||||
<a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
|
||||
</figure>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- else -}}
|
||||
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
|
||||
{{ .Inner }}
|
||||
{{- end }}
|
||||
<!-- See cavelab_notes.txt at root of repo. -->
|
||||
<div class="photo-container" id="lightgallery">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
<!--
|
||||
Put this file in /layouts/shortcodes/load-photoswipe.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
|
||||
<!-- prevent this shortcode from being loaded more than once per page -->
|
||||
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
|
||||
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
|
||||
|
||||
<!--
|
||||
*** jQuery must be loaded before load-photoswipe.js ***
|
||||
- If your template already loads jQuery in the header then you don't need to load it again here.
|
||||
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
|
||||
-->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
<script src="/js/load-photoswipe.js"></script>
|
||||
|
||||
<!-- Photoswipe css/js libraries -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element, as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
<div class="pswp__top-bar">
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
<div class="pswp__counter"></div>
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user