Video for Publication cover

Themes
1

Hello
is there any way to upload webm format as site cover?
I want to add a video to my site cover, but I don’t want to insert it with theme code.

2

You might find this post helpful:

1 Like
3

Thanks, I searched a lot, I didn’t find this, I try it.

1 Like
4

Unfortunately this doesn’t work, I want to put a vide as my publishing cover in home page.
I used the code but not working. I adjusted the JS to my classes.

5

Can I ask why you want to set a video for the feature image? If you have a gallery of videos you could cause real problems with performance

6

It’s a very lightweight file of 1.1mb, it’s a timelapse for the frontpage, Unfortunately site is not open yet, I give you the link after it’s opened, we are graphic design, Photography studio,

7

You could add the video URL into the site code injection as a JavaScript variable? You could then grab that on the post list page as well as in the single post and apply the video as the feature to the post item. It would also let you add a regular image as a fallback feature :blush:

8

There is anyone who found how to do this?
I want to use a video in loop without audio in my publication cover.
It’s uploaded on youtube.
It would be amazing to find a code that do this to put in the header.

9

Yes, it’s possible to do this. (Not uploading it as the site cover, but using video where the theme currently uses the cover image.) I don’t have code available to share as it’ll need to be customized to exactly the theme used, but the post linked above had several example for how to do it.

10

This is easy enough.

Firstly, if you want to use a .gif you can just directly select the file in the file chooser for the publication cover in your theme settings.

If you want to use something other than a .gif; You’ll need to update the database entry used by the theme for its settings to change specifically the field that contains the image reference (it doesn’t store the image, but the relative link). Just put your video in the right place:

/var/www/ghost/content/images/YYYY/MM/your-video-file.ext

You can also do this to replace low quality versions of a cover with high quality that seem to timeout or fail to upload. Just set the low quality version as the cover, then log in to your VPS and:

  1. ssh <user>@<ghost-instance-host>
  2. cd /var/www/ghost
  3. mv content/images/yyyy/mm/your-low-quality-cover.gif content/images/yyyy/mm/your-low-quality-cover.gif.bak
  4. scp -P <port> <user>@<hq-location-hostname/domain/ip>:~/path-to-hq-cover.gif /var/www/ghost/content/images/yyyy/mm/your-hq-cover.gif
  5. cp content/images/yyyy/mm/your-hq-cover.gif content/images/yyyy/mm/your-low-quality-cover.gif

If it was a gif that was giving issues uploading, you can just refresh your browser, and voila. Now it is uploaded and linked.

However, if it was a video file - you now have to update the theme.

  1. Open (using source theme as reference): current/content/themes/source/partials/components/header-content.hbs
  2. Modify:

<img class="gh-header-image" src="{{@site.cover_image}}" alt="{{@site.title}}">

By replacing it with something sensible for your media (i.e. ):

<video autoplay muted loop ...><source src="you-media.ext" type="video/mp4" ...></video>

Then you’ll need to go into any CSS file and add the styling you’ll need, making sure to properly apply it.

That about does it. If you need step by step instructions beyond that - you should probably study up on HTML/CSS/JavaScript and then go through the Ghost documentation for theme development.