Media / foldkit-media

Layout

namespace · packages/media/src/layout.ts:1

export * as Layout from './layout.js'

In the guides

Members

Layout.box

function · packages/media/src/layout.ts:77

function box(
  layout: Layout,
  asset: Pick<ImageAsset, 'width' | 'height'>,
): {
  readonly width: number
  readonly height: number
}

The width and height attributes: the drawn size where the layout fixes one, the original's where it does not. Either way their ratio is the original's, which is what reserves the box before a byte arrives.

Layout.Candidate

interface · packages/media/src/layout.ts:28

interface Candidate {
  readonly request: number
  readonly described: number
}

One srcset entry: the ladder width asked of the provider, and the width the answer has. They differ only above the original's own width, where a provider that does not enlarge answers with the original's.

Layout.candidates

function · packages/media/src/layout.ts:39

function candidates(
  layout: Layout,
  widths: Widths,
  intrinsic: number,
): ReadonlyArray<Candidate>

The widths worth offering for layout: for a fixed image its 1x and 2x, for a constrained one every width up to its 2x, for a full-width one the whole ladder. Widths above the original fetch the original's pixels, so only the first of them is kept.

Layout.Constrained

const · packages/media/src/layout.ts:20

const Constrained: (
  input: { readonly width: number; readonly _tag?: 'Constrained' },
  options?: Schema.MakeOptions,
) => { readonly _tag: 'Constrained'; readonly width: number }

Layout.Fixed

const · packages/media/src/layout.ts:19

const Fixed: (
  input: { readonly width: number; readonly _tag?: 'Fixed' },
  options?: Schema.MakeOptions,
) => { readonly _tag: 'Fixed'; readonly width: number }

Layout.FullWidth

function · packages/media/src/layout.ts:21

function FullWidth(): Layout

Layout.Layout

type · packages/media/src/layout.ts:17

type Layout = typeof LayoutSchema.Type

Layout.ratio

function · packages/media/src/layout.ts:69

function ratio(asset: Pick<ImageAsset, 'width' | 'height'>): string

The original's aspect ratio, as CSS writes one.

Layout.Schema

const · packages/media/src/layout.ts:8

const Schema: Schema.TaggedUnion<{
  readonly Fixed: Schema.TaggedStruct<
    'Fixed',
    { readonly width: Schema.Finite }
  >
  readonly Constrained: Schema.TaggedStruct<
    'Constrained',
    { readonly width: Schema.Finite }
  >
  readonly FullWidth: Schema.TaggedStruct<'FullWidth', {}>
}>

How wide an image is drawn, from which its candidates and sizes follow.

Layout.sizes

function · packages/media/src/layout.ts:61

function sizes(layout: Layout): string

The sizes a layout implies: how wide the image is drawn at each viewport.