1.17.1 Procedures

Procedure: avatar KEY: #:src #:alt #:initials #:size #:shape #:ring #:classes ¶

Create a circular (or rounded) avatar image with an initials fallback.

When src is false, the initials are shown instead, which is useful for user accounts without a profile picture. Everything is plain HTML and CSS, so avatars render with JavaScript disabled.

src

The optional image source URL.

alt

The alternative text describing the depicted person.

initials

Fallback initials shown when no image source is supplied.

size

A size keyword: 'xs, 'sm, 'md, 'lg or 'xl.

shape

A shape keyword: 'circle (default), 'rounded or 'square.

ring

An optional boolean adding a subtle border ring around the avatar.

classes

List of additional utility CSS classes.

(avatar #:src "me.png" #:alt "Josep" #:size 'lg #:ring #t)

Procedure: figcaption content KEY: #:classes ¶

Create an HTML <figcaption> caption element.

content

The caption text string or inline nodes.

classes

List of symbols representing typography CSS classes.

(figcaption "Figure 1: the hygguile logo")

Procedure: figure content KEY: #:caption #:caption-classes #:align #:figure-classes ¶

Create an HTML <figure> element with an optional caption.

content

The figure body, typically an img or picture node.

caption

An optional caption rendered as a figcaption below the body.

caption-classes

List of symbols representing caption typography CSS classes.

align

A symbol controlling alignment, one of 'start, 'center or 'end.

figure-classes

List of symbols representing the wrapper layout CSS classes.

(figure (img #:src "logo.png" #:alt "The logo") #:caption "Figure 1")

Procedure: image-gallery images KEY: #:columns #:gap ¶

Create a responsive, evenly spaced gallery grid for a list of image nodes.

images

A list of image or figure nodes to lay out.

columns

The number of columns to request on wide viewports.

gap

List of symbols representing gap CSS classes.

(image-gallery (list (img #:src "a.png" #:alt "A")
                    (img #:src "b.png" #:alt "B")))

Procedure: img KEY: #:src #:alt #:title #:srcset #:sizes #:width #:height #:loading #:decoding #:fetch-priority #:referrer-policy #:crossorigin #:aspect-ratio #:fit #:rounding #:shadow #:img-classes #:extra-classes ¶

Create an accessible HTML <img> element.

Unlike a bare image tag, alt is always rendered, even when empty, so decorative images are announced correctly by assistive technology. The image is lazy-loaded and asynchronously decoded by default.

src

The image source URL string.

alt

The alternative text. Use an empty string for purely decorative images.

title

An optional advisory title string.

srcset

An optional responsive candidate set string, e.g. "a.png 1x, a@2x.png 2x".

sizes

An optional source-size list describing layout widths to the browser.

width

An optional intrinsic width in pixels, helping avoid layout shift.

height

An optional intrinsic height in pixels, helping avoid layout shift.

loading

A symbol controlling native lazy loading, either 'lazy or 'eager.

decoding

A symbol requesting 'async or 'sync image decoding.

fetch-priority

An optional string such as "high" for above-the-fold hero images.

referrer-policy

An optional referrer policy string.

crossorigin

An optional CORS setting string such as "anonymous".

aspect-ratio

An optional aspect ratio class value, e.g. 'square or "16/9".

fit

A symbol mapping to an object-* fit class: 'cover, 'contain, 'fill or 'none.

rounding

List of symbols representing border radius CSS classes.

shadow

List of symbols representing shadow CSS classes.

img-classes

List of symbols representing base image CSS classes.

extra-classes

List of additional utility CSS classes.

(img #:src "avatar.png" #:alt "Portrait" #:width 320 #:height 320)

Procedure: picture KEY: #:sources #:image #:picture-classes ¶

Create an HTML <picture> element for responsive images and art direction.

The image argument must be the output of img, which acts as the fallback for browsers that do not support picture, modern image formats such as AVIF or WebP, or any of the supplied media queries. Because picture is native HTML, it keeps working with JavaScript disabled.

sources

A list of source elements to try in order.

image

The fallback img node produced by (img ...).

picture-classes

List of symbols representing layout CSS classes for the wrapper.

(picture #:sources (list (source #:type "image/webp" #:srcset "photo.webp"))
         #:image (img #:src "photo.jpg" #:alt "A photo"))

Procedure: source KEY: #:srcset #:media #:type #:sizes #:width #:height ¶

Create an HTML <source> element for use inside picture.

srcset

The candidate image set string.

media

An optional media query string providing art direction, e.g. "(min-width: 800px)".

type

An optional MIME type string such as "image/avif".

sizes

An optional source-size list string.

width

An optional intrinsic width in pixels.

height

An optional intrinsic height in pixels.

(source #:type "image/webp" #:srcset "hero.webp")