Text with Image

Split section pairing Portable Text body copy with a positioned image, switchable left or right.

The TextWithImage block renders a two-column split: a Portable Text content area on one side and an image on the other. The imagePosition field controls which side the image appears on. LQIP (low-quality image placeholders) are supported for smooth lazy-loading.

Props

heading · string

Optional heading above the body copy, rendered as <h2> at 3xl–4xl with tight tracking.

content · PortableTextBlock[]

Portable Text body copy rendered with the project’s shared portableTextComponents. Styled as prose with text-muted-foreground.

image · SanityImageObject

Sanity image with hotspot enabled. Cropped to 800×600 (4:3 aspect ratio). The alt field on the image object is required for accessibility.

imagePosition · 'left' | 'right'

Controls which side the image occupies. Defaults to right. When set to left, the image uses @lg:order-first to prepend it in the column order.

backgroundVariant · 'white' | 'light' | 'dark' | 'primary'

Background colour token. Defaults to white.

spacing · 'none' | 'small' | 'default' | 'large'

Vertical padding override. Defaults to default.

maxWidth · 'narrow' | 'default' | 'full'

Content container max-width. Defaults to default.

class · string

Additional CSS classes.

id · string

HTML id for anchor targeting.

Usage in Sanity Studio

1. Add a Text with Image block to a page.
2. Set an optional Heading.
3. Write the Content body copy using the Portable Text editor.
4. Upload an Image and fill in the required Alternative Text field.
5. Expand Layout Options and set Image Position to left or right (default right).

The image uses hotspot: upload images with the subject off-centre and set the hotspot in Studio so the 4:3 crop always frames the right focal point.

Variants / Options

No variant field. The two layout options are:

imagePosition	Behaviour
right (default)	Text left, image right
left	Image left (via @lg:order-first), text right

Example

{
  _type: 'textWithImage',
  heading: 'How the Capstone Works',
  content: [
    {
      _type: 'block',
      style: 'normal',
      children: [
        { _type: 'span', text: 'Each team of four to five students is matched with an industry partner at the start of the semester. Partners provide a project brief, and teams deliver working software by the end of term.' }
      ]
    }
  ],
  image: {
    asset: { _ref: 'image-abc123' },
    alt: 'Students presenting their capstone project'
  },
  imagePosition: 'right'
}