Kern GitHub

Responsive Image

Responsive image rendered through Statamic Glide with explicit srcset candidates and intrinsic dimensions for CLS prevention.
Responsive Image is a thin Statamic Glide wrapper for content images. It emits an explicit `srcset` at Kern's standard breakpoints, caps generated sizes with the `width` prop, and includes intrinsic `width`/`height` attributes from Glide to avoid layout shift. The prop is named `asset` rather than `src` because Statamic's `partial` tag reserves `src` for the partial view name. The public asset path form is the simplest working form here and Glide resolves it directly. In copied project code, Statamic asset IDs such as `assets::hero.jpg` are also valid and preserve focal-point data. Consumers can use Glide params directly when they copy the component source: add `format="webp"` to Glide calls for WebP output, or pass focal crop behavior with `fit="crop_focal"` when the source is an asset with focal data. Aspect ratios are deliberately not a prop; use classes such as `aspect-[16/9] object-cover` on the root image.

Responsive image

Default full-width usage

Sharp geometric Kern composition in blue, pink, black, and white

Aspect-ratio crop via class

Cropped geometric Kern composition

Eager + capped width

Small eager-loading Kern demo image 
1{{ partial:docs/previews/primitives/image /}}

Props

Name Type Default Description
asset string Asset path, ID (assets::hero.jpg), or URL passed to Statamic Glide; named asset (not src) because the partial tag reserves src for view selection
alt string '' Alternative text; empty string means decorative only. Content images need real alt text.
width integer 1600 Largest generated image width; srcset candidates are capped at this value
sizes string 100vw Native image sizes attribute
loading string lazy Native loading attribute: lazy|eager
class string Additional classes merged via tw_merge (root element only)

Slots

No slots detected.

Source

 1{{#

 2    @name Responsive Image

 3    @desc Responsive image rendered through Statamic Glide with explicit srcset candidates and intrinsic dimensions for CLS prevention.

 4    @param asset string - Asset path, ID (assets::hero.jpg), or URL passed to Statamic Glide; named asset (not src) because the partial tag reserves src for view selection

 5    @param alt string [''] - Alternative text; empty string means decorative only. Content images need real alt text.

 6    @param width integer [1600] - Largest generated image width; srcset candidates are capped at this value

 7    @param sizes string [100vw] - Native image sizes attribute

 8    @param loading string [lazy] - Native loading attribute: lazy|eager

 9    @param class string - Additional classes merged via tw_merge (root element only)

10#}}

11{{ _target_width = width ?? 1600 }}

12{{ _sizes = sizes ?? '100vw' }}

13{{ _loading = loading ?? 'lazy' }}

14{{ _alt = alt ?? '' }}

15{{ _class = 'block h-auto max-w-full {class}'

16 | tw_merge }}

17{{ glide:generate src="{asset}" width="{_target_width}" }}

18    <img

19        src="{{ url }}"

20        srcset="

21            {{ if _target_width < 480 }}

22                {{ glide src="{asset}" width="{_target_width}" }} {{ _target_width }}w

23            {{ else }}

24                {{ glide src="{asset}" width="480" }} 480w

25                {{ if _target_width > 480 && _target_width < 768 }}

26                    , {{ glide src="{asset}" width="{_target_width}" }} {{ _target_width }}w

27                {{ /if }}

28                {{ if _target_width >= 768 }}

29                    , {{ glide src="{asset}" width="768" }} 768w

30                {{ /if }}

31                {{ if _target_width > 768 && _target_width < 1024 }}

32                    , {{ glide src="{asset}" width="{_target_width}" }} {{ _target_width }}w

33                {{ /if }}

34                {{ if _target_width >= 1024 }}

35                    , {{ glide src="{asset}" width="1024" }} 1024w

36                {{ /if }}

37                {{ if _target_width > 1024 && _target_width < 1280 }}

38                    , {{ glide src="{asset}" width="{_target_width}" }} {{ _target_width }}w

39                {{ /if }}

40                {{ if _target_width >= 1280 }}

41                    , {{ glide src="{asset}" width="1280" }} 1280w

42                {{ /if }}

43                {{ if _target_width > 1280 && _target_width < 1600 }}

44                    , {{ glide src="{asset}" width="{_target_width}" }} {{ _target_width }}w

45                {{ /if }}

46                {{ if _target_width >= 1600 }}

47                    , {{ glide src="{asset}" width="1600" }} 1600w

48                {{ /if }}

49            {{ /if }}

50        "

51        sizes="{{ _sizes }}"

52        width="{{ width }}"

53        height="{{ height }}"

54        alt="{{ _alt }}"

55        loading="{{ _loading }}"

56        decoding="async"

57        class="{{ _class }}"

58    />

59{{ /glide:generate }}

Dependencies

Packages

1composer require marcorieser/tailwind-merge-statamic