From ddd9556689af055355a07cf2766fe95eaed4e38e Mon Sep 17 00:00:00 2001
From: Tomas Bzatek <tbzatek@users.sourceforge.net>
Date: Sun, 2 Oct 2016 16:58:27 +0200
Subject: Add support for HiDPI images

This works by creating corresponding hidpi image sizes on startup and
letting the machinery generate high resolution images from the source
images (no way to use supplied images). However since browsers expect
exact image dimension multiples for the particular scale factor,
a reference image size (scale factor 1.0x) must be read first, then
cropped to match reference aspect ratio and resized to exact dimensions.
That way pixel-perfect results can be achieved for the chosen scale
factor.

TODO: the CSS background-image: image-set() tags are not supported
on Firefox.
TODO: try the 1.5x scale factor
---
 templates/fluid/fluid.xml           | 26 ++++++++++++++++++++++++--
 templates/fluid/template_album.html |  6 +++---
 templates/fluid/template_index.html |  6 +++---
 3 files changed, 30 insertions(+), 8 deletions(-)

(limited to 'templates/fluid')

diff --git a/templates/fluid/fluid.xml b/templates/fluid/fluid.xml
index 376d56d..ff4baee 100644
--- a/templates/fluid/fluid.xml
+++ b/templates/fluid/fluid.xml
@@ -31,6 +31,26 @@
     </size>
   </image_sizes>
 
+  <!--  Global HiDPI settings  -->
+  <!--  For each defined image size new HiDPI image sizes will be generated
+        automatically. Means the resulting HiDPI image files will have their own
+        subdirectory and all existing template macros are available as well.
+        The resulting image size name will be of format "SIZE_NAME_HIDPI_1.5X"
+        where SIZE_NAME is name of the reference image size and "1.5X" is the
+        particular size factor.  -->
+  <hidpi enabled="yes">
+    <!--  Specify requested size factors, separated by comma (typically '2x'
+          or '1.5x, 2x').  -->
+    <sizes>2x</sizes>
+    <!--  Optionally allow upscaling. Represents a percentage how much smaller
+          image can still be used for upscaling. Set to 0 to disable upscaling
+          completely.  -->
+    <threshold upscale="33" />
+    <!--  Compression artifacts may be less noticeable since the actual pixel
+          pitch is smaller. Lower the compression quality to save bandwidth.  -->
+    <quality value="90" thumbnail="60" />
+  </hidpi>
+
   <resize>
     <!--  Use this section to tweak resizing methods. For the moment ImageMagick
           is the only supported method, being used from the beginning of the project,
@@ -42,8 +62,10 @@
             arguments defining target dimensions. For the rest of arguments
             standard convert(1) command syntax is used.  -->
       <!--  In case an option string is empty, internal defaults are used.  -->
-      <resize_options>-set option:filter:blur 0.6 -filter Gaussian -thumbnail ${WIDTH}x${HEIGHT}</resize_options>
-      <thumbnail_options>-set option:filter:blur 0.6 -filter Gaussian -thumbnail ${WIDTH}x${HEIGHT}</thumbnail_options>
+      <!--  Please see http://www.imagemagick.org/Usage/resize/#resize for resize
+            modifiers (e.g. we use the '!' flag to correct off-by-one errors).  -->
+      <resize_options>-set option:filter:blur 0.6 -filter Gaussian -resize ${WIDTH}x${HEIGHT}!</resize_options>
+      <thumbnail_options>-set option:filter:blur 0.6 -filter Gaussian -thumbnail ${WIDTH}x${HEIGHT}!</thumbnail_options>
     </ImageMagick>
   </resize>
 
diff --git a/templates/fluid/template_album.html b/templates/fluid/template_album.html
index 721fc15..dbfb8d5 100644
--- a/templates/fluid/template_album.html
+++ b/templates/fluid/template_album.html
@@ -61,9 +61,9 @@
       <div class="photo" id="photo-$(ITEM_INDEX)">
         <div class="position_marker" id="i$(ITEM_INDEX)"></div>
         <picture>
