Thumbnails as video preview — clicking thumbnail opens a video player?

Themes
1

I’m interested in a theme like Wave, with one change:

When you click a thumbnail on the main page, it opens a video player with a video (e.g. from YouTube) instead of an audio player with a podcast.

Is this possible with Ghost? Could anybody recommend a way to do this? (And if Ghost isn’t a good fit for a video-first publisher, any other CMS recommendations that could work better for that context?)

2

Yes.

Use the ‘Video Card’ in the editor.

I’d expect it to work in all themes unless the Video Card was somehow hard coded out of the editor. It’ll work on self managed or GhostPro.

You can even add a custom static thumbnail that appears first over the video placeholder when the page loads. Click the thumbnail and the video runs.

You can set the position of the placeholder, set a caption underneath and toggle looping the video on/off.

Surprisingly, none of these editing features are noted, far less explained in the help page I’ve given - they should be.

3

Thank you so much for this input @Coolcmsc . I’m on a free trial for GhostPro, and I can’t find a way to edit the design of the homepage to include a video card thumbnail instead of the “feature image thumbnail.” When I click GhostPro in the admin menu, it says " Your trial ends in 12 days . You can pick a plan now to start your subscription and unlock the full features of Ghost(Pro) right away."

Is the ability to edit the theme design to make this change something that I can’t access in the free trial, and I need to pay a subscription to unlock the “full features” of GhostPro to do this?

This video player thumbnail functionality is the core requirement of the site I’m building, so I would like to verify that’s something that I can do before paying a subscription to find out. I also don’t know which price plan (e.g. Starter, Creator) this feature would fall under? Any insight and guidance from the Ghost team on this would be greatly appreciated.

1 Like
4

I believe free trials have basically all the ghost pro features unlocked.

To edit a theme, you go to /ghost > settings (gear in lower left) > design > change theme, then click the advanced button to reveal a list of installed themes. Clicking … reveals a download option, which will get you a zip containing the theme, that you can edit, zip, and upload.

1 Like
5

So it looks like loop.hbs is where the design for the home page feed (e.g. thumbnails, posts, content previews). I included the default code for loop.hbs from the Wave theme below. Could anybody recommend an edit for this, that will allow the uploading of audio and video cards as thumbnails with a play button, that opens a player when clicked in the main page? This is the behavior I expected from the theme based on the live preview, but I can’t even get the theme working with audio — in the Ghost(Pro) editor, the only thing I can make for a post thumbnail is a Feature Image. Not even an audio card, as the theme shows in the live preview.

<article class="{{post_class}}"{{#if og_description}} data-url="{{og_description}}"{{/if}} data-id="{{comment_id}}">
    <div class="post-media">
        {{#if og_description}}
            <div class="post-play js-play">
                {{> "icons/play"}}
                {{> "icons/pause"}}
            </div>
        {{/if}}
        <div class="u-placeholder square">
            <a href="{{url}}">
                {{#if feature_image}}
                    <img class="post-image lazyload u-object-fit" src="{{img_url feature_image size="m"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}">
                {{else}}
                    <span class="letter">{{title}}</span>
                {{/if}}
            </a>
        </div>
    </div>
    <div class="post-wrapper">
        <header class="post-header">
            {{> "post-meta"}}
            <h2 class="post-title">
                <a class="post-title-link" href="{{url}}">{{title}}</a>
            </h2>
        </header>
        {{#if excerpt}}
            <div class="post-excerpt">
                {{excerpt words="25"}}
            </div>
        {{/if}}
    </div>
</article>

I would experiment more locally, but ghost-cli is telling me nodejs 16.x isn’t supported, even though the help page it redirects to says 16.x is supported. So I can’t get local development working to try different possibilities either.

6

Right. Wave’s doing some trickery to get the information about the podcast url onto the front page, so that it can offer you a link to play it. You can see what’s going on here: About this theme
(Basically, it uses the facebook description as extra storage, because that’s a field handlebars can use. If you look at index.hbs (or one of the partials it calls), you’ll see what it’s doing.

The trick I’ve used previously is to put the video content in as an embed in the post, and then I actually grab the full post content with javascript and replace the featured images with the video player. I did this for a client recently, and you can see it here: CSO - The Stack (Unfortunately not a great demo - looks better when it lands on the big featured post on the front page.) Youtube requires that extra framing, but if you used a different provider, you could make it look really good. I might look at Muse. They’re not free, but their embeds are super clean.

1 Like