diff options
Diffstat (limited to 'templates/fluid')
| -rw-r--r-- | templates/fluid/fluid.xml | 26 | ||||
| -rw-r--r-- | templates/fluid/template_album.html | 6 | ||||
| -rw-r--r-- | templates/fluid/template_index.html | 6 |
3 files changed, 30 insertions, 8 deletions
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) --> |