Responsive picture element for FAL images.
Arguments:
image FAL File or FileReference (required)
maxWidth layout width of the default source and img fallback (default 1200)
mobileWidth srcset width below tabletBreakpoint (default: min(480, maxWidth))
tabletWidth srcset width from tabletBreakpoint to desktopBreakpoint (default: min(768, maxWidth))
tabletBreakpoint min-width (px) where the tablet source takes over (default 768, matches tokens.scss $breakpoints.tablet)
desktopBreakpoint min-width (px) where the desktop/maxWidth source takes over (default 1440, matches tokens.scss $breakpoints.desktop)
class css class(es) for the img tag
loading loading attribute (e.g. lazy)
alt alt text — omit to fall back to the file's alternative metadata
decorative when 1: alt="" + aria-hidden="true" (background/ornamental images)
id id attribute for the img tag
cropVariant crop variant for every source that has no breakpoint-specific
override below (default 'default')
desktopCropVariant crop variant for the desktop source only (default: cropVariant)
tabletCropVariant crop variant for the tablet source only (default: cropVariant)
mobileCropVariant crop variant for the mobile source only (default: cropVariant)
Per-breakpoint art direction: pass e.g. desktopCropVariant="desktop" to use a
different named FAL crop variant for that source. TYPO3 core does NOT verify
the name exists on the given image — f:uri.image/f:image silently render
UNCROPPED (not an error, not a fallback to "default") if the FileReference's
stored crop JSON has no such key — so only pass a breakpoint-specific variant
name once you know it's actually been cropped on every image this partial
will render for that call site.
Mobile-first min-width sources (matches the theme's own breakpoints), listed
highest-first since uses the first matching . mobileWidth/
tabletWidth default to maxWidth itself when the caller renders something
smaller than the tier default (e.g. a 120px logo doesn't get a 480px mobile
source) — pass them explicitly for a genuinely different crop per tier.
Each tier ships 1x + 2x. maxWidth processing ("m") never upscales, so
candidates cap at the original file size regardless.
SVGs render as a plain unprocessed img.
{mobileWidth}{maxWidth}480{tabletWidth}{maxWidth}768{alt}{image.alternative}