Fields
Aspect ratio
Field for common media aspect ratios
Installation
npx shadcn@latest add https://payload-bricks.bblank.dev/r/aspect-ratio-field.jsonUsage
import { aspectRatioField } from "@/fields/aspect-ratio"
import type { Block } from "payload"
export const ExampleBlock: Block = {
slug: "example",
interfaceName: "Example",
fields: [
// your other fields
aspectRatioField,
],
}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
| name | type | |
|---|---|---|
aspectRatio | select | original, 16/9, 4/3, 1/1 |
Customization
Edit the field's options to edit the ratios your components support.