-          <!-- $(ifdef(HAVE_IMG_SIZE_HIRES)) --><source media="(min-width: 2100px)" srcset="$(IMG_SRC__HIRES)"><!-- $(endif(HAVE_IMG_SIZE_HIRES)) -->
-          <!-- $(ifdef(HAVE_IMG_SIZE_ORIGINAL)) --><source media="(min-width: 1600px)" srcset="$(IMG_SRC__ORIGINAL)"><!-- $(endif(HAVE_IMG_SIZE_ORIGINAL)) -->
-          <source media="(max-width: 1600px)" srcset="$(IMG_SRC)">
+          <!-- $(ifdef(HAVE_IMG_SIZE_HIRES)) --><source media="(min-width: 2100px)" srcset="$(IMG_SRC__HIRES)$(ifdef(HAVE_IMG_SIZE_HIRES_HIDPI_1.5X)), $(IMG_SRC__HIRES_HIDPI_1.5X) 1.5x$(endif(HAVE_IMG_SIZE_HIRES_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_HIRES_HIDPI_2X)), $(IMG_SRC__HIRES_HIDPI_2X) 2x$(endif(HAVE_IMG_SIZE_HIRES_HIDPI_2X))"><!-- $(endif(HAVE_IMG_SIZE_HIRES)) -->
+          <!-- $(ifdef(HAVE_IMG_SIZE_ORIGINAL)) --><source media="(min-width: 1600px)" srcset="$(IMG_SRC__ORIGINAL)$(ifdef(HAVE_IMG_SIZE_ORIGINAL_HIDPI_1.5X)), $(IMG_SRC__ORIGINAL_HIDPI_1.5X) 1.5x$(endif(HAVE_IMG_SIZE_ORIGINAL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_ORIGINAL_HIDPI_2X)), $(IMG_SRC__ORIGINAL_HIDPI_2X) 2x$(endif(HAVE_IMG_SIZE_ORIGINAL_HIDPI_2X))"><!-- $(endif(HAVE_IMG_SIZE_ORIGINAL)) -->
+          <source media="(max-width: 1600px)" srcset="$(IMG_SRC)$(ifdef(HAVE_IMG_SIZE_PREVIEW_HIDPI_1.5X)), $(IMG_SRC__PREVIEW_HIDPI_1.5X) 1.5x$(endif(HAVE_IMG_SIZE_PREVIEW_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_PREVIEW_HIDPI_2X)), $(IMG_SRC__PREVIEW_HIDPI_2X) 2x$(endif(HAVE_IMG_SIZE_PREVIEW_HIDPI_2X))">
           <img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(value(BORDER_STYLE))"/>
         </picture>
         <div class="photo-content">
diff --git a/templates/fluid/template_index.html b/templates/fluid/template_index.html
index 74833dd..d0b6e8b 100644
--- a/templates/fluid/template_index.html
+++ b/templates/fluid/template_index.html
@@ -42,8 +42,8 @@
 
 <div class="albums">
   <!-- $(BEGIN_IMG_LIST) -->
-    <!-- $(BEGIN_LIST_PICTURE) -->
-      <div class="index_item" style="background-image:url($(IMG_SRC_THUMB))">
+    <!-- $(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="position_marker" id="$(IMG_POS_MARKER)"></div>
         <a href="$(ALBUM_SUBPATH)">
           <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
@@ -52,7 +52,7 @@
           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
         </a>
       </div>
-    <!-- $(END_LIST_PICTURE) -->
+    <!-- $(END_LIST_PICTURE_ALL_SIZES) -->
     <!-- $(BEGIN_LIST_SEPARATOR) -->
       <div class="separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
     <!-- $(END_LIST_SEPARATOR) -->
-- 
cgit v1.2.3