ImageBox Component
Relevant source files
The following files were used as context for generating this wiki page:
The ImageBox component is a specialized image rendering utility designed to bridge Sanity's Content Lake with Next.js's optimized Image component. It serves as the primary vehicle for displaying visual content across the personal website, handling Sanity image assets, hotspot/crop transformations, and responsive styling.
The component is heavily integrated with the project's content modeling, appearing in Project Pages, Project List Items, and within Custom Portable Text blocks. It abstracts the complexity of Sanity's image URL generation while providing a consistent interface for layout constraints like aspect ratios and custom CSS classes.
Sources: components/ImageBox.tsx, components/ProjectListItem.tsx:17-21, components/CustomPortableText.tsx:49-52
Component Architecture and Props
The ImageBox component is built to receive raw Sanity image objects and translate them into a format compatible with next/image. It supports various layout configurations through its prop interface, allowing parent components to control the wrapper's styling and the image's sizing behavior.
Data Interface
The component accepts an image prop which typically follows the SanityImageAsset or Milestone image structure defined in the project's type definitions.
| Prop | Type | Description |
|---|---|---|
image | any | The raw Sanity image object containing asset references and metadata. |
alt | string | Alternative text for accessibility. |
width | number | The intrinsic width of the image (default: 3500). |
height | number | The intrinsic height of the image (default: 2000). |
size | string | The sizes attribute for responsive images (default: "100vw"). |
classesWrapper | string | CSS classes applied to the container div. |
Sources: components/ImageBox.tsx:11-20, sanity.types.ts:60-66
Internal Logic
The component utilizes the urlForImage utility to generate optimized URLs from the Sanity Content Lake. If no image asset is provided, it returns a placeholder gray div to maintain layout stability.
Sources: components/ImageBox.tsx:22-44
Usage Contexts
The ImageBox is utilized in three primary architectural areas of the website, each requiring different layout treatments.
1. Project Showcase and Headers
On the individual Project pages and within the homepage showcase, the ImageBox is used for the "Cover Image." In these contexts, it is typically wrapped in a container with a fixed aspect ratio.
- Project Page: Uses
aspect-[16/9]to ensure a cinematic widescreen display of the project's main visual. - Project List Item: Uses the same
aspect-[16/9]for consistency in the list view.
Sources: app/(personal)/projects/[slug]/page.tsx:90-96, components/ProjectListItem.tsx:17-21
2. Portable Text Integration
Within the CustomPortableText component, the ImageBox is mapped to the image type in the Sanity schema. This allows content authors to insert images directly into long-form descriptions. Here, it is styled with vertical spacing (my-6 space-y-2) and an aspect ratio wrapper.
Sources: components/CustomPortableText.tsx:49-52, sanity/schemas/documents/project.ts:121-140
3. Timeline Milestones
In the TimelineItem component, the ImageBox is used as a thumbnail. Unlike the large-scale cover images, these instances are constrained to a small square (65px x 65px).
Sources: components/TimelineItem.tsx:13-19
Content Schema and Type Mapping
The ImageBox component relies on the image object structure defined in the Sanity schema. In the project document, the coverImage is a required field with hotspot enabled, allowing editors to define the focal point of the image within the Sanity Studio.
Summary of Data Flow
The following sequence diagram illustrates how image data travels from the Sanity Content Lake to the user's browser via the ImageBox component.
The ImageBox component is a critical bridge for media rendering, ensuring that the visual content authored in Sanity is delivered efficiently and responsively through the Next.js frontend architecture.