A page opening with its picture beside the title: AWoP, Citational Justice and AI in Metascience

Merged
LU
1d ago
+100-38

A general opening for pages whose picture is the thing itself, such as a tool's wheel or an event's banner: the title, standfirst and buttons sit beside a large image on desktop, and the image follows the buttons on a phone. It started as an AWoP-only layout and is now used by three pages:

  • AWoP: the wheel, which was a thumbnail lower in the overview (it moves; it is not duplicated).
  • Towards Citational Justice: the toolkit's wheel, which the page did not show before.
  • AI in Metascience: the conference banner. The page already had a similar opening written by hand in its content; that CSS is removed, and the facts card keeps its place beside the introduction.

How it works

  • A page opts in with front matter: hero_image (a page resource, or a path under static/), hero_image_alt, and optionally hero_image_link, the text of a link to the full-size picture. The picture itself also links to its full size.
  • layouts/partials/doors/page_hero.html (renamed from tool_hero.html) works in both page layouts: doors/reading (articles, plain pages, Citational Justice) and widget_page (AWoP). Pages without hero_image render as before.
  • Page resources are resized to 900 px WebP for the opening; a picture in static/ is served as is (the Citational Justice wheel, 264 KB).
  • A landscape picture takes the full width on a phone; a square one stays at 340 px or less, so the buttons remain on the first screen. On a full-width page (AI in Metascience) the picture column is 520 px, aligned with the cards below.
  • Decorative pictures (pedagogies, lesson bank) do not use it: there the opening would push the text off the first screen for no gain.

Decision to review: on desktop the opening spans the full width, so the "On this page" card starts below it rather than beside the title.

Based on #1118. Checks: SEO and source rules pass, unit tests pass, and axe finds no WCAG A or AA issue on the three pages at 1280 and 390 px. The design check's page audit (overflow, small text, contrast, line length) is clean on all three at 390, 1024 and 1440 px.

AWoP

Desktop (before above, after below)

AWoP desktop: before and after

Phone (before left, after right)

AWoP phone: before and after

Towards Citational Justice

Desktop

Citational Justice desktop: before and after

Phone

Citational Justice phone: before and after

AI in Metascience

Desktop

AI in Metascience desktop: before and after

Phone

AI in Metascience phone: before and after

Created with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code

Summary by cubic

Introduces a general page opening where the picture sits large beside the title, lede and action buttons on desktop, and directly under the buttons on a phone. It now applies to AWoP (the wheel moves from the overview into the opening, not duplicated), Towards Citational Justice (the wheel the page didn't show before), and AI in Metascience (whose hand-written banner opening is replaced by this partial). Clicking the picture opens the full-size version.

Pages opt in with hero_image front matter, rendered by the new layouts/partials/doors/page_hero.html in both the article and widget layouts; other pages render as before. The image is not lazy-loaded, carries width, height and a one-sentence alt text, and is clipped to the link's rounded corners; og:image is unchanged. Page resources are resized to 900 px for the opening; a static/ path is served as is, so prefer a copy beside the page — Citational Justice now uses a 900 px copy rather than the 2,835 px original.

Decision to review: on desktop the opening spans the full page width, so the "On this page" card starts below it rather than beside the title.