ICRS Theme Content Guide

This guide explains how to populate the site using Ghost content settings.

How the theme is organized

The theme has three standalone-branded surfaces, plus the ICRS-native project pages:

1. Main ICRS home page (from index.hbs)
2. LobSTAR landing page (from page-lobstar.hbs, for slug lobstar)
3. IPRL Front Page (from page-iprl.hbs, for slug iprl)

UNIBOTS (page-unibots.hbs, slug unibots) uses the shared ICRS-native (blue/mono) project-page styling instead of its own brand.

Most dynamic sections are powered by Ghost internal tags (tags prefixed with #).

Internal tags used by this theme

Main ICRS home page

• #icrs-post

  • Used for the home page post feed.
  • Query: tag:hash-icrs-post (up to 20 posts)

• #sponsor

  • Used for the sponsor grid on the home page.
  • Query: tag:hash-sponsor (up to 100 posts)

• #newsletter

  • Used for the newsletter banner near the top of the home page.
  • Query: tag:hash-newsletter (most recent 1 post)

• #gallery

  • Used for the gallery marquee on the home page.
  • Query: tag:hash-gallery (up to 20 posts)

LobSTAR landing page

• lobstar

  • Used for LobSTAR posts grid.
  • Query: tag:lobstar (up to 6 posts)

• #lobstar-sponsor

  • Used for LobSTAR sponsors section.
  • Query: tag:hash-lobstar-sponsor (up to 100 posts)

• #lobstar-subsystem

  • Used for LobSTAR subsystems cards.
  • Query: tag:hash-lobstar-subsystem (up to 100 posts)

• #lobstar-team

  • Used for LobSTAR team members.
  • Query: tag:hash-lobstar-team (up to 100 posts, oldest first)

UNIBOTS project page

Uses page-unibots.hbs, which auto-applies to the Ghost page with slug unibots. Still uses the shared ICRS-native (blue/mono) project-page styling.

• unibots

  • Regular (non-internal) tag used for the UNIBOTS posts grid.
  • Query: tag:unibots (up to 9 posts)

• #unibots-team

  • Used for the UNIBOTS team section.
  • Query: tag:hash-unibots-team (up to 100 posts, oldest first)
  • Field mapping: feature image -> avatar, title -> name, custom excerpt -> bio.

IPRL Front Page

page-iprl.hbs auto-applies to the Ghost page with slug iprl. Unlike UNIBOTS, this is a fully standalone, separately-branded sub-site (own header/footer/fonts — cream/ink/orange palette, Tw Cen MT + IntoDotMatrix + Inter — bypassing the shared ICRS shell entirely, the same way the LobSTAR pages do). Most of the page (hero, branch info, sponsors placeholder copy) is static marketing content per the 2026 design handoff; only two sections pull real Ghost content:

• iprl

  • Regular (non-internal) tag used for the News grid.
  • Query: tag:iprl (up to 3 posts, most recent first)
  • Field mapping: feature_image -> card image, primary_tag -> category label, title -> headline (links to the post), custom_excerpt (falls back to autogenerated excerpt) -> excerpt, first author's name + published date -> byline.

• #iprl-sponsor

  • Used for the sponsor logo grid in the Supporters section.
  • Query: tag:hash-iprl-sponsor (up to 100 posts)
  • Field mapping: feature_image -> logo, title -> alt text/fallback label, canonical_url (if set) -> makes the tile a clickable link.
  • If no posts have this tag, the section falls back to 8 empty placeholder tiles (matches the original design's unpopulated state).

iprl_join_url custom setting (Settings > Design & Branding > Site-wide): destination for every "Join the Lab" button across all IPRL pages (nav, hero, footer). Leave empty and the buttons just jump to the Front Page's own footer instead.

The IPRL header/footer chrome (partials/iprl-header.hbs, partials/iprl-footer.hbs) is shared across the Front Page and every page below, so nav links and the Join CTA stay consistent everywhere without duplicating markup.

IPRL News Post

Posts tagged iprl render through a dedicated branch inside post.hbs (the same pattern LobSTAR uses) instead of the shared ICRS post template — own header/footer, own fonts, back-to-News link, tag chips, author bio, and a "More from the Lab" related-posts row (2 real posts sharing the iprl tag, plus a static Mission Archive teaser card). No new tags needed beyond iprl itself; everything else maps directly to standard Ghost post fields (primary_tag, title, feature_image, tags, primary_author.bio, authors[0] for the byline avatar).

IPRL Shop

page-iprl-shop.hbs auto-applies to the Ghost page with slug iprl-shop (URL /iprl-shop/). Ghost has no native commerce, so per the design handoff there's no checkout here — one central "Shop on ICU" button (below) is the only purchase path. Products themselves are real Ghost Posts, one per product, split into three sections by internal tag:

• #iprl-shop-apparel → Apparel section
• #iprl-shop-promotional → Promotional section
• #iprl-shop-other → Other section

Each product post maps like this:

• Feature image → product photo (cropped to a square; falls back to an empty tinted tile if unset)
• Title → product name and price together, separated by a pipe: IPRL Zip Hoodie | £38. main.js splits this client-side into the name and a separately-styled price badge (same lightweight pattern the theme already uses for author initials and event cards). No pipe in the title just shows as-is with no price badge — nothing breaks if you forget it or if JS is off, it just reads as one line.
• Custom excerpt (falls back to an autogenerated excerpt) → description

A section with no tagged products simply doesn't render (no empty "Promotional" heading with nothing under it).

icu_shop_url custom setting (Settings > Design & Branding > Site-wide): destination for the "Shop on ICU" button in the hero. Leave empty to hide the button — set it once you know where Imperial College Union's store lives.

IPRL Team (current team + Mission Archive)

page-iprl-team.hbs → Page with slug iprl-team (header "Team" link, footer, and the News Post "Archive" card → /iprl-team/#archive). It replaces the old per-year iprl-archive-* pages.

Current team — one Post per member, internal tags only (they never show in News, RSS or /tag/):

• Title → name, Custom excerpt → role, Feature image → square photo
• #team-<year> (e.g. #team-2026) → season
• one group tag: #team-leadership, #team-rover, #team-uav or #team-science
• Members sort featured first, then by title. A group with no members for the season is hidden.
• Season shown = theme setting current_team_year (Settings > Design & Branding > Site-wide, default 2026). It drives the hero eyebrow and the member filter.
• The iprl-team Page itself supplies the hero H1 (title), intro (custom excerpt) and the full-team photo (feature image; falls back to whole-team-photo.jpg).

Mission Archive — one Page per season tagged #archive, shown as client-side tabs, newest first (published_at decides order and the tab's year label, so set it to the season's year):

• Title → rover name, Custom excerpt → eyebrow ("European Rover Challenge 2025 · Kraków"), Feature image → splash, Meta description → blurb beside the "The Team" heading
• Body: an HTML card with the specs strip, then a heading + bullet list for Achievements, then a Gallery card. The specs strip is lifted above the season's team grid by CSS (.iprl-archive-content):

  <div class="iprl-archive-specs">
      <div><span>Drivetrain</span><br>6-wheel rocker-bogie</div>
      <div><span>Arm</span><br>5-DOF modular manipulator</div>
      <div><span>Chassis</span><br>Machined aluminium</div>
      <div><span>Autonomy</span><br>LIDAR + stereo nav stack</div>
  </div>

• That season's team grid is built from members tagged #team-<published year>.
• Deep links: /iprl-team/#archive and /iprl-team/#archive-2024. Without JS all seasons are listed.

Season rollover: tag new members #team-2027 + group, set current_team_year to 2027, publish the 2026 archive Page tagged #archive.

Redirects: upload redirects.yaml (Settings > Labs > Redirects) so old /iprl-archive/ and /iprl-archive-YYYY/ links land on the Team page.

Featured post behavior (LobSTAR)

The LobSTAR page includes a Featured Post section directly under the intro content.

Selection rule:

• Post must have tag lobstar
• Post must also have Featured enabled in Ghost (featured:true)
• Query used: featured:true+tag:lobstar
• Only 1 post is shown (limit="1")

If multiple posts are marked featured, Ghost returns one based on default ordering. To keep this predictable, mark only one LobSTAR post as featured at a time.

Content field mapping by section

LobSTAR landing hero (top section)

This comes from the static page that uses page-lobstar.hbs:

• Page title -> hero title
• Page content -> hero body text
• Page feature image -> hero image

LobSTAR Featured Post section

For the selected featured post:

• Feature image -> left image panel
• Title -> heading on the right
• Date -> metadata line
• Custom excerpt (if set) -> main text
• Fallback when custom excerpt is empty -> autogenerated excerpt

LobSTAR Posts grid (lobstar)

For each post:

• Feature image -> card image
• Title -> card title
• Date -> metadata
• Custom excerpt (if set) -> card text
• Fallback when custom excerpt is empty -> autogenerated excerpt

LobSTAR Sponsors (#lobstar-sponsor)

For each sponsor post:

• Feature image -> sponsor logo/image (will fill the entire square polaroid space)
• Title -> sponsor name
• Custom excerpt -> supporting text (often used for URL or short note)
• Primary tag (first tag) -> sponsor tier level (e.g., "Krill", "Gold", "Platinum")

Note on tier tags: The tier label appears on the polaroid only if set as the post's primary tag. In Ghost Admin, ensure the tier tag appears first in the tag list to make it the primary tag.

LobSTAR Subsystems (#lobstar-subsystem)

For each subsystem post:

• Feature image -> subsystem image
• Title -> subsystem name
• Custom excerpt (if set) -> summary
• Fallback when custom excerpt is empty -> autogenerated excerpt

LobSTAR Team (#lobstar-team)

For each team post:

• Feature image -> avatar/headshot
• Title -> person name
• Custom excerpt -> short bio

How to create content in Ghost

1. Create or edit a post/page in Ghost Admin.
2. Open the post settings panel.
3. Add internal tags exactly as listed above (with #).
4. Fill in Feature image and Custom excerpt where relevant.
5. For a LobSTAR featured post, toggle the post to Featured.
6. Publish the content.

Quick publishing checklist

• Home article should appear in ICRS feed: add #icrs-post
• Home sponsor should appear in sponsors row: add #icrs-sponsor
• LobSTAR article should appear in Posts: add lobstar
• LobSTAR article should appear in Featured Post: add lobstar and set Featured
• LobSTAR sponsor/team/subsystem cards: add the matching LobSTAR internal tag

Notes and gotchas

• Internal tags are queried by slug (hash-...) in templates, so spelling matters.
• Featured Post section renders only when at least one post matches featured:true+tag:lobstar.
• A featured LobSTAR post can appear in both the Featured section and the Posts grid.
• If an image is missing in some LobSTAR sections, the theme may show a placeholder or text-only block.
• Sponsor tier tags: The tier label on polaroids displays the post's primary tag. In Ghost Admin, set the tier tag (e.g., "Krill") as the first tag in the list to make it primary. The #lobstar-sponsor tag should be a secondary tag.

Event blocks (in-post)

Posts can include styled event cards using a single <div data-event> HTML card. The theme rewrites it on the published page into a Windows-style window with title bar, image, meta rows, description, sign-up link, and an "add to calendar" button.

Inserting an event

In the Ghost editor type /html and paste:

<div data-event
     data-title="Build Night"
     data-when="Fri 12 Jun 2026 · 18:00–21:00"
     data-start="2026-06-12T18:00"
     data-end="2026-06-12T21:00"
     data-where="Imperial College, RSM 1.51"
     data-price="Free for members"
     data-image="https://your-image-url.jpg"
     data-cta="https://signup-url"
     data-cta-label="sign up">
  Bring your own project. Pizza at 19:00. Multiple paragraphs are supported — leave a blank line between them.
</div>

Save the HTML card as a Ghost snippet named event so /event inserts it next time.

Available attributes

All attributes are optional except data-event itself. Drop any line and that piece won't render.

Content

• data-title — heading inside the card
• data-when — human-readable display string for the date/time row (e.g. Fri 12 Jun 2026 · 18:00)
• data-where — location row
• data-price — price row
• data-image — feature image URL (no drag-and-drop; paste the URL of an image uploaded elsewhere)
• data-cta — sign-up link URL
• data-cta-label — link text, defaults to sign up
• data-label — title bar label, defaults to EVENT

Calendar (machine-readable times)

Including these makes the "add to calendar" button appear in the bottom-right corner.

• data-start — ISO 8601 datetime, required for the calendar button (e.g. 2026-06-12T18:00)
• data-end — ISO 8601 datetime, optional
• data-duration — minutes, used if data-end is omitted, defaults to 60
• data-calendar-label — accessible name / tooltip, defaults to add to calendar

Times are treated as floating local time — "18:00 wherever you are" — so any timezone suffix (Z, +01:00) is stripped before parsing. The calendar button opens a small dropdown letting the reader pick Google, Outlook, or Apple / iCal. Google and Outlook open a pre-filled "save event?" prompt in a new tab; Apple downloads a .ics file.

Color overrides (per-card)

Each maps to a CSS custom property on the card wrapper:

• data-color — title bar background (default #000000)
• data-title-color — title bar text + button border color (default #FFFFFF)
• data-bg — window body background (default #FFFFFF)
• data-fg — window body text (default #000000)
• data-shadow — drop-shadow color (default #000000)
• data-accent — link / button hover color (default #001EFF)

Example using LobSTAR colors:

<div data-event
     data-color="#001EFF"
     data-accent="#F2FF00"
     data-label="LOBSTAR"
     data-title="Lab tour"
     data-start="2026-06-20T14:00"
     data-where="EEE 505">
  Open lab session for new members.
</div>

Notes and gotchas

• The Ghost editor preview shows the raw <div data-event> HTML — the styled card only appears on the published post.
• No drag-and-drop image upload. To get a hosted URL, upload via a temporary /image card, copy the rendered URL, paste into data-image, then delete the temporary card.
• All text is set via textContent so attribute values can't inject HTML.
• The implementation lives in assets/js/main.js (renderEventCards, buildCalendarButton, ICS / Google / Outlook URL builders) and assets/css/screen.css (section "9b. Event Card").

Theme customization (Ghost settings)

The theme supports custom site settings available in Ghost Admin under Settings > Design & Branding > Site-wide:

• alert_banner_text: Alert banner text displayed at the top of all pages (if set)
• footer_text: Custom footer description text on all pages
• hero_tag_1_text, hero_tag_1_url, hero_tag_1_color: First hero tag on ICRS landing page
• hero_tag_2_text, hero_tag_2_url, hero_tag_2_color: Second hero tag on ICRS landing page
• hero_tag_3_text, hero_tag_3_url, hero_tag_3_color: Third hero tag on ICRS landing page
• lobstar_support_url: Support/donation URL for the "Support Us" button on LobSTAR Supporters section

Note: The "Support Us" button only appears on the LobSTAR page if lobstar_support_url is configured.