Guide

Internal Guide

Case Studies in Directus

Everything you need to create, edit, and manage case studies. From fields to relationships to publishing.

For Camila Updated March 2026

Jump to

Overview

Case studies live in the case_studies collection in Directus. They tell the story of a client project by combining portfolio items into a structured narrative.

Every case study follows a Challenge → Solution → Results arc — what problem the client faced, what Hue did, and the measurable outcomes.

Think of it this way

Portfolio Items

Individual design pieces — a logo, a website, print materials.

Case Studies

The narrative wrapper that ties multiple portfolio items into a compelling project story.

Fields Reference

Every case study has these fields. Required fields are marked with a dot.

FieldTypeReqDescription

TitleTextThe case study name (e.g. "Killowen")

URL / SlugAuto-slugAuto-generated from title, used for the page URL

StatusDropdowndraft, published, or archived

ExcerptMultilineShort description for listings and previews (1-2 sentences)

Featured ImageImageHero / cover image upload

ClientTextClient name override — use if different from Organization

OrganizationRelationLink to an existing organization record

Project DurationTextHow long the project took (e.g. "8 weeks")

Project YearTextYear completed (e.g. "2024")

Project URLTextLive site URL (e.g. killowenconstruction.com)

TagsTagsKeywords for categorization (e.g. branding, architecture)

FeaturedToggleHighlights on homepage and portfolio page

Featured Image & Hero

The featured image is the most prominent visual on a case study. It appears as a full-width hero on the detail page and as the card thumbnail on the listing page.

Detail Page Hero

Displayed full-width below the project info. Cropped to fit a wide landscape format (roughly 16:9). Use the Directus focal point tool to control where the crop centers.

Listing Card Thumbnail

Shown as a contained image inside a 16:9 card on the case studies index. Logos are scaled proportionally so wide and square marks look balanced next to each other.

What makes a good featured image

A signature deliverable or brand collateral mockup

Stationery suite, packaging, signage, or a website screenshot on a device — something that shows the finished work in context.

High-resolution, landscape-oriented

The hero crops to roughly 16:9. Landscape images work best. Portrait or square images will be heavily cropped — use the Directus focal point tool if needed.

Clean background, strong contrast

White or neutral backgrounds let the work speak. Avoid busy textures or dark backgrounds that compete with the logo/design.

The logo on a white or light background for card thumbnails

On the listing page, the image is shown contained (not cropped). A logo on white gives the cleanest result and scales well across wide and square marks.

Raw logo files without context

A bare .png logo on transparent background can look flat. Prefer mockups or styled presentations that show the brand in use.

Low-resolution or heavily compressed images

The hero renders at up to 1920px wide. Upload at least 1920x1080 for crisp results. Directus handles compression via presets.

Fallback behavior

If no featured image is uploaded, the site automatically falls back to: the branding/logo portfolio item's featured image, then any linked portfolio item's featured image, then the first gallery image from a linked portfolio item. For the best result, always upload a dedicated featured image.

The Story Sections

These three rich-text fields form the narrative core. They use the HTML editor, so you can format with headings, lists, bold, italic, and links.

Challenge

What problem did the client face? What were they looking for? Set the stage for the project.

The client's pain point

Solution

What did Hue do? Describe the creative and strategic approach taken to solve the problem.

Hue's creative approach

Results

Outcomes, metrics, and business impact. What changed for the client after the work was done?

Measurable outcomes

Writing tip: Keep the Challenge focused on the client's pain, the Solution on what Hue specifically did, and Results on measurable outcomes. This structure helps potential clients see themselves in the story.

Relationships

Each case study connects to other collections. These fields appear at the bottom of the edit form.

Gallery

Upload additional images beyond the featured image. Drag to reorder them in the gallery.

Services

Link the services Hue provided for this project.

BrandingDigital / WebPrint / GraphicCorporate / Data

Industries

Link relevant industries for filtering and categorization on the site.

Portfolio Items

Link the actual design deliverables — the portfolio pieces that belong to this project.

Creating a New Case Study

Navigate to Case Studies in the sidebar and click the + button

Top right corner of the collection view.

Fill in the Title, set Status to draft, and write an Excerpt

The excerpt is a 1-2 sentence summary for listing pages.

Upload a Featured Image

This is the hero/cover visual that represents the project.

Write the Challenge, Solution, and Results

Use the rich text editor — headings, lists, bold, and links all work.

Fill in Project Duration, Project Year, and Project URL

Metadata that appears on the case study detail page.

Add Tags for categorization

e.g. branding, architecture, construction, real estate.

Link Services, Industries, Portfolio Items, and upload Gallery images

Scroll to the bottom of the form to find these relationship fields.

Set Status to published when ready

Changes go live immediately — double-check everything first.

Toggle Featured if it should appear prominently

Featured case studies show on the homepage and portfolio page.

Updating an Existing Case Study

Find it — Go to Case Studies and use search or filter by status to locate the case study.

Edit fields — Click into any case study and edit fields directly. Save when done.

Reorder gallery — Drag images into the desired position within the gallery field.

Add/remove relationships — Use the Services, Industries, and Portfolio Items fields at the bottom to add or remove links.

Remember — Changes are live immediately if the status is set to published.

Tips & Best Practices

Portfolio vs. Case Study

Portfolio items are individual design pieces (a logo, a website). Case studies wrap multiple portfolio items into a narrative with Challenge / Solution / Results.

Organization vs. Client field

If the client already exists in Organizations, link them there. The Client text field is just a display-name override for when the org name doesn't match what you want to show.

Display order

The Sort field controls the order case studies appear. Lower numbers show first. You can also drag to reorder in the Directus list view.

Archive, don't delete

Set status to archived instead of deleting. This preserves the record and all its relationships while hiding it from the live site.

Publish = Live

Changes are live immediately when status is set to published. Keep status as draft while you're still working on content.

Questions? Reach out to Peter.