Overview

The Timeline Block feature allows administrators to create interactive timeline sections for the homepage. Each timeline can contain multiple entries with images, rich text content, and customizable styling - all managed through an intuitive admin interface.

Key Features

• Visual Timeline Editor: Create timeline entries with dates, titles, and descriptions
• Image Management: Upload multiple images per entry with alt text and captions
• Drag-Drop Ordering: Reorder timeline entries with simple drag-drop controls
• Rich Content: Support for formatted text content (Portable Text)
• Flexible Styling: Customize colors for background, text, and timeline line
• Responsive Design: Timelines adapt beautifully to all screen sizes

Creating a Timeline Block

Step 1: Access Admin UI

Navigate to the homepage configuration panel:

/admin/ui-config/homepage

Step 2: Create New Timeline

1. Click the "Create Timeline Block" button in the header
2. Fill in the block details:
   • Name: Internal identifier (e.g., "Company History")
   • Heading: Public-facing title (e.g., "Our Journey")
   • Description: Optional subtitle or intro text

Step 3: Add Timeline Entries

Click "Add Entry" to create your first timeline entry:

1. Title: Timeline marker (year, quarter, milestone name)

   • Examples: "2024", "Q1 2023", "Founded", "Series A"

2. Content: Rich text description of the milestone

   • Supports multi-paragraph text
   • Automatically converts to Portable Text format

3. Images (Optional): Add visual context

   • Click "Upload Images" to select files
   • Supports: JPG, PNG, WebP (max 5MB per image)
   • Upload multiple images at once
   • Edit alt text for accessibility
   • Add optional captions

4. Display Order: Set the entry position (lower numbers appear first)

Step 4: Manage Entries

• Reorder: Use ↑↓ buttons to move entries up/down
• Remove: Click the ✕ button to delete an entry
• Edit: Modify content, images, or settings anytime

Step 5: Customize Styling (Optional)

Adjust colors to match your brand:

• Background Color: Timeline section background
• Text Color: Entry text and titles
• Line Color: Vertical timeline connector

Step 6: Save and Publish

1. Click "Save Timeline Block"
2. Timeline appears in the blocks list with a Clock icon
3. Use drag handles to position among other homepage blocks
4. Toggle visibility to show/hide on the live site

Managing Images

Uploading Images

The image upload system provides a secure, server-side upload process:

1. Select Files: Click "Upload Images" or drag-drop files
2. Validation: System checks file type and size automatically
3. Upload Progress: Loading indicator shows upload status
4. Preview: Images appear in a grid after successful upload

Image Properties

Each image has two editable fields:

• Alt Text: Describes the image for accessibility

  • Auto-populated from filename
  • Edit to provide better descriptions
  • Required for screen readers

• Caption (Optional): Displayed below the image

  • Add context or credit information
  • Leave blank if not needed

Removing Images

Click the trash icon on any image preview to remove it immediately.

Example Timeline Block

Here's a complete example of a company history timeline:

{
  name: "Company History",
  heading: "Our Journey",
  description: "Key milestones in our growth story",
  entries: [
    {
      title: "2024",
      content: "Launched new product line and expanded to international markets...",
      images: [
        {
          asset: { url: "office-opening.jpg" },
          alt: "New office opening ceremony",
          caption: "Opening our 5th location"
        }
      ],
      order: 0
    },
    {
      title: "2023",
      content: "Secured Series B funding and grew team to 50+ employees...",
      images: [
        {
          asset: { url: "team-photo.jpg" },
          alt: "Company team photo 2023"
        }
      ],
      order: 1
    },
    {
      title: "2022 - Founded",
      content: "Started in a garage with a vision to revolutionize...",
      images: [
        {
          asset: { url: "founders.jpg" },
          alt: "Company founders",
          caption: "Where it all began"
        }
      ],
      order: 2
    }
  ]
}

Timeline Display

On Homepage

Timeline blocks integrate seamlessly with other homepage blocks:

• Mixed Layout: Combine with Bento Grid, Features, Draggable Cards
• Drag-Drop Reordering: Position anywhere in the block sequence
• Responsive Design: Adapts to mobile, tablet, and desktop
• Smooth Animations: Entries animate into view on scroll

On About Page

The About page features a dedicated Company Timeline component with:

• Historical milestones (2024, 2023, company capabilities)
• Curated images showcasing company evolution
• Fixed position (not managed through admin UI)

Best Practices

Content Guidelines

1. Keep Titles Concise: Use years, quarters, or short milestone names
2. Clear Descriptions: Write 2-3 sentences per entry
3. Chronological Order: Latest entries first (order: 0, 1, 2...)
4. Consistent Formatting: Match tone and style across entries

Image Guidelines

1. Optimize File Size: Compress images before upload

   • Recommended: Under 1MB per image
   • Maximum: 5MB per image

2. Use Relevant Images: Choose photos that illustrate the milestone

   • Team photos for hiring milestones
   • Product shots for launches
   • Office/location photos for expansions

3. Write Descriptive Alt Text:

   • ✅ Good: "Team celebrating product launch at company headquarters"
   • ❌ Bad: "IMG_1234"

4. Captions for Context: Add captions when additional context helps

   • Credit photographers
   • Specify locations
   • Provide dates if different from entry title

Styling Guidelines

1. Brand Colors: Use colors from your brand palette
2. Sufficient Contrast: Ensure text is readable against background
3. Consistent Theme: Match other homepage blocks
4. Test Responsiveness: Preview on mobile devices

Technical Details

Storage

• Content: Stored in Sanity CMS
• Images: Uploaded to Sanity CDN
• Format: Portable Text for rich content

Performance

• Image Optimization: Automatic CDN delivery
• Lazy Loading: Images load as users scroll
• Caching: Content cached for fast load times

Accessibility

• Semantic HTML: Proper heading hierarchy
• Alt Text: Required for all images
• Keyboard Navigation: Full keyboard support
• Screen Reader: Compatible with assistive technologies

Troubleshooting

Images Won't Upload

Problem: Upload button shows error or infinite loading

Solutions:

• Check file format (must be JPG, PNG, or WebP)
• Verify file size (must be under 5MB)
• Ensure stable internet connection
• Try uploading one image at a time

Timeline Not Visible

Problem: Timeline doesn't appear on homepage

Solutions:

• Check visibility toggle is ON
• Verify at least one entry exists
• Refresh browser cache (Ctrl+Shift+R)
• Confirm timeline is in active homepage config

Content Not Saving

Problem: Changes revert after saving

Solutions:

• Check browser console for errors
• Verify all required fields filled (title, content)
• Try refreshing the admin page
• Contact support if issue persists

API Reference

Developers can programmatically manage timelines via REST API:

Create Timeline Block

POST /api/homepage/timeline-blocks
Content-Type: application/json

{
  "name": "Company History",
  "heading": "Our Journey",
  "entries": [...],
  "addToHomepage": true
}

Update Timeline Block

PATCH /api/homepage/timeline-blocks/{blockId}
Content-Type: application/json

{
  "heading": "Updated Title",
  "entries": [...]
}

Delete Timeline Block

DELETE /api/homepage/timeline-blocks/{blockId}

Related Features

• Features Section Block - Another content block type
• Artwork Designer - Custom artwork creation
• Templates - Pre-built design templates

Support

Need help with Timeline Blocks?

• Check Technical Documentation
• View Changelog for latest updates
• Contact support via Discord