As explained in our old french article, since the appearance of the .heic wallpaper format, I have tried to implement a similar aspect on some of my sites, including weareopensource.me.
I have used the official macOS wallpaper as the background of the landing page/blog with a blur effect from the start. Who says a new version of macOS, says updating the site, and sharing the wallpaper generated with you.
I quickly recap the implementation of this for a ghost blog in English at the end of this article. For a similar web-based setup, you can inspect our open source Vue stack.
It's easy to generate one background per hour and select the appropriate background for each hour of the day. Good luck to those who want to try :).
Big Sur
Catalina
Reminder of the old article:
By the way, it is now possible to create your wallpapers for Mojave. Technical specifications are available here, and a tool has been created here.
Edit ghost theme
The example is on Casper but it can be done on anyone. In the index.hbs file (content / themes / casper / partials / header-background.hbs):
<div class="outer site-header-background responsive-header-img"style="background-image: url(https://blog.weareopensource.me/content/images/size/w1600/2020/11/{{date format='HH'}}.jpeg)>
We simply edit line 6 so that the called image is no longer the one defined in DB via the administration but our specific URL. We slip the time in the name.
Pierre Brisorgueil
