diff options
| author | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2021-01-15 22:13:31 +0100 |
|---|---|---|
| committer | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2021-01-15 22:13:31 +0100 |
| commit | 278b3551049df0883c4162ccfe4c150027893c37 (patch) | |
| tree | 3db8ab6420d7f5f969b7b88cf6716ac77bd03c2a /templates/fluid/template_index.html | |
| parent | e95ef0305b117303eb742f31641c8c8cefbee9a0 (diff) | |
| download | cataract-278b3551049df0883c4162ccfe4c150027893c37.tar.xz | |
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.
Diffstat (limited to 'templates/fluid/template_index.html')
| -rw-r--r-- | templates/fluid/template_index.html | 8 |
1 files changed, 7 insertions, 1 deletions
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)) --> |