By Cathy Sarisky, Ghost Expert in Client Stories — May 11, 2024

Client stories: CSO Futures

Faking events and locations in Ghost

A screenshot from CSO Futures' events page.

Introducing, CSO Futures! This was a fun build, since I got to do a landing page and several interesting layouts for Ghost. Everything is built in Ghost, and almost entirely user-editable. I was working from a static image of each page, although we had some changes along the way. Let's walk through the features, shall we?

Homepage

That top section is actually a short video. We're playing directly from the Ghost site, and there are actually a couple different versions of the video, switching what's playing based on screen size.

How's it do in terms of speed? Page speeds are in the low 90s on desktop, low 60s on mobile. Mobile is being hit by the video – even resized, it's just a huge hit on largest contentful paint (LCP) metric to load a video on a simulated slow phone.

The mock-up had small amounts of text in those counters, which didn't survive collision with what the clients actually wanted to put into them, and they wanted to be able to change them. So they're a custom variable (yes, just one) in JSON format in the Ghost admin panel. It's not a great editing experience, but it works OK. I gave them a nicely expanded JSON file that they can open in a text editor, edit, and paste into the dinky box in Ghost, to make it as painless as possible.

The upcoming events section originally had this really cool overlaid text. I worked really hard on getting it just right, on all screen sizes. Then the clients decided that they were going to put a ton of text in the images, so I took it all back off. (Sob.)

Events page

Here's a bit of their events page. The big challenge, of course, is that Ghost is a blogging platform, not an events platform. Still, this seemed like a case where we could make it work in Ghost. There were a few things working in my favor:

The events just needed to click over to LinkedIn. What's in Ghost is basically an advertisement for the LinkedIn event.
They only planned to have a handful of events listed at any time.

So, how'd we make Ghost do that? Those of you who are being especially observant might notice a date and location on the second card! (And I'm wondering why there isn't one on the first card. Maybe they forgot it?) Those fields actually live in the post's codeinjection_foot, and look something like:

<div class='date'>June 3, 2024</div>
<div class='location'>New York City</div>
<div class='price'>$25.00</div>

I wrap the {{codeinjection_foot}} in some divs that make it invisible there, but I also put that helper right into the event card code. My underlying assumption is that the client isn't going to use the code injection footer on a specific post anyway.

That just left the link, which we put into the canonical URL field. Normally, using the canonical URL field is a terrible idea, because it makes the post disappear from the sitemap, but in this case, we do literally want what's on LinkedIn to be the official copy, so it's perfect!

So, it's not a huge calendar implementation, but it does do what it needs to do here. I think we need better than this, but just a couple custom fields for Ghost would go a long way.