Unsplash Images as Background option

[Futos]

Maybe would be cool to have a option to choose a picture from Unsplash or set a random Image

https://source.unsplash.com/

Full API:
https://unsplash.com/developers

[GammaPi]

@KodeStar @anoma @Futos

There's a quick and dirty solution:

1. Find this file /var/www/localhost/heimdall/app/Providers/AppServiceProvider.php
2. Find the following code

$alt_bg = '';
            if($bg_image = Setting::fetch('background_image')) {
                $alt_bg = ' style="background-image: url(/storage/'.$bg_image.')"';
            } 

3. Modift alt_bg to an image api such as unsplash/bing whatever...

 $alt_bg = '';
            if($bg_image = Setting::fetch('background_image')) {
                // $alt_bg = ' style="background-image: url(/storage/'.$bg_image.')"';
                $alt_bg = ' style="background-image: url(https://source.unsplash.com/collection/962362/daily)"';
            }  

4.Refresh the page

[apiontek]

Just as an additional trick, to make sure the background properly fills/fits when the random image is too big or too small, add the css background-size: cover; so it looks like:

$alt_bg = '';
    if($bg_image = Setting::fetch('background_image')) {
        // $alt_bg = ' style="background-image: url(/storage/'.$bg_image.')"';
        $alt_bg = ' style="background-image: url(https://source.unsplash.com/daily); background-size: cover;"';
    }

[terry90]

If someone ends up on this page, the way I did it is add custom CSS (example.com/settings/edit/10) in settings with:

body #app {
  background-image: url("https://source.unsplash.com/random/3840x2160?nature");
  background-size: cover;
}

You can change the resolution here set to 3840x2160 and the query (nature)

[ja0nz]

Or, if you are in the JS camp, you can get a fit in background image instead😎

const { innerWidth, innerHeight } = window;
const app = document.getElementById("app");
if (app) {
  app.style.backgroundImage = `url('https://source.unsplash.com/random/${innerWidth}x${innerHeight}?nature')`;
}

[shadowbq]

only issue is the constant refresh
Use 'Daily'
https://source.unsplash.com/collection/xxx/daily