Unsplash random background Image aus Kollektion Javascript

Schritt 1: Dummy-Script

Zunächst habe ich nach einem konkreten Anwendungsbeispiel gesucht und tatsächlich eines gefunden:

Fetching Image via the Unsplash API (Vanilla Javascript)

In diesem Beispiel wird ein Zufallsbild zum Thema "coffee" aus unsplash rausgepickt und korrekt in einem Bild dargestellt. Das ist zwar nicht genau das, was ich vorhabe, genügt aber als funktionierendes Beispiel als Ausgangsbasis für eigene Experimente.

Schritt 2: Experiment, Test, Repeat

Ein paar Blicke in die unsplash API Dokumentation für die Suche nach dem richtigen Abfragestring genügten, um eine lauffähige GET-Abfrage zusammenzustellen.

In meinem Fall ist das Ziel, ein zufälliges Bild aus einer meiner Kollektionen rauszupicken.

Dies gelingt mit

https://api.unsplash.com/photos/random?collections=CollectionID...

Der vollständige GET-Abfragestring lautet dann wie folgt:

https://api.unsplash.com/
photos/random
?collections=4759555
&count=1
&client_id=geheimenummer

Für die client_id benötigt man einen kostenlosen unsplash-Account und muss mit diesem eine App für die API erstellen. In den Einstellungen der App stehen dann API-Secrets etc. für den Zugriff auf die API.

Hier findet man alle Infos darüber: Unsplash Image API

Schritt 3: Javascript entwickeln

Das vorhandene, funktionierende Beispiel machte es relativ einfach, das JavaScript für die Abfrage so zu verändern, dass genau das dabei herauskommt, was ich mir vorgestellt habe.

Ich habe einfach eine HTML-Datei erzeugt, in der das Javascript direkt in der Seite sitzt und in ein gekennzeichnetes Div die Ausgabe erfolgt. Ich musste ein paarmal in Referenzen nachschauen, wie man dies und das in Javascript bewerkstelligt; z.B. wie gestalte ich das Div dynamisch mit Javascript und wie schreibe ich ein dynamisch erzeugtes Div in das andere Div hinein, das die Photo Credentials (Autor, URL etc.) aufnimmt?

Ein bischen Try and Error und Aussortieren von falschen oder irreführenden Beispielen aus dem Internet später hatte ich mein Script fertig und es machte exakt das, was ich mir vorgestellt hatte.

window.addEventListener('load', loadImg);

function loadImg() {
  const url = "https://api.unsplash.com/" +
    "photos/random" +
    "?collections=4759555" +
    "&count=1" +
    "&client_id=[Geheime Zugriffs-ID aus der Unsplash App]";

  const imageDiv = document.querySelector('section[name=hero]');

  fetch(url)
    .then(response => {
      return response.json();
    })
    .then(data => {
      /*console.log(data[0]);*/

    /* dynamisch erzeugtes Div für die Credentials */
    let picCredentials = document.createElement('div');
      picCredentials.style = "position: absolute; " +
      "bottom: 1px; " +
      "right: 1px; " +
      "color: white;";

    /* das eigentliche Ziel-Element */
    imageDiv.style = "position: relative; " +
      "height: 300px; " +
      "background-color: rgba(0 91 183 / .5); " +
      "background-image: " + "url(" + data[0].urls.regular + "); " +
      "background-size: cover; " +
      "background-repeat: no-repeat; " +
      "background-blend-mode: darken;";


    picCredentials.innerHTML = "<code>" +
      "<strong>Photo Credentials</strong>:" +
      data[0].user.name +
      " | " +
      "<a href='" + data[0].user.links.html + "'>" +
      data[0].user.links.html +
      "</a>" +
      "</code>";

    /* Credentials in Ziel-Element platzieren */
    imageDiv.append(picCredentials);
  });
}

Schritt 4: Implementierung in Drupal

Nun muss das ganze noch Drupal-konform aufbereitet und eingebunden werden:

Adding Assets (CSS, JS) to a Drupal theme via *.libraries.yml

Ich habe die entsprechenden Dinge in den beiden Theme Dateien .libraries.yaml und *.info.yml eingetragen, den Cache gelöscht und es hat alles funktioniert, wie es sollte.

Resümee

Erst mitten im Probieren und Testen war mir aufgefallen, dass die von mir im Theme angelegten section gar kein "name" Attribut haben. Ich hatte es wohl anderswo so gesehen und direkt genutzt, ohne zu verifizieren, ob "name" ein gültiges Attribut von section ist. Auch im CSS lässt sich ein <section name="test"></section> leicht mit section[name=test] abfragen, so dass ich gar nicht auf die Idee kam, dass es "name" gar nicht als Attribut von section gibt.

Da ich nun aber nicht im gesamten Theme alle sections umbasteln möchte, lasse ich es, wie es ist. Bei der nächsten Version des Themes kann ich das mit ändern, das muss ich mir nicht jetzt ans Bein binden.

Das Entwickeln solch einer Lösung für ein gegebenes Problem oder ein Feature ist immer wesentlich leichter, wenn es funktionierende Beispiele gibt, anhand derer man sich langtasten kann. Denn die Beschreibungen in Referenzen oder Dokumentationen sind manchmal schon sehr kryptisch. Man liest es und weiß trotzdem nicht weiter.

Nun kann dieses Beispiel ggf. jemand anders zu einer eigenen Lösung inspirieren. Z.B. ein Wordpress-Plugin damit erzeugen oder etwas in der Art.

Mein Profil bei unsplash ist hier:

https://unsplash.com/de/@phoenixseo

Unter Kollektionen / phoenixseo-collection finden sich die Bilder, die auf dieser Website zufallsmässig oben im Hero-Bereich eingeblendet werden.

Einen schönen Sonntag noch