Images

Use ImageSection for an image on its own or paired with explanatory text. Children provide richer accompanying content without storing markup in the image data.

svelte

<script>
  import { ImageSection } from '@page-sections/svelte';
</script>

<ImageSection
  section={{
    id: 'place',
    title: 'Our place',
    headline: 'A garden for everyone',
    image: {
      src: '/images/garden.jpg',
      alt: 'Raised garden beds and an accessible path',
      width: 1200,
      height: 900,
      aspect: '4/3',
      objectFit: 'cover'
    },
    description: 'Wide paths connect the shared growing beds.',
    imageSide: 'right'
  }}
>
  <p><a href="/access">Read our access information</a>.</p>
</ImageSection>

Props and configuration

Prop	Type	Default
`section`	`Omit<ImageSectionData, 'type'>`	Required
`children`	`Snippet`	Optional; rendered beside/after media, after description

Alongside SectionDefinition:

Field	Type	Default
`image`	`ImageData`, required	See full fields in Card and Image
`description`	`string`	Optional plain text paragraph
`imageSide`	`'left'` or `'right'`	Left unless right is supplied

The data discriminator is image. There is no caption-specific prop: use children for a caption or accompanying text. The section headline is above the media/text pair.

Responsive layout and SSR

Without description or children, media fills the section's content width. With accompanying content, it stacks below 600px container width. At 600px and above, the media/text ratio is 1.7:1; right places the image visually after the text. DOM reading order remains image then text. srcDark, dimensions, ratios and fit are implemented by Image, described in Card and Image.

Images are lazy-loaded and decoded asynchronously. Supply intrinsic width/height to reserve space, and meaningful alt text or an empty string for decoration. Layout and native image selection work without application JavaScript. The host supplies and optimizes the actual assets.