Visual Storytelling at Scale for Brown Bag Films
Problem
For Brown Bag Films, the work needs to move, surprise and feel alive. A conventional portfolio grid would flatten years of animation, imagery and storytelling, while individually coding every project page would create an editorial bottleneck.
The platform needed to accommodate an expanding archive of projects, news, imagery and video while giving each production its own personality. It also had to remain practical for the internal team – easy to update, flexible enough for new stories and capable of managing a substantial media library without becoming unwieldy.
How we addressed it
We built the platform on Drupal 11 using structured content and a library of reusable components. Editors can combine full-width media, image galleries, multi-column layouts, video, carousels, quotes, calls to action and other elements without commissioning a new template for every project.
The live system contains 69 configured component types. Editors currently use 42 of them across more than 4,300 placed components, providing plenty of creative freedom while keeping the underlying structure consistent.
The custom theme combines Vue 3, GSAP, ScrollTrigger and Three.js to produce animated transitions, scroll-driven interactions and three-dimensional elements. Gallery, carousel and animation tools support the visual experience without hard-coding the underlying content into the front end.
That separation matters: editors continue working through Drupal while the public experience feels much more like a bespoke interactive showcase than a conventional CMS website.
Images, uploaded videos and externally hosted videos are managed through a central media library. Drupal generates multiple image variants and uses responsive images, WebP conversion, lazy loading, cropping and cache controls to serve media appropriately across different screens.
The current platform manages almost 9.8 GB of files. Its media library contains more than 2,000 assets, including over 1,800 images and 225 uploaded or remotely hosted videos.
The component system gives Brown Bag Films’ team control over how each story is assembled. A project can be image-led, video-led, highly animated or more editorial without changing the content model or introducing another one-off template.
Search, metadata, redirects and sitemap management are handled within the same platform. The Composer-managed Drupal foundation also provides a maintainable upgrade path as the archive and technical requirements continue to grow.
Outcome
The result is a website that feels playful and handcrafted while being powered by a repeatable publishing system. Brown Bag Films can give individual productions their own visual rhythm without sacrificing consistency or turning every update into a development project.
Editors can continue shaping the portfolio day to day, while the platform provides the structure needed to manage thousands of assets and components. New projects, formats and storytelling patterns can be introduced without rebuilding the wider site.
Live scale
70 projects. 2,000+ media assets. 225 videos. 4,300+ content components. One flexible publishing platform.
70 published project pages
117 published news stories
224 published content items in total
2,063 managed media assets
1,833 images
225 video assets
Almost 9.8 GB of managed files
69 configured component types
42 component types currently in use
4,308 placed content components
19 configured image styles
See Brown Bag Films’ visual storytelling platform in action.
