From ea811026c7f88925703a26778f7b739549896abf Mon Sep 17 00:00:00 2001
From: Tomas Bzatek <tbzatek@users.sourceforge.net>
Date: Sat, 15 Dec 2018 21:37:46 +0100
Subject: templates/fluid: Add 4k size

Suitable for >30" native 4k screens with no scaling.
---
 templates/fluid/fluid.xml           | 8 ++++++++
 templates/fluid/template_album.html | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/templates/fluid/fluid.xml b/templates/fluid/fluid.xml
index ad6cb89..b62c1d3 100644
--- a/templates/fluid/fluid.xml
+++ b/templates/fluid/fluid.xml
@@ -29,6 +29,14 @@
       <fallback size="original" />
       <threshold no_resize="20" availability="20" quality="5" />
     </size>
+
+    <size name="4k">
+      <landscape w="3290" h="1850" />
+      <portrait w="1850" h="1850" />
+      <quality value="93" />
+      <fallback size="hires" />
+      <threshold no_resize="20" availability="20" quality="5" />
+    </size>
   </image_sizes>
 
   <!--  Global HiDPI settings  -->
diff --git a/templates/fluid/template_album.html b/templates/fluid/template_album.html
index 6f08b81..465c631 100644
--- a/templates/fluid/template_album.html
+++ b/templates/fluid/template_album.html
@@ -20,6 +20,12 @@
 <!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) --><!-- $(ifdef(HAVE_IMG_SIZE_HIRES)) -->
   div.photo#photo-$(ITEM_INDEX) img {  width: $(IMG_SIZE_W__HIRES)px;  height: $(IMG_SIZE_H__HIRES)px;  }<!-- $(endif(HAVE_IMG_SIZE_HIRES)) --><!-- $(END_LIST_PICTURE_ALL_SIZES) -->
 <!-- $(END_IMG_LIST) -->
+}
+
+@media screen and (min-width: 3600px) {<!-- $(BEGIN_IMG_LIST) -->
+<!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) --><!-- $(ifdef(HAVE_IMG_SIZE_4K)) -->
+  div.photo#photo-$(ITEM_INDEX) img {  width: $(IMG_SIZE_W__4K)px;  height: $(IMG_SIZE_H__4K)px;  }<!-- $(endif(HAVE_IMG_SIZE_4K)) --><!-- $(END_LIST_PICTURE_ALL_SIZES) -->
+<!-- $(END_IMG_LIST) -->
 }
 	</style>
 </head>
@@ -61,6 +67,7 @@
       <div class="photo" id="photo-$(ITEM_INDEX)">
         <div class="position_marker" id="i$(ITEM_INDEX)"></div>
         <picture>
+          <!-- $(ifdef(HAVE_IMG_SIZE_4K)) --><source media="(min-width: 3600px)" srcset="$(IMG_SRC__4K)$(ifdef(HAVE_IMG_SIZE_4K_HIDPI_1.5X)), $(IMG_SRC__4K_HIDPI_1.5X) 1.5x$(endif(HAVE_IMG_SIZE_4K_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_4K_HIDPI_2X)), $(IMG_SRC__4K_HIDPI_2X) 2x$(endif(HAVE_IMG_SIZE_4K_HIDPI_2X))"><!-- $(endif(HAVE_IMG_SIZE_4K)) -->
           <!-- $(ifdef(HAVE_IMG_SIZE_HIRES)) --><source media="(min-width: 2300px)" 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: 1700px)" 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: 1699px)" 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))">
-- 
cgit v1.2.3