Webhelp Verified

Coding, Webdesign, Homepageerstellung und Programmierung

7
Posts
4
Members
0
Followers

Unsplash Example



Profile picture of Melanie Wehowski

Melanie Wehowski Verified ·

Oder wenn Du das Frdlweb.js Framework ( [https://cdn.startdir.de/webfan.js](https://cdn.startdir.de/webfan.js) ) verwendest im HTM-Markup als Attribut eines Elements: <body webfan-unsplash-keywords="hosting,internet,homepage,community,social,web,festival,unicorn,science,coding,coffee">

Profile picture of Melanie Wehowski

Melanie Wehowski Verified · · Last updated Jul 8, 2023 - 4:51 PM

Source Code from [Frdl.js](https://frdlweb.de/cdn/index "Frdl.js") with random unsplash or random wikimediacommons (from webfan API, cached): ``` const useUnsplash = true; function shuffle(a) { var j, x, i; for (i = a.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); x = a[i]; a[i] = a[j]; a[j] = x; } return a; } function unsplashPicture(el,keyword){ var height = el.offsetHeight; var width = el.offsetWidth; var size = width + 'x' + height; var url = 'https://source.unsplash.com/featured/' + size + '?' +keyword; el.style.background='url(' + url +')'; } async function wikimediacommonsPicture(el,keyword){ var height = el.offsetHeight; var width = el.offsetWidth; var size = width + 'x' + height; var url = 'https://api.webfan.de/v1/random-picture/wikimediacommons/'+width+'/'+height+'/' +keyword; var r = await fetch(url); var j = await r.json(); if(j.result){ el.style.background='url(' + j.result +')'; }else if(true ===useUnsplash){ return unsplashPicture(el,keyword); }else if('coffee'!== keyword){ //return unsplash(el,keyword); return wikimediacommonsPicture(el,'coffee'); }else{ el.style.background='url(https://cdn.startdir.de/logos/bg-light-1.png)'; } } async function randomWallpaper(){ await frdlweb.Webfan.docReady; frdlweb.watch('[webfan-unsplash-keywords]', el=>{ var keyword = shuffle(el.getAttribute('webfan-unsplash-keywords').split(/\,/)).shift().trim(); var randNum = Math.floor(Math.random() * (0 + 2)); if(true === useUnsplash && 1===randNum){ return unsplashPicture(el,keyword); }else{ return wikimediacommonsPicture(el,keyword); } }); } ```

Loading...
![](https://cdn.frdl.de/language-icons@0.3.0/icons/en.svg =32x32) This website uses cookies from various providers. Please read our [privacy policy](https://startforum.de/legal/page/view?pageKey=privacy)! By continuing to use [Startforum.de](http://startforum.de/), you agree to our [terms of use](https://startforum.de/legal/page/view?pageKey=terms) and our [privacy policy](https://startforum.de/legal/page/view?pageKey=privacy) and consent to the use of cookies. ![](https://cdn.frdl.de/language-icons@0.3.0/icons/de.svg =32x32) Diese Internetseite verwendet Cookies verschiedener Anbieter. Bitte lesen Sie dazu unsere [Datenschutzerklärung](https://startforum.de/legal/page/view?pageKey=privacy)! Mit der weiteren Verwendung von [Startforum.de](http://startforum.de/) stimmen Sie unseren [Nutzungsbedingungen](https://startforum.de/legal/page/view?pageKey=terms) und unserer [Datenschutzerklärung](https://startforum.de/legal/page/view?pageKey=privacy) zu und willigen in die Verwendung von Cookies ein.