feat(photo): blurhash in viewer for loading photo

chuhlomin · Oct 29, 2023 · ce53a34 · ce53a34
1 parent 709b302
commit ce53a34
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/content/photos.css b/content/photos.css
@@ -124,6 +124,8 @@ a:hover {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   position: relative; /* for :before element with blurhash image */
+  transition-property: none; /* override link transition */
+  object-fit: contain; /* avoid image stretching */
 }
 
 .photos .photo.lazy {

diff --git a/templates/photos.gohtml b/templates/photos.gohtml
@@ -45,6 +45,7 @@
 <script>
 var showingViewer = false;
 var photos = {{ . | cleanPhotos | jsonify }};
+var viewerImage = document.getElementById("image");
 
 var view = function(path) {
     if (path === "close") {
@@ -79,7 +80,17 @@ var view = function(path) {
     // disable scrolling
     document.body.style.overflow = "hidden";
 
-    document.getElementById("image").src = "{{ config "PhotosDomain" }}" + photo.Path;
+    var blurhash = document.querySelector("a[href='#" + photo.Path + "']").style.getPropertyValue("--background-blurhash");
+    viewerImage.src = blurhash.substring(5, blurhash.length - 2); // trim "url(' ... ')" from blurhash
+    viewerImage.width = photo.Width;
+    viewerImage.height = photo.Height;
+
+    var imgLoader = new Image();
+    imgLoader.src = "{{ config "PhotosDomain" }}" + photo.Path;
+    imgLoader.onload = function() {
+        viewerImage.src = imgLoader.src;
+    }
+
     {{/* document.getElementById("photo-title").innerHTML = photo.Title; */}}
     document.getElementById("viewer").style.display = "grid";
     var index = photos.indexOf(photo);