+ +* [Configuration](#configuration) +* [Credits](#credits) + +A Hugo Module to show a photo gallery. It's very fast/effective, especially if you have lots of images on display. + +This theme is what you see on [staticbattery.com](https://staticbattery.com/) which, at the time of writing this, [scores 100](https://pagespeed.web.dev/report?url=https%3A%2F%2Fstaticbattery.com%2F&form_factor=mobile) at Google PageSpeed for both mobile and desktop. + +[
](https://staticbattery.com/)
+
+## Configuration
+
+The recommended way to add this to your site is to include it as a Hugo Module. See [Gallery Deluxe Starter](https://github.com/bep/gallerydeluxe_starter) for a starter template. Another example is [staticbattery.com](https://github.com/bep/staticbattery.com).
+
+
+### Params
+
+```toml
+[params]
+ [params.gallerydeluxe]
+ # Shuffle the images in the gallery to give the impression of a new gallery each time.
+ shuffle = false
+
+ # Reverse the order of the images in the gallery.
+ reverse = false
+
+ # Enable Exif data in the gallery.
+ # See https://gohugo.io/content-management/image-processing/#exif-data for how to filter tags.
+ enable_exif = false
+
+ # Optional watermark file for the large images.
+ [params.gallerydeluxe.watermark]
+ image = "images/gopher-hero8.png" # relative to /assets
+ posx = "left" # one of "left", "center", "right"
+ posy = "bottom" # one of "top", "center", "bottom"
+```
+
+If you want full control over how your images gets created, create and adjust a copy of [layouts/partials/gallerydeluxe/create-thumbs.html](layouts/partials/gallerydeluxe/create-thumbs.html) into your own project.
+
+
+## Credits
+
+Credit to Dan Schlosser for the [Pig](https://github.com/schlosser/pig.js) JS library.
diff --git a/themes/gallerydeluxe/assets/css/gallerydeluxe/styles.css b/themes/gallerydeluxe/assets/css/gallerydeluxe/styles.css
new file mode 100644
index 0000000..9747535
--- /dev/null
+++ b/themes/gallerydeluxe/assets/css/gallerydeluxe/styles.css
@@ -0,0 +1,121 @@
+.gd-figure:hover {
+ filter: brightness(1.25);
+ cursor: pointer;
+}
+
+.gd-modal-target {
+ width: 300px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: 0.3s;
+}
+
+.gd-modal-target:hover {
+ opacity: 0.7;
+}
+
+.gd-modal {
+ display: none;
+ position: fixed;
+ z-index: 5;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.gd-modal-content-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+/* Modal Content (image) */
+.gd-modal-content {
+ max-width: 100%;
+ max-height: 100%;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ overflow: auto;
+ position: fixed;
+ right: 0;
+ top: 0;
+ object-fit: contain;
+}
+
+.gd-modal-content.gd-modal-thumbnail {
+ backdrop-filter: blur(5px);
+ transition: opacity 0.75s ease;
+ z-index: 10;
+ opacity: 1;
+}
+
+.gd-modal-content.gd-modal-loaded.gd-modal-thumbnail {
+ opacity: 0;
+ pointer-events: none;
+}
+
+.gd-modal-exif {
+ position: absolute;
+ z-index: 20;
+ bottom: 10px;
+ right: 10px;
+ color: #fff;
+ background-color: #8a8a8a;
+ padding: 0.75rem;
+ opacity: 0.75;
+ filter: drop-shadow(-1px -1px 2px #ccc);
+}
+
+.gd-modal-exif-ontimeout {
+ transition: opacity 2s ease-out;
+ opacity: 0;
+}
+
+.gd-modal-exif:hover {
+ opacity: 1;
+ cursor: pointer;
+}
+
+.gd-modal-exif dl dd {
+ display: inline;
+ margin: 0;
+}
+
+.gd-modal-exif dl dd:after {
+ display: block;
+ content: "";
+}
+
+.gd-modal-exif dl dt {
+ display: inline-block;
+ min-width: 100px;
+}
+
+.gd-modal-close {
+ position: absolute;
+ z-index: 20;
+ top: 0px;
+ right: 10px;
+ color: #8a8a8a;
+ font-size: 40px;
+ font-weight: bold;
+ transition: 0.3s;
+}
+
+@media only screen and (max-device-width: 800px) {
+ .gd-modal-close {
+ font-size: 45px;
+ }
+}
+
+.gd-modal-close:hover,
+.gd-modal-close:focus {
+ color: #bbb;
+ text-decoration: none;
+ cursor: pointer;
+}
diff --git a/themes/gallerydeluxe/assets/js/gallerydeluxe/cdn/index.js b/themes/gallerydeluxe/assets/js/gallerydeluxe/cdn/index.js
new file mode 100644
index 0000000..c19895a
--- /dev/null
+++ b/themes/gallerydeluxe/assets/js/gallerydeluxe/cdn/index.js
@@ -0,0 +1,3 @@
+import GalleryDeluxe from '../src/index.js';
+
+GalleryDeluxe.init();
diff --git a/themes/gallerydeluxe/assets/js/gallerydeluxe/src/helpers.js b/themes/gallerydeluxe/assets/js/gallerydeluxe/src/helpers.js
new file mode 100644
index 0000000..0441881
--- /dev/null
+++ b/themes/gallerydeluxe/assets/js/gallerydeluxe/src/helpers.js
@@ -0,0 +1,127 @@
+'use strict';
+
+export function newSwiper(el, callback) {
+ const debug = 0 ? console.log.bind(console, '[swiper]') : function () {};
+
+ const simulateTwoFingers = false;
+
+ // Number of pixels between touch start/end for us to consider it a swipe.
+ const moveThreshold = 50;
+
+ const fingerDistance = (touches) => {
+ return Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
+ };
+
+ var touch = {
+ touchstart: { x: -1, y: -1, x2: -1, y2: -1, d: -1 },
+ touchmove: { x: -1, y: -1, x2: -1, y2: -1, d: -1 },
+ multitouch: false,
+ };
+
+ // direction returns right, left, up or down or empty if below moveThreshold.
+ touch.direction = function () {
+ if (this.touchmove.x == -1) {
+ // A regular click.
+ return '';
+ }
+
+ let distancex = this.touchmove.x - this.touchstart.x;
+ if (Math.abs(distancex) < moveThreshold) {
+ let distancey = this.touchmove.y - this.touchstart.y;
+ if (Math.abs(distancey) < moveThreshold) {
+ return '';
+ }
+ return distancey > 0 ? 'down' : 'up';
+ }
+ return distancex > 0 ? 'right' : 'left';
+ };
+
+ touch.reset = function () {
+ (this.touchstart.x = -1), (this.touchstart.y = -1);
+ (this.touchmove.x = -1), (this.touchmove.y = -1);
+ (this.touchstart.d = -1), (this.touchmove.d = -1);
+ (this.touchstart.x2 = -1), (this.touchstart.y2 = -1);
+ (this.touchmove.x2 = -1), (this.touchmove.y2 = -1);
+ this.multitouch = false;
+ };
+
+ touch.update = function (event, touches) {
+ this.multitouch = this.multitouch || touches.length > 1;
+ if (touches.length > 1) {
+ this[event.type].d = fingerDistance(touches);
+ this[event.type].x2 = touches[1].pageX;
+ this[event.type].y2 = touches[1].pageY;
+ }
+ this[event.type].x = touches[0].pageX;
+ this[event.type].y = touches[0].pageY;
+ };
+
+ const pinch = function (event, touches) {
+ let scale = 1;
+ if (touches.length === 2) {
+ // Two fingers on screen.
+ if (event.scale) {
+ scale = event.scale;
+ } else {
+ scale = touch.touchmove.d / touch.touchstart.d;
+ scale = Math.round(scale * 100) / 100;
+ }
+ if (scale < 1) {
+ scale = 1;
+ }
+ let distancex =
+ ((touch.touchmove.x + touch.touchmove.x2) / 2 - (touch.touchstart.x + touch.touchstart.x2) / 2) * 2;
+ let distancey =
+ ((touch.touchmove.y + touch.touchmove.y2) / 2 - (touch.touchstart.y + touch.touchstart.y2) / 2) * 2;
+
+ el.style.transform = `translate3d(${distancex}px, ${distancey}px, 0) scale(${scale})`;
+ el.style.zIndex = 1000;
+ } else {
+ // One finger on screen.
+ el.style.transform = '';
+ el.style.zIndex = '';
+ }
+ };
+
+ var handleTouch = function (event) {
+ debug('event', event.type);
+ if (typeof event !== 'undefined' && typeof event.touches !== 'undefined') {
+ let touches = event.touches;
+
+ if (simulateTwoFingers && touches.length === 1) {
+ touches = [
+ { pageX: touches[0].pageX, pageY: touches[0].pageY },
+ { pageX: 0, pageY: 0 },
+ ];
+ }
+ switch (event.type) {
+ case 'touchstart':
+ touch.reset();
+ touch.update(event, touches);
+ break;
+ case 'touchmove':
+ touch.update(event, touches);
+ pinch(event, touches);
+ break;
+ case 'touchend':
+ el.style.transform = '';
+ if (!touch.multitouch) {
+ // Only consider a swipe if we have one finger on screen.
+ let direction = touch.direction();
+ debug('direction', direction);
+ if (direction) {
+ callback(direction);
+ }
+ }
+
+ break;
+ default:
+ break;
+ }
+ }
+ };
+
+ el.addEventListener('touchstart', handleTouch, { passive: true });
+ el.addEventListener('touchmove', handleTouch, { passive: true });
+ el.addEventListener('touchend', handleTouch, { passive: true });
+}
diff --git a/themes/gallerydeluxe/assets/js/gallerydeluxe/src/index.js b/themes/gallerydeluxe/assets/js/gallerydeluxe/src/index.js
new file mode 100644
index 0000000..3187b57
--- /dev/null
+++ b/themes/gallerydeluxe/assets/js/gallerydeluxe/src/index.js
@@ -0,0 +1,264 @@
+'use strict';
+
+import * as params from '@params';
+import { Pig } from './pig';
+import { newSwiper } from './helpers';
+
+var debug = 0 ? console.log.bind(console, '[gallery-deluxe]') : function () {};
+
+let GalleryDeluxe = {
+ init: async function () {
+ // One gallery per page (for now).
+ const galleryId = 'gallerydeluxe';
+ const dataAttributeName = 'data-gd-image-data-url';
+ const container = document.getElementById(galleryId);
+ if (!container) {
+ throw new Error(`No element with id ${galleryId} found.`);
+ }
+ const dataUrl = container.getAttribute(dataAttributeName);
+ if (!dataUrl) {
+ throw new Error(`No ${dataAttributeName} attribute found.`);
+ }
+
+ // The image opened in the lightbox.
+ let activeImage;
+ let exifTimeoutId;
+
+ // Lightbox setup.
+ const modal = document.getElementById('gd-modal');
+ const modalClose = modal.querySelector('#gd-modal-close');
+
+ const preventDefault = function (e) {
+ // For iphone.
+ e.preventDefault();
+ };
+
+ let imageWrapper = document.createElement('div');
+ imageWrapper.classList.add('gd-modal-content-wrapper');
+ modal.insertBefore(imageWrapper, modal.firstChild);
+
+ const closeModal = (e) => {
+ if (e) {
+ e.preventDefault();
+ }
+
+ imageWrapper.removeEventListener('touchmove', preventDefault);
+ imageWrapper.removeEventListener('gesturestart', preventDefault);
+
+ // Hide the modal.
+ modal.style.display = 'none';
+ // Enable scrolling.
+ document.body.style.overflow = 'auto';
+ };
+
+ modalClose.addEventListener('click', function () {
+ closeModal();
+ });
+
+ const swipe = function (direction) {
+ debug('swipe', direction);
+ switch (direction) {
+ case 'left':
+ activeImage = activeImage.next;
+ openActiveImage();
+ break;
+ case 'right':
+ activeImage = activeImage.prev;
+ openActiveImage();
+ break;
+ default:
+ closeModal();
+ break;
+ }
+ };
+
+ // Add some basic swipe logic.
+ newSwiper(imageWrapper, function (direction) {
+ swipe(direction);
+ });
+
+ document.addEventListener('keydown', function (e) {
+ switch (e.key) {
+ case 'ArrowLeft':
+ swipe('right');
+ break;
+ case 'ArrowRight':
+ swipe('left');
+ break;
+ case 'Escape':
+ closeModal(e);
+ break;
+ }
+ });
+
+ const openActiveImage = () => {
+ imageWrapper.addEventListener('touchmove', preventDefault);
+ imageWrapper.addEventListener('gesturestart', preventDefault);
+
+ const classLoaded = 'gd-modal-loaded';
+ const classThumbnail = 'gd-modal-thumbnail';
+
+ // Prevent scrolling of the background.
+ document.body.style.overflow = 'hidden';
+ let oldEls = modal.querySelectorAll('.gd-modal-content');
+ let oldElsRemoved = false;
+
+ // Delay the removal of the old elements to make sure we
+ // have a image on screen before we remove the old one,
+ // even on slower connections.
+ const removeOldEls = () => {
+ if (oldElsRemoved) {
+ return;
+ }
+ oldElsRemoved = true;
+ oldEls.forEach((element) => {
+ element.remove();
+ });
+ };
+
+ if (activeImage) {
+ let modal = document.getElementById('gd-modal');
+
+ if (params.enable_exif) {
+ if (exifTimeoutId) {
+ clearTimeout(exifTimeoutId);
+ }
+
+ let exif = modal.querySelector('#gd-modal-exif');
+ const onTimeOutClass = 'gd-modal-exif-ontimeout';
+
+ let child = exif.lastElementChild;
+ while (child) {
+ exif.removeChild(child);
+ child = exif.lastElementChild;
+ }
+ let dl = document.createElement('dl');
+ exif.appendChild(dl);
+
+ const addTag = (tag, value) => {
+ let dt = document.createElement('dt');
+ dt.innerText = camelToTitle(tag);
+ dl.appendChild(dt);
+ let dd = document.createElement('dd');
+ dd.innerText = value;
+ dl.appendChild(dd);
+ };
+
+ let date = new Date(activeImage.exif.Date);
+ var dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().split('T')[0];
+ addTag('Date', dateString);
+ let tags = activeImage.exif.Tags;
+ for (const tag in tags) {
+ addTag(tag, tags[tag]);
+ }
+ exif.classList.remove(onTimeOutClass);
+
+ exifTimeoutId = setTimeout(() => {
+ exif.classList.add(onTimeOutClass);
+ }, 1200);
+ }
+
+ let thumbnail = new Image();
+ thumbnail.classList.add('gd-modal-content');
+ thumbnail.width = activeImage.width;
+ thumbnail.height = activeImage.height;
+ thumbnail.style.aspectRatio = activeImage.width / activeImage.height;
+
+ const fullImage = thumbnail.cloneNode(false);
+
+ thumbnail.classList.add(classThumbnail);
+
+ fullImage.src = activeImage.full;
+ thumbnail.src = activeImage['20'];
+
+ thumbnail.onload = function () {
+ if (thumbnail) {
+ imageWrapper.appendChild(thumbnail);
+ removeOldEls();
+ }
+ };
+
+ fullImage.onload = function () {
+ if (fullImage) {
+ imageWrapper.appendChild(fullImage);
+ fullImage.classList.add(classLoaded);
+ if (thumbnail) {
+ thumbnail.classList.add(classLoaded);
+ }
+ removeOldEls();
+ }
+ };
+
+ modal.style.display = 'block';
+ }
+
+ setTimeout(function () {
+ removeOldEls();
+ }, 1000);
+ };
+
+ // Load the gallery.
+ let images = await (await fetch(dataUrl)).json();
+
+ if (params.shuffle) {
+ // Shuffle them to make it more interesting.
+ images = images
+ .map((value) => ({ value, sort: Math.random() }))
+ .sort((a, b) => a.sort - b.sort)
+ .map(({ value }) => value);
+ } else if (params.reverse) {
+ images = images.reverse();
+ }
+
+ let imagesMap = new Map();
+ let imageData = [];
+ for (let i = 0; i < images.length; i++) {
+ let image = images[i];
+ image.prev = images[(i + images.length - 1) % images.length];
+ image.next = images[(i + 1) % images.length];
+ imageData.push({ filename: image.name, aspectRatio: image.width / image.height, image: image });
+ imagesMap.set(image.name, image);
+ }
+
+ var options = {
+ onClickHandler: function (filename) {
+ debug('onClickHandler', filename);
+ activeImage = imagesMap.get(filename);
+ if (activeImage) {
+ openActiveImage();
+ }
+ },
+ containerId: galleryId,
+ classPrefix: 'gd',
+ spaceBetweenImages: 1,
+ urlForSize: function (filename, size) {
+ return imagesMap.get(filename)[size];
+ },
+ styleForElement: function (filename) {
+ let image = imagesMap.get(filename);
+ if (!image || image.colors.size < 1) {
+ return '';
+ }
+ let colors = image.colors;
+ let first = colors[0];
+ let second = '#ccc';
+ // Some images have only one dominant color.
+ if (colors.length > 1) {
+ second = colors[1];
+ }
+
+ return ` background: linear-gradient(15deg, ${first}, ${second});`;
+ },
+ };
+
+ new Pig(imageData, options).enable();
+ },
+};
+
+function camelToTitle(text) {
+ return text.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+ return str.toUpperCase();
+ });
+}
+
+export default GalleryDeluxe;
diff --git a/themes/gallerydeluxe/assets/js/gallerydeluxe/src/pig.js b/themes/gallerydeluxe/assets/js/gallerydeluxe/src/pig.js
new file mode 100644
index 0000000..513958c
--- /dev/null
+++ b/themes/gallerydeluxe/assets/js/gallerydeluxe/src/pig.js
@@ -0,0 +1,936 @@
+/*! The Pig library is MIT License (MIT) Copyright (c) 2015 Dan Schlosser, see https://github.com/schlosser/pig.js/blob/master/LICENSE.md */
+
+'use strict';
+
+/**
+ * This is a manager for our resize handlers. You can add a callback, disable
+ * all resize handlers, and re-enable handlers after they have been disabled.
+ *
+ * optimizedResize is adapted from Mozilla code:
+ * https://developer.mozilla.org/en-US/docs/Web/Events/resize
+ */
+const optimizedResize = (function () {
+ const callbacks = [];
+ let running = false;
+
+ // fired on resize event
+ function resize() {
+ if (!running) {
+ running = true;
+ if (window.requestAnimationFrame) {
+ window.requestAnimationFrame(runCallbacks);
+ } else {
+ setTimeout(runCallbacks, 66);
+ }
+ }
+ }
+
+ // run the actual callbacks
+ function runCallbacks() {
+ callbacks.forEach(function (callback) {
+ callback();
+ });
+
+ running = false;
+ }
+
+ return {
+ /**
+ * Add a callback to be run on resize.
+ *
+ * @param {function} callback - the callback to run on resize.
+ */
+ add: function (callback) {
+ if (!callbacks.length) {
+ window.addEventListener('resize', resize);
+ }
+
+ callbacks.push(callback);
+ },
+
+ /**
+ * Disables all resize handlers.
+ */
+ disable: function () {
+ window.removeEventListener('resize', resize);
+ },
+
+ /**
+ * Enables all resize handlers, if they were disabled.
+ */
+ reEnable: function () {
+ window.addEventListener('resize', resize);
+ },
+ };
+})();
+
+/**
+ * Inject CSS needed to make the grid work in the .
+ *
+ * @param {string} containerId - ID of the container for the images.
+ * @param {string} classPrefix - the prefix associated with this library that
+ * should be prepended to classnames.
+ * @param {number} transitionSpeed - animation duration in milliseconds
+ */
+function _injectStyle(containerId, classPrefix, transitionSpeed) {
+ const css =
+ '#' +
+ containerId +
+ ' {' +
+ ' position: relative;' +
+ '}' +
+ '.' +
+ classPrefix +
+ '-figure {' +
+ ' background-color: #D5D5D5;' +
+ ' overflow: hidden;' +
+ ' left: 0;' +
+ ' position: absolute;' +
+ ' top: 0;' +
+ ' margin: 0;' +
+ '}' +
+ '.' +
+ classPrefix +
+ '-figure img {' +
+ ' left: 0;' +
+ ' position: absolute;' +
+ ' top: 0;' +
+ ' height: 100%;' +
+ ' width: 100%;' +
+ ' opacity: 0;' +
+ ' transition: ' +
+ (transitionSpeed / 1000).toString(10) +
+ 's ease opacity;' +
+ ' -webkit-transition: ' +
+ (transitionSpeed / 1000).toString(10) +
+ 's ease opacity;' +
+ '}' +
+ '.' +
+ classPrefix +
+ '-figure img.' +
+ classPrefix +
+ '-thumbnail {' +
+ ' -webkit-filter: blur(30px);' +
+ ' filter: blur(30px);' +
+ ' left: auto;' +
+ ' position: relative;' +
+ ' width: auto;' +
+ '}' +
+ '.' +
+ classPrefix +
+ '-figure img.' +
+ classPrefix +
+ '-loaded {' +
+ ' opacity: 1;' +
+ '}';
+
+ const head = document.head || document.getElementsByTagName('head')[0];
+ const style = document.createElement('style');
+
+ style.type = 'text/css';
+ if (style.styleSheet) {
+ // set style for IE8 and below
+ style.styleSheet.cssText = css;
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
+
+ head.appendChild(style);
+}
+
+/**
+ * Extend obj1 with each key in obj2, overriding default values in obj1 with
+ * values in obj2
+ *
+ * @param {object} obj1 - The object to extend.
+ * @param {object} obj2 - The overrides to apply onto obj1.
+ */
+function _extend(obj1, obj2) {
+ for (const i in obj2) {
+ if (obj2.hasOwnProperty(i)) {
+ obj1[i] = obj2[i];
+ }
+ }
+}
+
+/**
+ * Returns the distance from `elem` to the top of the page. This is done by
+ * walking up the node tree, getting the offsetTop of each parent node, until
+ * the top of the page.
+ *
+ * @param {object} elem - The element to compute the offset of.
+ * @returns {number} - distance of `elem` to the top of the page
+ */
+function _getOffsetTop(elem) {
+ let offsetTop = 0;
+ do {
+ if (!isNaN(elem.offsetTop)) {
+ offsetTop += elem.offsetTop;
+ }
+ elem = elem.offsetParent;
+ } while (elem);
+ return offsetTop;
+}
+
+/**
+ * Creates an instance of the progressive image grid, inserting boilerplate
+ * CSS and loading image data. Instantiating an instance of the Pig class
+ * does not cause any images to appear however. After instantiating, call the
+ * `enable()` function on the returned instance:
+ *
+ * var pig = new Pig(imageData, opts);
+ * pig.enable();
+ *
+ * @param {array} imageData - An array of metadata about each image to
+ * include in the grid.
+ * @param {string} imageData[0].filename - The filename of the image.
+ * @param {string} imageData[0].aspectRatio - The aspect ratio of the image.
+ * @param {object} options - An object containing overrides for the default
+ * options. See below for the full list of options
+ * and defaults.
+ *
+ * @returns {object} The Pig instance.
+ */
+export function Pig(imageData, options) {
+ // Global State
+ this.inRAF = false;
+ this.isTransitioning = false;
+ this.minAspectRatioRequiresTransition = false;
+ this.minAspectRatio = null;
+ this.latestYOffset = 0;
+ this.lastWindowWidth = window.innerWidth;
+ this.scrollDirection = 'down';
+
+ // List of images that are loading or completely loaded on screen.
+ this.visibleImages = [];
+
+ // These are the default settings, which may be overridden.
+ this.settings = {
+ /**
+ * Type: string
+ * Default: 'pig'
+ * Description: The class name of the element inside of which images should
+ * be loaded.
+ */
+ containerId: 'pig',
+
+ /**
+ * Type: window | HTMLElement
+ * Default: window
+ * Description: The window or HTML element that the grid scrolls in.
+ */
+ scroller: window,
+
+ /**
+ * Type: string
+ * Default: 'pig'
+ * Description: The prefix associated with this library that should be
+ * prepended to class names within the grid.
+ */
+ classPrefix: 'pig',
+
+ /**
+ * Type: string
+ * Default: 'figure'
+ * Description: The tag name to use for each figure. The default setting is
+ * to use a 
+ * 
+ *
+ ×
+ {{ if $params.enable_exif }}
+
+ {{ end }}
+
+
+
diff --git a/themes/gallerydeluxe_starter/layouts/partials/head.html b/themes/gallerydeluxe_starter/layouts/partials/head.html
new file mode 100644
index 0000000..612cdb2
--- /dev/null
+++ b/themes/gallerydeluxe_starter/layouts/partials/head.html
@@ -0,0 +1,10 @@
+
+{{ $css := resources.Get "css/styles.css" }}
+{{ if hugo.IsProduction}}
+ {{ $css = $css | minify | fingerprint }}
+{{ end }}
+
+{{ with site.Params.plausible_domain }}
+
+{{ end }}
+
diff --git a/themes/gallerydeluxe_starter/layouts/partials/logo.html b/themes/gallerydeluxe_starter/layouts/partials/logo.html
new file mode 100644
index 0000000..9303881
--- /dev/null
+++ b/themes/gallerydeluxe_starter/layouts/partials/logo.html
@@ -0,0 +1,10 @@
+
diff --git a/themes/gallerydeluxe_starter/netlify.toml b/themes/gallerydeluxe_starter/netlify.toml
new file mode 100644
index 0000000..1ad6967
--- /dev/null
+++ b/themes/gallerydeluxe_starter/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+ publish = "public"
+ command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
+
+ [build.environment]
+ HUGO_VERSION = "0.104.2"
diff --git a/themes/gallerydeluxe_starter/static/favicon.svg b/themes/gallerydeluxe_starter/static/favicon.svg
new file mode 100644
index 0000000..e3e0c5b
--- /dev/null
+++ b/themes/gallerydeluxe_starter/static/favicon.svg
@@ -0,0 +1,5 @@
+