rhi/gallery
1
0
Fork 0
Code Issues 5 Pull requests 1 Releases Wiki Activity

<picture> elements for jxls

Browse source
This commit is contained in:
rhiannon morris 2023-01-17 18:45:12 +01:00
parent 0f20753808
commit 84f822f73b
4 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
make-pages/GalleryPage.hs
View file

@ -15,7 +15,7 @@ import qualified Data.HashSet as HashSet
import Data.List (intersperse, groupBy, sortBy, sortOn) import Data.List (intersperse, groupBy, sortBy, sortOn)
import Data.Maybe import Data.Maybe
import qualified Data.Text.Lazy as Lazy import qualified Data.Text.Lazy as Lazy
import System.FilePath (takeDirectory, joinPath, splitPath) import System.FilePath (takeDirectory, joinPath, splitPath, (-<.>))
import GHC.Exts (Down (..), the) import GHC.Exts (Down (..), the)
make :: Text -> GalleryInfo -> [(FilePath, Info)] -> Lazy.Text make :: Text -> GalleryInfo -> [(FilePath, Info)] -> Lazy.Text
@ -158,7 +158,10 @@ makeItem nsfw file info@(Info {bg}) = [b|@0
data-tags="$tags'"> data-tags="$tags'">
<figure> <figure>
<a href="$dir"> <a href="$dir">
<img src="$thumb" loading=lazy$bgStyle> <picture>
<source srcset="$thumbJxl" type=image/jxl>
<img src="$thumb" loading=lazy$bgStyle>
</picture>
</a> </a>
<figcaption> <figcaption>
<span class=date>$date'</span> <span class=date>$date'</span>
@ -169,7 +172,7 @@ makeItem nsfw file info@(Info {bg}) = [b|@0
where where
title = fromMaybe (#title info) $ #galleryTitle info title = fromMaybe (#title info) $ #galleryTitle info
dir = takeDirectory file dir = takeDirectory file
thumb = getThumb dir info thumb = getThumb dir info; thumbJxl = thumb -<.> "jxl"
nsfw' = if nsfw && #anyNsfw info then [b| nsfw|] else "" nsfw' = if nsfw && #anyNsfw info then [b| nsfw|] else ""
tags' = fold $ intersperse ";" $ map fromText $ tagsFor nsfw info tags' = fold $ intersperse ";" $ map fromText $ tagsFor nsfw info
date = #latestDate info nsfw date = #latestDate info nsfw

8
make-pages/SinglePage.hs
View file

@ -12,7 +12,7 @@ import Data.List (sort, intersperse)
import Data.Maybe (fromMaybe, isNothing, isJust) import Data.Maybe (fromMaybe, isNothing, isJust)
import qualified Data.Text as Strict import qualified Data.Text as Strict
import qualified Data.Text.Lazy as Lazy import qualified Data.Text.Lazy as Lazy
import System.FilePath (joinPath, splitPath) import System.FilePath (joinPath, splitPath, (-<.>))
import qualified Data.HashSet as Set import qualified Data.HashSet as Set
import Data.Traversable import Data.Traversable
@ -57,6 +57,7 @@ make' root siteName prefix nsfw _dataDir dir
let download0 = fromMaybe (bigFile path0) download0' let download0 = fromMaybe (bigFile path0) download0'
let path0' = pageFile path0 let path0' = pageFile path0
let path0'Jxl = path0' -<.> "jxl"
let descSection = makeDesc $ descFor nsfw info let descSection = makeDesc $ descFor nsfw info
let tagsList = makeTags undir $ tagsFor nsfw info let tagsList = makeTags undir $ tagsFor nsfw info
@ -155,7 +156,10 @@ make' root siteName prefix nsfw _dataDir dir
<figure id=mainfig> <figure id=mainfig>
$warning' $warning'
<a id=mainlink href="$download0" title="download full version"> <a id=mainlink href="$download0" title="download full version">
<img id=mainimg src="$path0'" alt=""> <picture id=mainimg>
<source srcset="$path0'Jxl" type=image/jxl>
<img src="$path0'" alt="">
</picture>
</a> </a>
</figure> </figure>

5
script/single.js
View file

@ -45,7 +45,10 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
mainlink.tabIndex = -1; mainlink.tabIndex = -1;
} }
mainimg.src = src; let jxl = src.replace(/\..*?$/, ".jxl");
mainimg.querySelector('img').src = src;
mainimg.querySelector('source').srcset = jxl;
mainfig.dataset.width = width; mainfig.dataset.width = width;
mainfig.dataset.height = height; mainfig.dataset.height = height;
mainlink.href = href; mainlink.href = href;

2
style/shiny/single.css
View file

@ -27,7 +27,7 @@
box-shadow: var(--focus-box); box-shadow: var(--focus-box);
} }
#mainimg { #mainimg, #mainimg img {
display: block; display: block;
} }