Wechselnder Login-Hintergrund

Das erste Bild, welches jeder Anwender sofort bei Seafile zu Gesicht bekommt ist der Login-Screen. Deshalb sollte man diesem auch große Aufmerksamkeit schenken. Firmen sollten sich nicht die Gelegenheit entgehen lassen und dort ein Bild zur Anwendung bringen, welches zum Unternehmen passt. Privatanwender möchten vielleicht ein bischen mehr Überraschung haben und regelmäßig was neues probieren. Dies ist nun ganz einfach, denn in diesem Artikel verrate ich, wie man dafür sorgt, dass bei jedem Aufruf der Login Page ein neues Bild auf den Anwender wartet.

Das Geheimnis nennt sich Unslash Source

Im Prinzip ist es wirklich super einfach. Das Hintergrundbild der Login-Seite wird ganz normal per CSS geladen und dann angezeigt. Natürlich könnte man an dieser stelle regelmäßig den HTML-Quellcode anpassen, jedoch gibt es mittlerweile einen einfacheren Weg. Die Bilderwebseite Unsplash, die für Ihre große Anzahl an freiem Bildmaterial bekannt ist, bietet den Dienst Unsplash Source. Mit Source kann man auf ganz bequeme Art Bilder in Webapplikationen einbinden. Dabei steuert man über die aufgerufene URL das Bild, welches man erhält. Hier ein Beispiel: Jedes Mal, wenn man https://source.unsplash.com/random aufruft, erhält man ein zufällig ausgewähltes Bild. Doch das ist noch nicht alles. Unsplash Source bietet auch die Möglichkeit nur Bilder von einzelnen Anwendern oder mit einer gewissen Auflösung zu bekommen. Da das Login-Hintergrundbild von Seafile idealerweise 2.400 x 1.600 Pixel groß ist, verwendet man optimalerweise diesen Link https://source.unsplash.com/random/2400×1600. Diesen gilt es nun an der richtigen Stelle in Seafile einzubauen…

Unsplash Source für wechselnde Seafile Login-Hintergründe

Unsplash Source einbinden

Der Aufruf des Login-Hintergrundbildes von Seafile erfolgt in der Datei login.html, welche im Ordner seafile-server-latest/seahub/seahub/templates/registration/ liegt. Ein einfacher Texteditor genügt um in dieser Datei den entsprechenden Unsplash Source Link einzubauen. Man sucht in der Datei nach dem CSS-Block #wrapper und ersetzt den bisherigen Aufruf durch den Unsplash Source Link. Hier ein Beispiel:


#wrapper {
	/* original */
	background: url('{{ MEDIA_URL }}{{login_bg_image_path}}') center top no-repeat scroll;
    
	/* neu */
	background: url('https://source.unsplash.com/random/2400x1600') center top no-repeat scroll;
   	...
}

Danach muss noch Seahub neu gestartet werden und schon kann es losgehen. Bei jedem Aufruf der Seafile Login-Seite wird ein neues Bild von Unsplash geladen.

Update sicher machen

Wie man schon am Speicherort der login.html sehen kann, geht diese Anpassung beim nächsten Seafile Update verloren. Deshalb muss die login.html an einen Ordner verschoben werden, die auch zukünftige Updates übersteht. Wie das funktioniert, wird im englischsprachigen Seafile Manual beschrieben.

Beispiel für wechselnde Login-Bilder

Angezeigte Bilder steuern

Damit sind bei weitem noch nicht die Möglichkeiten von Unsplash Source ausgeschöpft. Wer z.B. wechselnde aber dafür ausgewählte Bilder verwenden möchte, sollte sich überlegen eine eigene Collection bei Unsplash anzulegen. So kann man sicher sein, dass nur ausgewählte Bilder angezeigt werden.