Random wallpaper every hour - custom JS

[willart7401]

Just write this code in the Settings -> Advanced -> Custom JavaScript :

function setRandomWallpaper() {

  // List of wallpaper urls you want
  var wallpapers = [
    "https://i.etsystatic.com/40485572/r/il/dbf131/4596931661/il_fullxfull.4596931661_t456.jpg",
    "https://wallpapercave.com/wp/wp4098168.jpg",
    "https://wallpapers.com/images/featured/4k-ultra-hd-mustang-vcoontzbldwccn6z.jpg"
  ];

  var wallpaper = wallpapers[Math.floor(Math.random() * wallpapers.length)];

  document.querySelector("#app").style.backgroundImage = "url(" + wallpaper + ")";
}

// Call the `setRandomWallpaper()` function to set wallpaper on refresh
setRandomWallpaper()

// Call the `setRandomWallpaper()` function every hour.
setInterval(setRandomWallpaper, 3600000);

You can set your own images / url and change the intervall.

I also tried to do it with Unsplash to have more random photos. You have first to create an account and an application in Unsplash to have an API key. After, just write this code in the Settings -> Advanced -> Custom JavaScript (don't forget to replace YOU_API_KEY by your Unsplash App Api Key :

async function setRandomWallpaper() {

  const url = await fetch("https://api.unsplash.com/photos/random?client_id=YOU_API_KEY&orientation=landscape&collections=wallpaper");
  const data = await url.json();
  const wallpaperUrl = data.urls.full;

  document.querySelector("#app").style.backgroundImage = "url(" + wallpaperUrl + ")";
}

// Call the `setRandomWallpaper()` function to set wallpaper on refresh
setRandomWallpaper()

// Call the `setRandomWallpaper()` function every hour.
setInterval(setRandomWallpaper, 3600000);

PS : I set collections to 'wallpaper' (in the request) but you can find your favorite collection or choose a particular filter/theme.

[JFPCreations]

Hi, it's pretty nice code here.
Would it be possible to have all the wallpapers in the heimdall's backgrounds folder to be in the rotation?
Heimdall backgrouds path is https://heimdall.domain.com/storage/backgrounds/wallpapers.jpg

This could be an option directly in heimdall, on/off auto rotation from backgrouds folder. ;)

Thank you.

[willart7401]

Hi, indeed this could be an interesting option, but unfortunately I am not the developer of Heimdall.
I just created this code to have a simple solution.

[Orogin]

I tried your unsplash version. But it changes the image every page refresh/change. Do you know a way to fix this?

[willart7401]

Hi, it's complicated to keep the latest wallpaper when refreshing because it would involve downloading or storing in the cache the latest link or image. You can try to see if it works to store the image in the cache and retrieve it at each refresh to put it back.
If you want to know more you can look at "localStorage" or "sessionStorage" which allows you to store, read or delete data in the cache. You can also ask ChatGPT if you want it to make you a code because unfortunately I no longer have Heimdall installed to test.