Trending Ticker

The Trending Ticker is a sticky announcement-style bar that appears at the top of the site and continuously scrolls a list of “trending” post links. Visitors can dismiss it, and that preference is remembered in their browser.

Crimson’s official setup is simple: add the internal tag #trending to a post, and it becomes eligible to show in the ticker.

Trending Ticker

Which posts show up

Source of posts (Trending criteria)

The ticker only renders posts that match this rule:

• ✅ Included: posts tagged with the internal tag #trending

• ❌ Excluded: posts that do not have #trending

When the ticker appears

• If there is 1 or more matching post, the ticker is rendered and visible.

• If there are 0 matching posts, the ticker does not render at all (so there’s nothing to dismiss and nothing stored).

What’s displayed for each post

Each matching post appears as a ticker item containing:

• a hot icon (🔥)

• the post title

• a link to the post URL

---

How to mark a post as Trending

1. In Ghost Admin, open the post you want to show in the ticker

2. Open Post settings (sidebar)

3. Under Tags, add: #trending

4. Click Update/Publish

That’s it — Crimson will include it in the Trending Ticker (and it will display all posts that have this internal tag).

Marking a trending post for Ticker

Internal tags (those starting with #) are commonly used for organizing content without exposing them as public categories.

---

How users can close it

Close control

The ticker includes a close button (X). When a visitor clicks it:

• the ticker is immediately hidden

• the site saves the preference so it stays hidden on future visits

Visibility mechanism (UI state)

The ticker uses a data-visible attribute with two states:

• data-visible="visible" → ticker is displayed

• data-visible="hidden" → ticker is hidden via CSS

What happens behind the scenes

1) Restoring visibility on page load

On page load, the ticker script checks browser storage:

• If stored value is "hidden" → hide the ticker immediately

• If stored value is "visible" → show the ticker

• If nothing is stored → use the default in the markup (visible)

2) Infinite scrolling effect (loop illusion)

To create the never-ending scroll feel:

• the script finds the scrolling container

• it clones the existing ticker items and appends duplicates

• CSS animation scrolls across the extended list

This is purely client-side UI enhancement — it does not fetch more posts.

3) Header/layout recalculation after closing

After the ticker is closed, the script triggers a header position/layout recalculation (if available). This typically runs with a tiny delay so the ticker hides first, then spacing is recalculated to prevent jumps.

---

Browser storage details

Storage type

The ticker uses localStorage (persistent browser storage):

• persists across reloads and new tabs

• remains until the user clears site data, or your code changes/removes it

Key & values

• Key: "ticker"

• Values:

  • "hidden" → user closed the ticker; keep it hidden

  • "visible" → ticker should be shown

When it writes

• On close: writes "hidden" immediately

• On load: if it finds "hidden"/"visible", it applies it to the DOM and may re-save the same value for consistency

---

Best practices

• Keep the ticker curated: 5–12 posts is usually ideal.

• Use #trending for:

  • important announcements

  • current “hot” stories you want to drive traffic to

• Rotate regularly: remove #trending from old posts to keep it fresh.

---

Troubleshooting

Ticker not showing

Confirm at least one published post has the internal tag #trending.

Ticker won’t stay closed

• Check if localStorage is blocked (privacy mode / strict browser settings)

• Check if another script overwrites the "ticker" key

Scrolling looks broken / duplicated too much

Most common cause: the “clone ticker items” step ran more than once (for example, re-initialization without clearing prior clones)