gallery.html

{{ $currentPage := . }}

{{ $images := (.Page.Resources.ByType "image") }}
{{ if .Get "match"}}
	{{ $images = (.Page.Resources.Match (.Get "match")) }}
{{ end }}

{{ $filterOptions := .Get "filterOptions" | default (.Site.Params.galleryFilterOptions | default "[]") }}
{{ if not $filterOptions }}
	{{ $filterOptions = "[]" }}
{{ end }}

{{ $sortOrder := .Get "sortOrder" | default (.Site.Params.gallerySortOrder | default "asc") }}

{{ $rowHeight := .Get "rowHeight" | default (.Site.Params.galleryRowHeight | default 150) }}

{{ $margins := .Get "margins" | default (.Site.Params.galleryRowMargins | default 5) }}

{{ $resizeOptions := .Get "resizeOptions" | default (.Site.Params.galleryResizeOptions | default "300x150 q85 Lanczos") }}

{{ $loadJQuery := .Get "loadJQuery" | default (.Site.Params.galleryLoadJQuery | default false) }}

{{ $showExif := .Get "showExif" | default (.Site.Params.galleryShowExif | default false) }}

{{ $justifiedGalleryParameters := .Get "justifiedGalleryParameters" | default (.Site.Params.galleryJustifiedGalleryParameters | default "") }}

{{ $previewType := .Get "previewType" | default (.Site.Params.galleryPreviewType | default "blur") }}

{{ $embedPreview := .Get "embedPreview" | default (.Site.Params.galleryEmbedPreview | default true) }}

{{ $thumbnailHoverEffect := .Get "thumbnailHoverEffect" | default (.Site.Params.galleryThumbnailHoverEffect | default "none") }}

<!-- hugos image processing saves images at resources/_gen/images, if the property resourceDir
	 is changed in hugos config.toml file the images are save <resourceDir>/_gen/images.
	 Because it is not possible to access the value of resourceDir, users who change resourceDir also have to change
	[params] resourceDir. -->
{{ $thumbnailResourceDir := printf "%s%s" (.Site.Params.resourceDir | default "resources") "/_gen/images/" }}

<!-- Load jquery, jquery-lazy, swipebox and justified_gallery only once per page -->
{{ if not (.Page.Scratch.Get "galleryLoaded") }}
  	{{ .Page.Scratch.Set "galleryLoaded" true }}

	{{ if $loadJQuery }}
		<script src="/shortcode-gallery/jquery-3.5.1.min.js"></script>
	{{ end }}
	
	{{ if not (eq $previewType "none") }}
		<script src="/shortcode-gallery/lazy/jquery.lazy.min.js"></script>
	{{ end }}

	<script src="/shortcode-gallery/swipebox/js/jquery.swipebox.min.js"></script>
	<link rel="stylesheet" href="/shortcode-gallery/swipebox/css/swipebox.min.css">

	<script src="/shortcode-gallery/justified_gallery/jquery.justifiedGallery.min.js"></script>
	<link rel="stylesheet" href="/shortcode-gallery/justified_gallery/justifiedGallery.min.css"/>
{{ end }}

<style>
	{{ if  (eq $thumbnailHoverEffect "enlarge") }}
		.jg-entry img {
			transition: transform .25s ease-in-out !important;
		}

		.jg-entry img:hover {
			transform: scale(1.1);
		}
	{{ end }}

	{{ if not (eq $filterOptions "[]")  }}
		/* make 5px space between the button(filter options) in the filter bar */
		.justified-gallery-filterbar {
			margin-top: -5px;
			margin-left: -5px;
		}

		.justified-gallery-filterbar > * {
			margin-top: 5px;
			margin-left: 5px;
		}
	{{ end }}
</style>

<!--
Ordinal increases every time this shortcode is used in a document
Ordinal: {{ .Ordinal}}
-->
{{ $galleryId := (printf "gallery_%v" .Ordinal)}}


