1

I have a simple YOURLS link shortening website running the Sleeky theme plugin. The background set in config.php as

define('backgroundImage', 'https://source.unsplash.com/category/landscape');

It seems the old API does not work any more so the background function is broken.

I tried running the following js to try and make it work but I am obviously doing something fundamentaly wrong:

<script type="text/javascript">
fetch("https://api.unsplash.com/search/photos?query=landscape&client_id=Uy5IEeK_PUDpPksrzxKLZeA3LCN2t3gXjP9ruCiQZfk")
    .then(
        function(response){
            console.log(response);
            
            if(response.status !== 200){
                console.log("There was a problem. Status code: " + response.status);
                return;
            }

            response.json().then(
                function(data){
                    document.body.style.backgroundImage = 'url("data["results"][0]["urls"]["regular"]")';
                }
            )
        }
    )
    .catch(
        function(err){
            console.log(err+'404');
        }
        )
</script>

Console log:

(index):5 Response {type: 'cors', url: 'https://api.unsplash.com/search/photos?query=lands…nt_id=Uy5IEeK_PUDpPksrzxKLZeA3LCN2t3gXjP9ruCiQZfk', redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: trueheaders: Headers[[Prototype]]: Headersappend: ƒ append()delete: ƒ delete()entries: ƒ entries()forEach: ƒ forEach()get: ƒ ()has: ƒ has()keys: ƒ keys()set: ƒ ()values: ƒ values()constructor: ƒ Headers()Symbol(Symbol.iterator): ƒ entries()Symbol(Symbol.toStringTag): "Headers"[[Prototype]]: Objectok: trueredirected: falsestatus: 200statusText: ""type: "cors"url: "https://api.unsplash.com/search/photos?query=landscape&client_id=Uy5IEeK_PUDpPksrzxKLZeA3LCN2t3gXjP9ruCiQZfk"[[Prototype]]: ResponsearrayBuffer: ƒ arrayBuffer()blob: ƒ blob()body: (...)bodyUsed: (...)clone: ƒ clone()formData: ƒ formData()headers: (...)json: ƒ json()ok: (...)redirected: (...)status: (...)statusText: (...)text: ƒ text()type: (...)url: (...)constructor: ƒ Response()Symbol(Symbol.toStringTag): "Response"get body: ƒ body()get bodyUsed: ƒ bodyUsed()get headers: ƒ headers()get ok: ƒ ok()get redirected: ƒ redirected()get status: ƒ status()get statusText: ƒ statusText()get type: ƒ type()get url: ƒ url()[[Prototype]]: Object

Would you be able to steer me in the right direction please?

clkd
  • 11
  • 2
  • What response are you actually getting from the API? Please log the whole thing to console, not just the status property. – CBroe Nov 30 '22 at 08:24
  • I added the log up top – clkd Dec 01 '22 at 06:14
  • You'd have to fish out one of the items from the `results` then, and use one of its `urls` properties. Not sure what you are talking about with the old URL being broken, appears to work fine here, https://source.unsplash.com/category/landscape – CBroe Dec 01 '22 at 06:57
  • @Cbroe Thanks for your input and help. It seems the "old" Unsplash API works again. It did not work for the last few days for some reason. I will continue to use this until it stops working again, but now I have a better idea of how to get it working. – clkd Dec 01 '22 at 17:02

0 Answers0