meta: update comments shortcodes + partials

thuliteio · Jan 30, 2024 · e5881ed · e5881ed
1 parent 69e5a25
commit e5881ed
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 12 deletions.
diff --git a/assets/scss/components/_images.scss b/assets/scss/components/_images.scss
@@ -3,6 +3,10 @@ img {
   height: auto;
 }
 
+img[data-sizes="auto"] {
+  display: block; 
+}
+
 img, picture {
   font-size: 0;
 }

diff --git a/layouts/partials/figure.html b/layouts/partials/figure.html
@@ -62,7 +62,8 @@
 @contect {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @context {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @context {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
-@context {string} [process] = "" # "fill 1680x720" for example
+@context {string} [process] = "" # "fill 1600x900" for example
+@context {string} [lqip] = "" # "16x webp q20" or "21x webp q20" for example
 @context {string} [decoding] The img element's decoding attribute.
 @context {string} [fetchpriority] The img element's fetchpriority attribute.
 @context {string} [loading] The img element's loading attribute.
@@ -84,7 +85,8 @@
     "width" 768
     "sizes" "auto"
     "formats" (slice "webp" "jpeg")
-    "process" "fill 1680x720"
+    "process" "fill 1600x900"
+    "lqip" "16x webp q20"
     "decoding" "async"
     "fetchpriority" "auto"
     "loading" "eager"

diff --git a/layouts/partials/img.html b/layouts/partials/img.html
@@ -62,7 +62,8 @@
 @contect {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @context {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @context {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
-@context {string} [process] = "" # "fill 1680x720" for example
+@context {string} [process] = "" # "fill 1600x900" for example
+@context {string} [lqip] = "" # "16x webp q20" or "21x webp q20" for example
 @context {string} [decoding] The img element's decoding attribute.
 @context {string} [fetchpriority] The img element's fetchpriority attribute.
 @context {string} [loading] The img element's loading attribute.
@@ -83,7 +84,8 @@
     "width" 768
     "sizes" "auto"
     "formats" (slice "webp" "jpeg")
-    "process" "fill 1680x720"
+    "process" "fill 1600x900"
+    "lqip" "16x webp q20"
     "decoding" "async"
     "fetchpriority" "auto"
     "loading" "eager"

diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html
@@ -62,7 +62,8 @@
 @contect {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @context {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @context {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
-@context {string} [process] = "" # "fill 1680x720" for example
+@context {string} [process] = "" # "fill 1600x900" for example
+@context {string} [lqip] = "" # "16x webp q20" or "21x webp q20" for example
 @context {string} [decoding] The img element's decoding attribute.
 @context {string} [fetchpriority] The img element's fetchpriority attribute.
 @context {string} [loading] The img element's loading attribute.
@@ -83,7 +84,8 @@
     "width" 768
     "sizes" "auto"
     "formats" (slice "webp" "jpeg")
-    "process" "fill 1680x720"
+    "process" "fill 1600x900"
+    "lqip" "16x webp q20"
     "decoding" "async"
     "fetchpriority" "auto"
     "loading" "eager"

diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
@@ -75,7 +75,8 @@
 @param {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @param {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @param {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
-@param {string} [process] = "" # "fill 1680x720" for example
+@param {string} [process] = "" # "fill 1600x900" for example
+@param {string} [lqip] = "" # "16x webp q20" or "21x webp q20" for example
 @param {string} [decoding] The img element's decoding attribute.
 @param {string} [fetchpriority] The img element's fetchpriority attribute.
 @param {string} [loading] The img element's loading attribute.
@@ -97,7 +98,8 @@
     width=768
     sizes="75w"
     formats="webp, jpeg"
-    process="fill 1680x720"
+    process="fill 1600x900"
+    lqip="16x webp q20"
     decoding="async"
     fetchpriority="auto"
     loading="eager"

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
@@ -75,7 +75,8 @@
 @param {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @param {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @param {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
-@param {string} [process] = "" # "fill 1680x720" for example
+@param {string} [process] = "" # "fill 1600x900" for example
+@param {string} [lqip] = "" # "16x webp q20" or "21x webp q20" for example
 @param {string} [decoding] The img element's decoding attribute.
 @param {string} [fetchpriority] The img element's fetchpriority attribute.
 @param {string} [loading] The img element's loading attribute.
@@ -96,7 +97,8 @@
     width=768
     sizes="75w"
     formats="webp, jpeg"
-    process="fill 1680x720"
+    process="fill 1600x900"
+    lqip="16x webp q20"
     decoding="async"
     fetchpriority="auto"
     loading="eager"

diff --git a/layouts/shortcodes/picture.html b/layouts/shortcodes/picture.html
@@ -75,7 +75,8 @@
 @param {int} [width] The display width of the image, in pixels, falling back to 100% of the viewport width.
 @param {string} [sizes] = "" # "100vw", "75vw", or "auto" for example
 @param {string slice} [formats] A slice of image formats, ordered by precedence, to use when creating images for the srcset attribute of each source element.
-@param {string} [process] = "" # "fill 1680x720" for example
+@param {string} [process] = "" # "fill 1600x900" for example
+@param {string} [lqip] = "" # "16x webp q20" or "21x webp q20" for example
 @param {string} [decoding] The img element's decoding attribute.
 @param {string} [fetchpriority] The img element's fetchpriority attribute.
 @param {string} [loading] The img element's loading attribute.
@@ -96,7 +97,8 @@
     width=768
     sizes="75w"
     formats="webp, jpeg"
-    process="fill 1680x720"
+    process="fill 1600x900"
+    lqip="16x webp q20"
     decoding="async"
     fetchpriority="auto"
     loading="eager"