diff options
| author | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2018-12-15 21:37:46 +0100 |
|---|---|---|
| committer | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2018-12-15 21:37:46 +0100 |
| commit | ea811026c7f88925703a26778f7b739549896abf (patch) | |
| tree | 0a11c4cd38e07106313ffc6c53b43d4d5bbf1149 | |
| parent | 075b1ca114b7f817c64ebd4a5d2b32400d52d2df (diff) | |
| download | cataract-ea811026c7f88925703a26778f7b739549896abf.tar.xz | |
templates/fluid: Add 4k size
Suitable for >30" native 4k screens with no scaling.
| -rw-r--r-- | templates/fluid/fluid.xml | 8 | ||||
| -rw-r--r-- | templates/fluid/template_album.html | 7 |
2 files changed, 15 insertions, 0 deletions
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 @@ -21,6 +21,12 @@ 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> <body> @@ -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))"> |