add gallery content
This commit is contained in:
parent
7e94275ae3
commit
42942b4fbe
221 changed files with 3546 additions and 74 deletions
28
themes/hugo-easy-gallery/layouts/shortcodes/figure.html
Normal file
28
themes/hugo-easy-gallery/layouts/shortcodes/figure.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!--
|
||||
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/
|
||||
-->
|
||||
<!-- 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" | relURL }} />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 -}}
|
||||
<!-- use either src or link-thumb for thumbnail image -->
|
||||
{{- $filetype := index (findRE "[^.]+$" (.Get "link") ) 0 }}
|
||||
{{- $thumb := .Get "src" | default (printf "%s.%s" (replaceRE "\\.[^.]+$" (.Get "thumb") (.Get "link") ) $filetype ) | relURL }}
|
||||
<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">
|
||||
<div class="img"{{ if .Parent }} style="background-image: url('{{ print ($thumb | relURL) }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
|
||||
<img itemprop="thumbnail" src="{{ $thumb }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
{{ with .Get "link" | default (.Get "src") }}<a href="{{. | relURL}}" itemprop="contentUrl"></a>{{ end }}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") (.Get "attrlink") }}
|
||||
<figcaption>
|
||||
{{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
|
||||
{{- with .Get "caption" }}<p>{{.}}</p>{{ end }}
|
||||
{{- if or (.Get "attr") (.Get "attrlink") }}
|
||||
<footer><small>{{if .Get "attrlink"}}<a href="{{.Get `attrlink`}}">{{ default (.Get "attrlink") (.Get "attr") }}</a>{{ else }}{{ .Get "attr"}}{{ end }}</small></footer>
|
||||
{{- end }}
|
||||
</figcaption>
|
||||
{{- end }}
|
||||
</figure>
|
||||
</div>
|
||||
65
themes/hugo-easy-gallery/layouts/shortcodes/gallery.html
Normal file
65
themes/hugo-easy-gallery/layouts/shortcodes/gallery.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!--
|
||||
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="{{ relURL "/css/hugo-easy-gallery.css" }}" />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 }}
|
||||
{{ $baseURL := .Site.BaseURL }}
|
||||
{{- $thumbnailSize := .Get "thumbnail-size" | default "300x300" -}}
|
||||
<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|webp|avif|jxl)" }}<!-- 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 -->
|
||||
{{- $filetype := index (findRE "[^.]+$" .Name ) 0 }}<!-- file extension of 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 -}}
|
||||
{{ with .Inner -}}
|
||||
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
|
||||
{{ . }}
|
||||
{{- else }}
|
||||
<!-- Generate figures for all page resources of type image. -->
|
||||
{{- range $.Page.Resources.ByType "image" -}}
|
||||
|
||||
{{- $thumbnail := .Fill $thumbnailSize -}}
|
||||
<div class="box">
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<div class="img" style="background-image: url('{{ $thumbnail.RelPermalink }}');" >
|
||||
<img itemprop="thumbnail" src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" alt="{{ .Title }}" /><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
{{- with .Title -}}
|
||||
<figcaption>
|
||||
<p>{{ . }}</p>
|
||||
</figcaption>
|
||||
{{- end -}}
|
||||
<a href="{{ .RelPermalink }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
|
||||
</figure>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
174
themes/hugo-easy-gallery/layouts/shortcodes/load-photoswipe.html
Normal file
174
themes/hugo-easy-gallery/layouts/shortcodes/load-photoswipe.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!--
|
||||
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 }}
|
||||
|
||||
<!--<script src="/js/load-photoswipe.js"></script>-->
|
||||
|
||||
<script>
|
||||
/*
|
||||
Put this file in /static/js/load-photoswipe.js
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
/* Show an alert if this js file has been loaded twice */
|
||||
if (window.loadphotoswipejs) {
|
||||
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
|
||||
}
|
||||
var loadphotoswipejs = 1
|
||||
|
||||
/* TODO: Make the share function work */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
document.querySelectorAll('figure').forEach(function($figure, index) {
|
||||
if ($figure.className == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||
var $a = $figure.querySelector('a'),
|
||||
$img = $figure.querySelector('img'),
|
||||
$src = $a.href,
|
||||
$title = $img.alt,
|
||||
$msrc = $img.src;
|
||||
// if data-size on <a> tag is set, read it and create an item
|
||||
if ($a.dataset.size) {
|
||||
var $size = $a.dataset.size.split('x');
|
||||
var item = {
|
||||
src : $src,
|
||||
w : $size[0],
|
||||
h : $size[1],
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Using pre-defined dimensions for " + $src);
|
||||
{{ end }}
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
src : $src,
|
||||
w : 400, // temp default size
|
||||
h : 300, // temp default size
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Using default dimensions for " + $src);
|
||||
{{ end }}
|
||||
// load the image to check its dimensions
|
||||
// update the item as soon as w and h are known (check every 30ms)
|
||||
var img = new Image();
|
||||
img.src = $src;
|
||||
var wait = setInterval(function() {
|
||||
var w = img.naturalWidth,
|
||||
h = img.naturalHeight;
|
||||
if (w && h) {
|
||||
clearInterval(wait);
|
||||
item.w = w;
|
||||
item.h = h;
|
||||
{{ if .Site.Params.debug }}
|
||||
console.log("Got actual dimensions for " + img.src);
|
||||
{{ end }}
|
||||
// Update the figure parent div's max width.
|
||||
var $parentDiv = $figure.parentElement;
|
||||
if (!$parentDiv.hasOwnProperty("style")) {
|
||||
$figure.parentElement.style = "max-width: " + w + "px"
|
||||
}
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
// Save the index of this image then add it to the array
|
||||
items.push(item);
|
||||
// Event handler for click on a figure
|
||||
$figure.addEventListener('click', function(event) {
|
||||
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
||||
// Get the PSWP element and initialize it with the desired options
|
||||
var $pswp = document.querySelector('.pswp');
|
||||
var options = {
|
||||
index: index,
|
||||
bgOpacity: 0.8,
|
||||
showHideOpacity: true,
|
||||
showHideAnimationType: 'zoom',
|
||||
focus: 'false',
|
||||
history: 'false'
|
||||
}
|
||||
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Photoswipe css/js libraries -->
|
||||
{{ with .Site.Params.CDNJS }}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css" integrity="sha256-LWdHSKWG7zv3DTpee8YAgoTfkj3gNkfauF624h4P2Nw=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css" integrity="sha256-Q9bBMw/rHRRag46GDWY84J3elDNc8JJjKXL9tIC4oe8=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js" integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js" integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=" crossorigin="anonymous"></script>
|
||||
{{- else -}}
|
||||
<link rel="stylesheet" href="{{ "/css/3p/photoswipe.min@4.1.3.css" | relURL }}"></script>
|
||||
<link rel="stylesheet" href="{{ "/css/3p/default-skin/default-skin.min@4.1.3.css" | relURL }}"></script>
|
||||
<script src="{{ "/js/3p/photoswipe.min@4.1.3.js" | relURL }}"></script>
|
||||
<script src="{{ "/js/3p/photoswipe-ui-default.min@4.1.3.js" | relURL }}"></script>
|
||||
{{ end }}
|
||||
|
||||
<style>
|
||||
.pswp__caption a
|
||||
, .pswp__caption small a
|
||||
, .pswp__caption__center a {
|
||||
color: #CCC;
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 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 }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue