This project is still a work in progress.

payload bricks
Fields

Aspect ratio

Field for common media aspect ratios

Installation

npx shadcn@latest add https://payload-bricks.bblank.dev/r/aspect-ratio-field.json

Usage

example-config.ts
import { aspectRatioField } from "@/fields/aspect-ratio"
import type { Block } from "payload"

export const ExampleBlock: Block = {
  slug: "example",
  interfaceName: "Example",
  fields: [
    // your other fields
    aspectRatioField,
  ],
}
example-block.tsx
import type { Example } from "@/payload-types"

export function ExampleBlock(props: Example) {
  const aspectRatio = props.aspectRatio === "original" ? undefined : props.aspectRatio
  return (
    <div style={{aspectRatio}}>
      {/* your media */}
    </div>
  )
}

Field structure

nametype
aspectRatioselectoriginal, 16/9, 4/3, 1/1

Customization

Edit the field's options to edit the ratios your components support.

On this page