<div id="{{ $galleryId }}" class="justified-gallery">
	{{ range $original := sort $images "Name" $sortOrder}}
		{{ if eq $original.ResourceType "image" }}
			{{ $thumbnail := ($original.Fit ($resizeOptions)) }}

			{{ $metaFileName := print $original.Name ".meta"}}
			{{ $metadata := $currentPage.Page.Resources.GetMatch ($metaFileName) }}
			{{ if $metadata }}
				{{ $metadata = $metadata.Content }}
				{{ $metadata = $metadata | unmarshal }}
			{{ else }}
				{{ $metadata = dict }}
			{{ end }}

			{{/* If the image has exif informations, those are merged together with the metadata from the file */}}
			{{ if in "jpg jpeg tiff" $original.MediaType.SubType }}
				{{ with $original.Exif }}
					{{ $metadata = merge .Tags $metadata }}
				{{ end }}
			{{ end }}


			<div>
				<a href="{{ $original.RelPermalink }}" 
					class="galleryImg"
					{{ with $metadata }}
						{{ if .ImageDescription }}
							title="{{ .ImageDescription }}"
						{{ end }}

						{{ if $showExif }}
							data-description="{{ .Model }} + {{ .LensModel }}<br/>{{ .FocalLength }}mm f/{{ .FNumber }} {{ .ExposureTime }}sec ISO {{ .ISOSpeedRatings }}"
						{{ end }}

						{{ if not (eq $filterOptions "[]")  }}
							{{/* only include tags till the filter mechanism (in JS at the end of the file) is limited to tags */}}
							data-meta="{{ (dict "Tags" $metadata.Tags) | jsonify }}"
						{{ end }}
					{{ end }}
					>
					<img			
						width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"

						{{ if (eq $previewType "blur") }}
							{{ $preview_b := ($original.Fit ("32x32 q70 box jpg")) }}
							style="filter: blur(25px);"
							{{ if $embedPreview }}
								src="data:image/jpeg;base64,{{ $preview_b.Content | base64Encode }}"
							{{ else }}
								src="{{ $preview_b.RelPermalink }}"
							{{ end }}
							class="lazy"
							data-src="{{ $thumbnail.RelPermalink }}"
						{{ else if (eq $previewType "color") }}
							{{ $preview_1p := ($original.Resize ("1x1 box png")) }}
							{{ if $embedPreview }}
								src="data:image/png;base64,{{ $preview_1p.Content | base64Encode }}"
							{{ else }}
								src="{{ $preview_1p.RelPermalink }}"
							{{ end }}
							class="lazy"
							data-src="{{ $thumbnail.RelPermalink }}"
						{{ else }}
							src="{{ $thumbnail.RelPermalink }}"
						{{ end }}

						{{ with $metadata }}
							{{ if .ImageDescription }}
								alt="{{ .ImageDescription }}"
							{{ end }}
						{{ end }}
					>
				</a>
			</div>
		{{ end }}
	{{ end }}
</div>

<script>
	if (!jQuery) {
		alert("jquery is not loaded");
	}

	$( document ).ready(function() {
		const gallery = $("#{{ $galleryId }}");
		{{ $lastRowJustification := .Get "lastRow" | default (.Site.Params.galleryLastRow | default "justify") }}

		gallery.justifiedGallery({
			rowHeight : {{ $rowHeight }},
			margins : {{ $margins }},
			border : 0,
			waitThumbnailsLoad : false,
			lastRow : {{ $lastRowJustification }},
			captions : false,
		});

		// the instance of swipebox, it will be set once justifiedGallery is initialized
		let swipeboxInstance = null;

		gallery.on('jg.complete', function () {
			{{ if or (eq $previewType "blur") (eq $previewType "color") }}
				// if there is already some low resolution image data loaded, then we will wait for loading´
				// the hi-res until the justified gallery has done the layout
				$(function() {
					$('.lazy').Lazy({
						afterLoad: function(element) {
							element.css({filter: "none", transition: "filter 1.0s ease-in-out"});
						},
					});
				});
			{{ end }}

			swipeboxInstance = $('.galleryImg').swipebox(
				jQuery.extend({},
					{ {{ $justifiedGalleryParameters | safeJS }} }
				)
			);
		});

		// only include JS code for filter options if there at least one filter option
		{{ if not (eq $filterOptions "[]") }}
			// this function returns a function that can be used by justifiedGallery for filtering images
			function createTagFilter(tagsRegexString) {
				const tagsRegex = RegExp(tagsRegexString);
				return function (entry, index, array) {
						//let title = $(entry).find("a").attr("title");
						let meta = $(entry).find("a").attr("data-meta");
						meta = meta ? JSON.parse(meta) : {};
						
						let tags = meta.Tags;
						tags = tags ? tags : [];
						
						//console.log("title: ", title);
						//console.log("tags: ", tags);

						const include = tags.some(tag => tagsRegex.test(tag));

						// only those images visible in justified gallery should be displayed
						// in swipebox (only <a> with class galleryImg are displayed in swipebox)
						if(include) {
							$(entry).find("a").addClass("galleryImg");
						} else {
							$(entry).find("a").removeClass("galleryImg");
						}

						return include;
					}
			};

			const filterOptions = {{ $filterOptions | safeJS }};
			
			// insert a div for inserting filter buttons before the gallery
			const filterbar = $("<div class='justified-gallery-filterbar'/>");
			gallery.before(filterbar);
	
			let first = true;
			// create a button for each filter entry 
			filterOptions.forEach(tagFilter => {
				const filterButton = $("<button/>");
				filterButton.text(tagFilter.label);
				filterButton.click(function () {
					gallery.justifiedGallery({filter : createTagFilter(tagFilter.tags)});
					// remove select class from all other selt
					filterbar.find('.selected').removeClass('selected');
					filterButton.addClass("selected");
					//swipeboxInstance.refresh();
				});
				filterbar.append(filterButton);

				if(first) {
					filterButton.trigger("click");
				}
				first = false;
			});
		{{ end }}
	});
</script>