diff options
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/_default/single.html | 28 | ||||
| -rw-r--r-- | layouts/partials/gallery.html | 121 | ||||
| -rw-r--r-- | layouts/partials/load-photoswipe.html | 77 | ||||
| -rw-r--r-- | layouts/partials/tail.html | 10 |
4 files changed, 217 insertions, 19 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8b606f5..551431e 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,4 +1,5 @@ {{ define "content" }} + {{ $logos := .Resources.Match "logos/*" }} {{ if gt (len $logos) 0 }} <ul class="logos-list" aria-hidden="true"> @@ -6,7 +7,7 @@ {{ if eq .ResourceType "image" }} {{ $image := .Fit "64x64" }} <li> - <figure> + <figure class="no-photoswipe"> <img class="logo" src="{{ $image.RelPermalink }}" alt="" title="{{ $image.Title }}"> </figure> </li> @@ -22,24 +23,13 @@ </div> {{ end }} - {{ $images := .Resources.Match "images/*" }} - {{ if gt (len $images) 0 }} - <ul class="images-list" aria-hidden="true"> - {{ range $images }} - {{ if eq .ResourceType "image" }} - {{ $image := .Resize "512x" }} - <li> - <figure> - <img class="image" src="{{ $image.RelPermalink }}" alt="" title="{{ $image.Title }}"> - {{ with $image.Params.copyright }} - <figcaption class="copyright">{{ . | markdownify }}</figcaption> - {{ end }} - </figure> - </li> - {{ end }} - {{ end }} - </ul> - {{ end }} + {{ $images_directory := .Params.images_directory | default "images" }} + {{ $images_static := .Params.images_static | default "false" }} + {{ $images_copyright := .Params.images_copyright }} + {{ $images_params := .Params.images }} + {{ partial "gallery.html" (dict "page" . "dir" $images_directory "static" $images_static "images_params" $images_params "images_copyright" $images_copyright) }} + {{ partial "load-photoswipe.html" (dict "page" .) }} + {{ end }} {{ define "lists" }} diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html new file mode 100644 index 0000000..2bc90fa --- /dev/null +++ b/layouts/partials/gallery.html @@ -0,0 +1,121 @@ +<!-- +Modified version of "gallery.html" from https://github.com/liwenyip/hugo-easy-gallery/ +Modifications mostly to allow using the gallery as a partial instead of a shortcode. + +Input Parameters: +- Mandatory: + - "page": Page + - $.Page.Scratch => $.page.Scratch + - .Site.BaseURL => $.page.Site.BaseURL + - $.Page.Dir => $.page.Dir +- Optional: + - "dir": String (directory) + - .Get "dir" => $.dir (if defined, else using ".Inner") + - "static": Boolean + - $.Get "static" => $.static (if defined, else "false" by default) + - "thumb": String (suffix) + - $.Get "thumb" => $.thumb (if defined, else "-thumb" by default) + - "caption_position": Enum (position: "bottom", "center", "none") + - .Get "caption-position" => $.caption_position (if defined, else "bottom" by default) + - "caption_effect": Enum (effect: "slide", "fade", "none") + - .Get "caption-effect" => $.caption_effect (if defined, else "slide" by default) + - "hover_effect": Enum (effect: "zoom", "grow", "shrink", "slideup", "slidedown", "none") + - .Get "hover-effect" => $.hover_effect (if defined, else "zoom" by default) + - "hover_transition": Enum (transition: "none" or not set) + - .Get "hover-transition" => $.hover_transition (if defined, else "none" by default) + +New Input Parameters: +- Optional: + - "images_copyright": String (copyright) + => General copyright for all images. + - "images": Array (images parameters) + - "src": String (filename) - MANDATORY + => Must correspond to an image in "dir" directory. + - "title": String (legend) + => Legend of the image. + - "copyright": String (copyright) + => Specific copyright for the image. +--> + +<!-- +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 := .page.Site.BaseURL }} +<div class="gallery caption-position-{{ with .caption_position | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .caption_effect | default "slide" }}{{.}}{{end}} hover-effect-{{ with .hover_effect | default "zoom" }}{{.}}{{end}} {{ if ne (.hover_transition) "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery"> + {{- with .dir -}} + <!-- If a directory was specified, generate figures for all of the images in the directory --> + {{- if eq $.static "true" -}} + {{ $.page.Scratch.Set "dirURL" (print .) }} + {{ $.page.Scratch.Set "dirFiles" (print "/static/" .) }} + {{- else -}} + {{- $tmpDir := print (replace $.page.Dir "\\" "/") "/" . }} + {{ $.page.Scratch.Set "dirURL" $tmpDir }} + {{ $.page.Scratch.Set "dirFiles" (print "/content/" $tmpDir "/") }} + {{- end -}} + {{- $dir := $.page.Scratch.Get "dirURL" }} + {{- $dirFiles := $.page.Scratch.Get "dirFiles" }} + {{- if (fileExists $dirFiles) -}} + {{- $files := readDir $dirFiles }} + + {{- range $files -}} + <!-- skip files that aren't images, or that inlcude the thumb suffix in their name --> + {{- $thumbext := $.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) }} + {{ $name := .Name }} + {{ with $.images_copyright }} + {{ $.page.Scratch.Set "copyright" (print " - © " .) }} + {{ end }} + + {{ range $.images_params }} + {{ if eq .src $name }} + {{ with .title }} + {{ $.page.Scratch.Set "title" . }} + {{ end }} + {{ with .copyright }} + {{ $.page.Scratch.Set "copyright" (print " - © " .) }} + {{ end }} + {{ end }} + {{ end }} + + {{- $title := ($.page.Scratch.Get "title") | default (.Name | replaceRE "\\..*" "") }} + {{- $copyright := ($.page.Scratch.Get "copyright") | default "" }} + + {{- $captionthumb := $title }} + {{- $caption := (print $title $copyright) }} + + {{- $linkURL := print $baseURL $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 $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>{{ $captionthumb }}</p> + </figcaption> + <a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top --> + </figure> + </div> + {{ $.page.Scratch.Delete "title" }} + {{ $.page.Scratch.Delete "copyright" }} + {{- end }} + {{- end }} + {{- end }} + {{ $.page.Scratch.Delete "dirURL" }} + {{ $.page.Scratch.Delete "dirFiles" }} + {{- else -}} +{{/* +TODO: Need to change the "figure" shortcode to a partial. +Not required for now as not used. + <!-- If no directory was specified, include any figure shortcodes called within the gallery --> + {{ .Inner }} +*/}} + {{- end }} +</div> diff --git a/layouts/partials/load-photoswipe.html b/layouts/partials/load-photoswipe.html new file mode 100644 index 0000000..d9921b1 --- /dev/null +++ b/layouts/partials/load-photoswipe.html @@ -0,0 +1,77 @@ +<!-- +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 +--> +<!-- these files are loaded in the theme footer +<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" /> +<!-- these files are loaded in the theme footer +<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 }}
\ No newline at end of file diff --git a/layouts/partials/tail.html b/layouts/partials/tail.html index ac0526b..ed6fbd7 100644 --- a/layouts/partials/tail.html +++ b/layouts/partials/tail.html @@ -1,5 +1,15 @@ {{ "<!-- TAIL.HTML -->" | safeHTML }} +<!-- <script src="{{ "plugins/jquery/jquery.js" | absURL }}"></script> +--> +<script src="{{ "plugins/jquery/jquery.js" | absURL }}"></script> +<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used --> +{{ if ($.Scratch.Get "photoswipeloaded") }} +<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> +<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> +{{ end }} <script src="{{ "plugins/bootstrap/js/bootstrap.min.js" | absURL }}"></script> <script src="{{ "plugins/jquery/jquery.easing.min.js" | absURL }}"></script> <script src="{{ "plugins/jquery/jquery.fittext.js" | absURL }}"></script> |