From 278b3551049df0883c4162ccfe4c150027893c37 Mon Sep 17 00:00:00 2001
From: Tomas Bzatek <tbzatek@users.sourceforge.net>
Date: Fri, 15 Jan 2021 22:13:31 +0100
Subject: fluid: Rework index item thumbnails

Even the recent Firefox still doesn't support the background-image:image-set
CSS styles for HiDPI thumbnails. Rework this to a regular image placed inside
the <a> tag.
---
 templates/fluid/template_index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'templates/fluid/template_index.html')

diff --git a/templates/fluid/template_index.html b/templates/fluid/template_index.html
index 12fc918..652d649 100644
--- a/templates/fluid/template_index.html
+++ b/templates/fluid/template_index.html
@@ -52,9 +52,15 @@
 <div class="albums">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) -->
-      <div class="index_item" style="background-image:url($(IMG_SRC_THUMB)); background-image:image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))); background-image:-webkit-image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))); background-image:-moz-image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)));">
+      <div class="index_item">
         <div class="position_marker" id="$(IMG_POS_MARKER)"></div>
         <a href="$(ALBUM_SUBPATH)">
+          <span class="album_thumbnail">
+            <picture>
+              <source srcset="$(IMG_SRC_THUMB)$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), $(IMG_SRC__THUMBNAIL_HIDPI_1.5X) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), $(IMG_SRC__THUMBNAIL_HIDPI_2X) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))">
+              <img src="$(IMG_SRC_THUMB)" width="$(IMG_SIZE_W__THUMBNAIL)" height="$(IMG_SIZE_H__THUMBNAIL)" alt="" />
+            </picture>
+          </span>
           <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
           <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
           <!-- $(ifdef(IS_PROTECTED)) --><span class="album_protected_note"><br />(This album is password protected)</span><!-- $(endif(IS_PROTECTED)) -->
-- 
cgit v1.2.3