Add the dominant colors in the background

README.md

@@ -1,11 +1,27 @@
-# Gallery Deluxe
+* [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.
 
-See the annotated [index.html](exampleSite/layouts/index.html) for a brief explanation about how to set this up. Note that we currently only support 1 gallery per page. **Note** that the `exampleSite` is currently configured to load a [directory from bep's MacBook](https://github.com/bep/gallerydeluxe/blob/main/exampleSite/config.toml#L38). If you want to take this for a spin, modify that so it points to a directory with some JPEGs on your PC.
-
 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.
 
 [<img src="https://raw.githubusercontent.com/bep/gallerydeluxe/main/images/tn.jpg">](https://staticbattery.com/)
 
+## Configuration
+
+```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 = true
+```
+
+Also See the annotated [index.html](exampleSite/layouts/index.html) for a brief explanation about how to set this up. Note that we currently only support 1 gallery per page. **Note** that the `exampleSite` is currently configured to load a [directory from bep's MacBook](https://github.com/bep/gallerydeluxe/blob/main/exampleSite/config.toml#L38). If you want to take this for a spin, modify that so it points to a directory with some JPEGs on your PC.
+
+
+## Credits
+
 Credit to Dan Schlosser for the [Pig](https://github.com/schlosser/pig.js) JS library. 

assets/css/gallerydeluxe/styles.css

@@ -1,7 +1,3 @@
-.gd-figure {
-  background-color: #565657 !important;
-}
-
 .gd-figure:hover {
   filter: brightness(1.25);
   cursor: pointer;

assets/js/gallerydeluxe/src/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-//import * as params from '@params';
+import * as params from '@params';
 import { Pig } from './pig';
 import { newSwiper } from './helpers';
 
@@ -153,11 +153,15 @@ let GalleryDeluxe = {
 		// Load the gallery.
 		let images = await (await fetch(dataUrl)).json();
 
-		// 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);
+		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 = [];
@@ -183,6 +187,21 @@ let GalleryDeluxe = {
 			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();

assets/js/gallerydeluxe/src/pig.js

@@ -293,6 +293,15 @@ export function Pig(imageData, options) {
 			return '/img/' + size.toString(10) + '/' + filename;
 		},
 
+		/**
+		 * Get the a custom style for the container element.
+		 *
+		 *  * @param {string} filename - The filename of the image.
+		 */
+		styleForElement: function (filename) {
+			return '';
+		},
+
 		/**
 		 * Get a callback with the filename of the image
 		 * which was clicked.
@@ -810,6 +819,7 @@ ProgressiveImage.prototype.load = function () {
 			// Show thumbnail
 			if (!this.thumbnail) {
 				this.thumbnail = new Image();
+
 				this.thumbnail.src = this.pig.settings.urlForSize(this.filename, this.pig.settings.thumbnailSize);
 				this.thumbnail.className = this.classNames.thumbnail;
 				this.thumbnail.onload = function () {
@@ -885,6 +895,12 @@ ProgressiveImage.prototype.getElement = function () {
 	if (!this.element) {
 		this.element = document.createElement(this.pig.settings.figureTagName);
 		this.element.className = this.classNames.figure;
+
+		let style = this.pig.settings.styleForElement(this.filename);
+		if (this.style) {
+			this.element.style = style;
+		}
+
 		if (this.pig.settings.onClickHandler !== null) {
 			this.element.addEventListener(
 				'click',

exampleSite/assets/css/styles.css

@@ -3,7 +3,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: #000;
+  background-color: #101010;
 }
 
 .logo {

exampleSite/config.toml

@@ -2,6 +2,14 @@ baseURL      = "https://www.staticbattery.com/"
 title        = "staticbattery.com"
 disableKinds = ["section", "taxonomy", "term"]
 
+[params]
+    [params.gallerydeluxe]
+        # Shuffle the images in the gallery to give the impression of a new gallery each page load.
+        shuffle = false
+
+        # Reverse the order of the images in the gallery.
+        reverse = true
+
 [caches]
     [caches.images]
         dir    = ':cacheDir/gallerydeluxe'
@@ -18,9 +26,6 @@ disableKinds = ["section", "taxonomy", "term"]
         [server.headers.values]
             Referrer-Policy = 'strict-origin-when-cross-origin'
 
-[params]
-    [params.gallerydeluxe]
-
 [module]
     [[module.mounts]]
         source = "assets"

layouts/partials/gallerydeluxe/init.html

@@ -6,12 +6,19 @@
   {{ $images := $gallery.Resources.Match "**.jpg" }}
   {{ range $images }}
     {{ $thumbs := partial "gallerydeluxe/create-thumbs.html" . }}
+    {{ $20 := (index $thumbs "20") }}
+    {{ $colors := slice }}
+    {{ if (ge hugo.Version "0.104") }}
+      {{/* .Colors method was added in Hugo 0.104.0 */}}
+      {{ $colors = $20.Colors }}
+    {{ end }}
     {{ $m :=  dict
       "name" .Name
       "full" .RelPermalink
       "width" .Width
       "height" .Height
-      "20" (index $thumbs "20").RelPermalink
+      "colors" $colors
+      "20" $20.RelPermalink
       "100" (index $thumbs "100").RelPermalink
       "250" (index $thumbs "250").RelPermalink
       "500" (index $thumbs "500").RelPermalink