ICRS Theme Content Guide

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

How the theme is organized

The theme has two main surfaces:

1. Main ICRS home page (from index.hbs)
2. LobSTAR landing page (from page-lobstar.hbs, usually for slug lobstar)

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 12 posts)

• #icrs-sponsor

  • Used for the sponsor grid on the home page.
  • Query: tag:hash-icrs-sponsor (all 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 (all posts)

• #lobstar-subsystem

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

• #lobstar-team

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

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.