Compare commits

...

3 Commits

  1. 2
      assets/css/main.css
  2. 7
      layouts/partials/image.html
  3. 3
      layouts/shortcodes/image.html

2
assets/css/main.css

@ -17,6 +17,7 @@ body {
background-color: var(--background); background-color: var(--background);
color: var(--text); color: var(--text);
font-family: sans-serif; font-family: sans-serif;
font-size: 1.2rem;
line-height: 1.5; line-height: 1.5;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -181,6 +182,7 @@ pre code {
blockquote { blockquote {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin-left: 0;
font-style: italic; font-style: italic;
border-left: .3rem solid var(--beetbox-pink); border-left: .3rem solid var(--beetbox-pink);
border-radius: .4rem; border-radius: .4rem;

7
layouts/partials/image.html

@ -4,12 +4,15 @@ Renders an image with the given class, alt, and sizes.
@context {image} the image resource. @context {image} the image resource.
@context {sizes} each size to include in the srcset. @context {sizes} each size to include in the srcset.
@context {classes} classes for the image. @context {classes} classes for the image.
@context {ext} extension of output image.
*/}} */}}
{{- $alt := .alt }} {{- $alt := .alt }}
{{- $img := .image }} {{- $img := .image }}
{{- $sizes := .sizes }} {{- $sizes := .sizes }}
{{- $classes := .classes }} {{- $classes := .classes }}
{{- $ext := .ext }}
{{- $srcsetParts := slice }} {{- $srcsetParts := slice }}
{{- $sizesParts := slice }} {{- $sizesParts := slice }}
@ -18,7 +21,7 @@ Renders an image with the given class, alt, and sizes.
{{- if .image }} {{- if .image }}
{{/* Loop through widths to resize images and build attributes */}} {{/* Loop through widths to resize images and build attributes */}}
{{- range $index, $width := $sizes }} {{- range $index, $width := $sizes }}
{{- $resizeSpec := printf "%dx webp q90" $width }} {{- $resizeSpec := printf "%dx %s q90" $width $ext }}
{{- $resized := ($img.Resize $resizeSpec) }} {{- $resized := ($img.Resize $resizeSpec) }}
{{- $srcsetParts = $srcsetParts | append (printf "%s %dw" $resized.RelPermalink $width) }} {{- $srcsetParts = $srcsetParts | append (printf "%s %dw" $resized.RelPermalink $width) }}
@ -33,7 +36,7 @@ Renders an image with the given class, alt, and sizes.
{{- end }} {{- end }}
{{- $smallestWidth := index $sizes 0 }} {{- $smallestWidth := index $sizes 0 }}
{{- $smallestResizeSpec := printf "%dx webp q90" $smallestWidth }} {{- $smallestResizeSpec := printf "%dx %s q90" $smallestWidth $ext }}
{{- $smallest := ($img.Resize $smallestResizeSpec) }} {{- $smallest := ($img.Resize $smallestResizeSpec) }}
{{- $src := $smallest.RelPermalink }} {{- $src := $smallest.RelPermalink }}
<img class="{{ delimit $classes " " }}" <img class="{{ delimit $classes " " }}"

3
layouts/shortcodes/image.html

@ -4,4 +4,5 @@
"image" $image "image" $image
"alt" (.Get "alt") "alt" (.Get "alt")
"sizes" (slice 320 480 600) "sizes" (slice 320 480 600)
"classes" (slice "fill-wh")) }} "classes" (slice "fill-wh"))
"ext" (.Get "ext" | default "webp" ) }}

Loading…
Cancel
Save