> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/crimson/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/crimson/homepage/trending-ticker.md).

# 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.

<figure><img src="/files/pvi9SyIvhFrzPhSgvKQF" alt=""><figcaption><p>Trending Ticker</p></figcaption></figure>

### 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).

<figure><img src="/files/4S1F2LIeRUhzfSasfBjT" alt=""><figcaption><p>Marking a trending post for Ticker</p></figcaption></figure>

{% hint style="warning" %}
Internal tags (those starting with `#`) are commonly used for organizing content without exposing them as public categories.
{% endhint %}

***

### 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

<details>

<summary>Ticker not showing</summary>

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

</details>

<details>

<summary>Ticker won’t stay closed</summary>

* Check if `localStorage` is blocked (privacy mode / strict browser settings)
* Check if another script overwrites the `"ticker"` key

</details>

<details>

<summary>Scrolling looks broken / duplicated too much</summary>

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

</details>