Add gallery support for JPEGXL

philwareham · philwareham · commit 125f1b7742b9 · 2021-05-06T09:48:29.000+01:00
diff --git a/templates/forms/misc/--variables--gallery.txp b/templates/forms/misc/--variables--gallery.txp
@@ -13,11 +13,11 @@ Default (undefined) is 2rem gap between grid cells.
 
 <txp:hide>
 GALLERY PROGRESSIVELY ENHANCED IMAGE FORMATS -----------------------------------
-All possible (comma seperated) values: 'avif', 'webp'. (e.g. 'avif, webp').
+All possible (comma seperated) values: 'avif', 'webp', 'jxl'. (e.g. 'webp,jxl').
 Default (undefined) = no additional image formats.
 To use modern image formats in addition to legacy image formats, please manually
 upload versions of your images using identical ID numbering (e.g. if you have a
-'24.jpg' image, manually upload a '24.avif' and/or '24.webp' image to the same
-image directory).
+'24.jpg' image, manually upload a '24.avif' and/or '24.webp' and/or '24.jxl'
+image to the same image directory).
 </txp:hide>
 <txp:variable name="--gallery-additional-img-formats" value="" />
diff --git a/templates/forms/misc/-module--gallery--carousel.txp b/templates/forms/misc/-module--gallery--carousel.txp
@@ -8,6 +8,7 @@
                         <li class="glide__slide">
                             <txp:if_variable name="--gallery-additional-img-formats" not value="">
                                 <picture>
+                                    <txp:if_variable name="--gallery-additional-img-formats" match="any" value="jxl"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.jxl" type="image/jxl" /></txp:if_variable>
                                     <txp:if_variable name="--gallery-additional-img-formats" match="any" value="avif"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.avif" type="image/avif" /></txp:if_variable>
                                     <txp:if_variable name="--gallery-additional-img-formats" match="any" value="webp"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.webp" type="image/webp" /></txp:if_variable>
                                     <img decoding="async" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
diff --git a/templates/forms/misc/-module--gallery--grid.txp b/templates/forms/misc/-module--gallery--grid.txp
@@ -7,6 +7,7 @@
                 <div class="layout-<txp:variable name="--gallery-columns" />col">
                     <txp:if_variable name="--gallery-additional-img-formats" not value="">
                         <picture>
+                            <txp:if_variable name="--gallery-additional-img-formats" match="any" value="jxl"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.jxl" type="image/jxl" /></txp:if_variable>
                             <txp:if_variable name="--gallery-additional-img-formats" match="any" value="avif"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.avif" type="image/avif" /></txp:if_variable>
                             <txp:if_variable name="--gallery-additional-img-formats" match="any" value="webp"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.webp" type="image/webp" /></txp:if_variable>
                             <img loading="lazy" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
diff --git a/templates/forms/misc/-module--gallery--vertical-masonry.txp b/templates/forms/misc/-module--gallery--vertical-masonry.txp
@@ -6,6 +6,7 @@
             <txp:images category="gallery" break="" sort="date desc" limit="96">
                 <txp:if_variable name="--gallery-additional-img-formats" not value="">
                     <picture>
+                        <txp:if_variable name="--gallery-additional-img-formats" match="any" value="jxl"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.jxl" type="image/jxl" /></txp:if_variable>
                         <txp:if_variable name="--gallery-additional-img-formats" match="any" value="avif"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.avif" type="image/avif" /></txp:if_variable>
                         <txp:if_variable name="--gallery-additional-img-formats" match="any" value="webp"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.webp" type="image/webp" /></txp:if_variable>
                         <img loading="lazy" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
diff --git a/themes/hive-framework-0.0.9/forms/misc/--variables--gallery.txp b/themes/hive-framework-0.0.9/forms/misc/--variables--gallery.txp
@@ -13,11 +13,11 @@ Default (undefined) is 2rem gap between grid cells.
 
 <txp:hide>
 GALLERY PROGRESSIVELY ENHANCED IMAGE FORMATS -----------------------------------
-All possible (comma seperated) values: 'avif', 'webp'. (e.g. 'avif,webp').
+All possible (comma seperated) values: 'avif', 'webp', 'jxl'. (e.g. 'webp,jxl').
 Default (undefined) = no additional image formats.
 To use modern image formats in addition to legacy image formats, please manually
 upload versions of your images using identical ID numbering (e.g. if you have a
-'24.jpg' image, manually upload a '24.avif' and/or '24.webp' image to the same
-image directory).
+'24.jpg' image, manually upload a '24.avif' and/or '24.webp' and/or '24.jxl'
+image to the same image directory).
 </txp:hide>
 <txp:variable name="--gallery-additional-img-formats" value="" />
diff --git a/themes/hive-framework-0.0.9/forms/misc/-module--gallery--carousel.txp b/themes/hive-framework-0.0.9/forms/misc/-module--gallery--carousel.txp
@@ -8,6 +8,7 @@
                         <li class="glide__slide">
                             <txp:if_variable name="--gallery-additional-img-formats" not value="">
                                 <picture>
+                                    <txp:if_variable name="--gallery-additional-img-formats" match="any" value="jxl"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.jxl" type="image/jxl" /></txp:if_variable>
                                     <txp:if_variable name="--gallery-additional-img-formats" match="any" value="avif"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.avif" type="image/avif" /></txp:if_variable>
                                     <txp:if_variable name="--gallery-additional-img-formats" match="any" value="webp"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.webp" type="image/webp" /></txp:if_variable>
                                     <img decoding="async" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
diff --git a/themes/hive-framework-0.0.9/forms/misc/-module--gallery--grid.txp b/themes/hive-framework-0.0.9/forms/misc/-module--gallery--grid.txp
@@ -7,6 +7,7 @@
                 <div class="layout-<txp:variable name="--gallery-columns" />col">
                     <txp:if_variable name="--gallery-additional-img-formats" not value="">
                         <picture>
+                            <txp:if_variable name="--gallery-additional-img-formats" match="any" value="jxl"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.jxl" type="image/jxl" /></txp:if_variable>
                             <txp:if_variable name="--gallery-additional-img-formats" match="any" value="avif"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.avif" type="image/avif" /></txp:if_variable>
                             <txp:if_variable name="--gallery-additional-img-formats" match="any" value="webp"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.webp" type="image/webp" /></txp:if_variable>
                             <img loading="lazy" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
diff --git a/themes/hive-framework-0.0.9/forms/misc/-module--gallery--vertical-masonry.txp b/themes/hive-framework-0.0.9/forms/misc/-module--gallery--vertical-masonry.txp
@@ -6,6 +6,7 @@
             <txp:images category="gallery" break="" sort="date desc" limit="96">
                 <txp:if_variable name="--gallery-additional-img-formats" not value="">
                     <picture>
+                        <txp:if_variable name="--gallery-additional-img-formats" match="any" value="jxl"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.jxl" type="image/jxl" /></txp:if_variable>
                         <txp:if_variable name="--gallery-additional-img-formats" match="any" value="avif"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.avif" type="image/avif" /></txp:if_variable>
                         <txp:if_variable name="--gallery-additional-img-formats" match="any" value="webp"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.webp" type="image/webp" /></txp:if_variable>
                         <img loading="lazy" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
