Case study · Drupal + static site
Cartel Urgente
An archive of protest posters built with Drupal 11 and published as a static site: five open calls, 126 posters and 52 artists from 14 countries.
- Project
- Cartel Urgente
Protest posters - Scope
- Information architecture · Content modeling
Drupal design and development - Technology
- Drupal 11 · Tome
Static site on Netlify
The challenge
Turn a hand-built project into an archive that organizes itself.
Cartel Urgente is a nonprofit project. Each open call takes up an urgent cause—Palestine, Venezuela, Cuba, imperialist war, public education—and designers from around the world respond with posters. On the old site, every edition was assembled by hand from six or seven separate pieces. Two editions ended up without a gallery, and some menus and metadata pointed to the wrong edition. The project needed a model that could grow without extra work, and a site that was fast, cheap to host and hard to break.
Organize
One content type for open calls: launching a new edition means creating a single piece of content, and everything else falls into place.
Showcase
An exhibition-hall design: the posters take center stage, the brand yellow frames them, and each edition is identified by its giant initial.
Publish
Drupal stays local, and the public site is static HTML exported with Tome: no database or PHP on the server.
The site
From the archive to any poster in three clicks.
A home page, a filterable archive, a page for every poster with its artist and edition, and the open call with its countdown. Everything links to everything, so every poster leads to the rest.
The open call up top, the latest posters in a carousel, the manifesto and the five editions.
Every poster, filterable by edition and country and sortable by date or artist, with no page reload.
Each poster with its details, license and high-res download, plus links to its artist and edition.
All of an artist’s posters, grouped by edition.
The five open calls, each with its giant initial, status and posters.
The current edition: guidelines, deadline, a downloadable template and a countdown.
Information architecture
Three pieces that do all the work.
Each edition used to be a loose collection of pages. Now everything hangs off three pieces: the open call, the poster and the artist. Edition pages, listings, breadcrumbs and totals are all generated from those relationships. Country became a field on the artist, which did away with a taxonomy vocabulary, a view and ten pages maintained by hand.
-
Open call
- Number and name
- Deadline
- Call text and guidelines
- Slogan and logo
- PDF template
- 1 : N
-
Poster
- Title and image
- Number
- Edition
- CC BY-NC-ND license
- High-res download
- N : 1
-
Artist
- Name
- Country
- Bio
Status isn’t stored; it’s calculated. Whether a call is upcoming, open or closed comes from its dates, and the current call is always the highest-numbered one. While a call is open, “Poster pending” placeholders invite people to join in: “Your poster here.”
The design
An exhibition hall in yellow and black.
We explored six directions before settling on “Sala” (Spanish for “gallery”): white and paper-gray backgrounds, the seal’s yellow and a black footer, with the logo’s graphic language—the bar, crop marks and registration marks—carried throughout the site. On a four-column grid, each edition opens with its giant initial, sized to match the exact height of the cards.
- Yellow #FFE200
- White
- Paper gray #ECECE8
- Footer black
Anton beat Staatliches on one detail: in Staatliches the 1 read like an I, and in a numbered archive that was a dealbreaker.
On mobile
Just as easy with your thumb.
A full-screen menu with the open call always within reach, a swipeable carousel, tap-friendly filters and poster pages that fit on a single screen.
The open call, the carousel of the latest posters and a menu that flags the current edition.
Pill-shaped filters: one tap and only that edition’s posters remain.
The poster full-screen, with its details and the download below.
Each artist’s work, with the menu leading back to the open call.
What, how and when: the guidelines, top to bottom.
Between open calls
A home page for every moment.
While a call is open, the home page belongs to it: the edition’s slogan, how to take part and how many days are left. Once it closes, the home page turns to the project as a whole, with Cartel Urgente’s slogan, the archive in numbers and a slideshow of posters from every edition. Nobody has to remember to switch it, either. The published site carries both versions, and the browser shows the right one for the date.
Switches on its own
If the call is still open when the site is published, the page ships with both home pages and a small script shows the right one. On closing day, the site switches over without a new export.
No extra weight
The slideshow reuses the data the home page already loads for its grid, so it adds no extra requests. Each poster downloads just before it appears.
No rush
It pauses with its button, when the tab is in the background or when it scrolls out of view, and with “reduce motion” turned on it stays on the first poster.
Under the hood
Drupal for editing, static HTML for publishing.
Drupal 11 runs locally, and that’s where everything gets edited: open calls, posters and artists. To publish, Tome crawls the site and exports it to HTML—about 190 pages that go up to Netlify as is. With no database or PHP on the server, there’s nothing to update and nothing to attack, and the site loads fast from any host.
Drupal 11, locally
Running on DDEV. A custom theme, “Sala,” with 11 SDC components, plus two custom modules.
drush tome:staticExport
Tome generates every page, image and file as static HTML.
exportar.shFinishing touches
Adds the redirects from the old site, the 404 page and clean URLs, with no trailing slash and no extra redirect hops.
--publicarDeploy
The same script deploys it to Netlify, optionally to a preview URL first. Every deploy stays in the history, so rolling back takes a moment.
Live in the browser
The archive and artist filters, each call’s status and the countdown run on custom JavaScript, with no libraries.
Components
Header, card, initial, figures and more: 11 Drupal components (SDC), plus listings built in a custom module instead of Views.
Social cards
A custom module uses Imagick to generate each page’s share image: the edition’s logo on yellow.
No broken links
78 permanent (301) redirects from the old URLs, breadcrumbs that follow the content relationships and a custom 404 page.
Performance
A perfect 100, on mobile too.
Lighthouse scores a page’s speed, accessibility, best practices and SEO from 0 to 100. Cartel Urgente’s home page scores 100 in all four, on both desktop and mobile—where the test simulates a mid-range phone on a slow connection and most sites score far lower. No page drops below 97, even though every one of them is full of posters.
Mobile
- 100Performance
- 100Accessibility
- 100Best practices
- 100SEO
Desktop
- 100Performance
- 100Accessibility
- 100Best practices
- 100SEO
- 1.5 s
- to show the main content on mobile
- 0.5 s
- on desktop
- 0 ms
- blocking time: it responds to the first tap
- 0
- layout shifts while loading
Home page, tested with Lighthouse 12 on cartelurgente.org. Across all nine pages measured (archive, editions, artists, posters, open call, etc.), scores are 100 for accessibility, best practices and SEO, and 97 to 100 for speed.
Prebuilt HTML
Every page is served as is from Netlify’s network, close to the visitor, with no PHP or database to wait on.
Right-sized posters
Every image comes in several sizes, from 320 to 1600 px, so phones don’t download the desktop version. Offscreen images wait their turn, and every one has its space reserved in advance.
No third parties
Out went the analytics, the cookie banner and the legacy libraries. Fonts and scripts are served from the site itself, with long-term caching.
Just enough JavaScript
Filters, countdown and poster slideshow are custom JavaScript with no libraries, and anything not visible on arrival loads later.
The full home page
Top to bottom, as you scroll
On social media
Every milestone gets a reel.
To announce the site, we made a reel showing it in motion, captured frame by frame from the live site and edited in HTML. When “X la educación pública” closed, a second reel followed: a thank-you in six languages to everyone who sent in posters, also made in HTML and cut to the beat of Downtown Boys’ “L’Internationale.” Meanwhile, the archive kept growing:
- 126posters
67 - 52artists
28 - 14countries
7 - 5editions, each with its own gallery