Dark-mode, Icons im Header, Textslider: Kleine, aber feine neue Features. Hier gibt es wie gewohnt eine leserliche Übersicht über neue Funktionen und Verbesserungen bei OpenCulturas.
Das Barrierefreiheitsstärkungsgesetz ist in Kraft und war uns zwischenzeitlich natürlich ein Anlass, nochmal zu prüfen, ob wir bezüglich Zugänglichkeit noch etwas machen sollten. Weil bei OpenCulturas aber schon in der Entwicklung großen Wert auf Barrierefreiheit gelegt wurde, haben wir nichts Problematisches gefunden.
Wir finden aber, dass der Dark-Mode auch mit Blick auf mögliche Barrieren eine große Hilfe ist. Aktuell ist noch fraglich, ob das eine Vorgabe für Web-Anwendungen wird, aber uns geht es mehr um eine bessere Welt für alle als um das Erfüllen von Vorgaben.
Dark-Mode einstellbar machen
Viele Menschen empfinden es als schonender für die Augen, Seiten am Bildschirm mit dunklem Hintergrund zu betrachten. Auskenner:innen sprechen vom "Dark-Mode". OpenCulturas ermöglicht jetzt das Umkehren des Farbschemas. Damit sich das nicht einfach in eure bestehende Plattform hineinmogelt, sind ein paar Einstellungen erforderlich (Administrationsrolle):
- Modul Dark Mode Toggle aktivieren
- Block gleichen Namens (ggf. suchen nach "Farbschema" bzw. "Color scheme") in der Region Utilities links platzieren: URL /admin/structure/block oder übers Menü: Struktur > Blocklayout. Und sicherstellen, dass "Titel anzeigen" aktiviert ist
Besucher:innen können jetzt wählen zwischen zwischen diesen Farbschemas:
- Hell (bis bisher)
- Automatisch (folgt der Einstellung des Betriebssystems)
- Dunkel (erzwingt den Dark-Mode)
Die Einstellung wird auch ins Back-End übernommen, so dass man beim Bearbeiten eines Inhalts nicht unerwartet angestrahlt wird.
Managed OpenCulturas
Alles was ihr braucht, stellen wir in einem CSS-Injector bereit. Die Farben könnt ihr dann selbst anpassen. Sprecht uns an, wenn Ihr Unterstützung benötigt!
Plattformen mit eigenem Design (Theme)
Ihr wollt sicherlich die Farben in eurem Design anpassen. Wenn ihr mit den Farbvariablen (CSS custom properties) gearbeitet habt, geht das ganz schnell. Im OpenCulturas-Theme findet ihr in dieser Datei ab ca. Zeile 260 die Farbvariablen, die ihr in euer Theme kopieren und dort anpassen könnt: profile/themes/openculturas_base/scss_config/_variables.scss.
Danach wollt ihr noch diese Dateien zur Kenntnis nehmen:
- profile/themes/openculturas_base/templates/page/header.scss (Zeile 95)
- profile/themes/openculturas_base/scss_config/dark-mode/_index.scss
- profile/themes/openculturas_base/scss_config/style.scss (and cke5-wysiwyg.scss) für die Integration von SCSS-Dateien für den Dark-Mode
Utility-Icons im Header
Wir haben uns selbst einen Wunsch erfüllt und die Funktionslinks im Seitenkopf modernisiert. Wie ihr es von anderen Plattformen kennt, sind jetzt alle Funktionen (und funktionsähnliche Menüs) kompakt über Icon-Buttons zugänglich, natürlich barrierefrei gebaut:
- Sprache wechseln
- Farbschema (Stichwort Dark-Mode, siehe oben)
- User-Menü (Anmelden, Registrieren, Abmelden etc.)
Wer den Sprachwechsler ohnehin ausgeblendet hat oder doch lieber die Sprachen als Links nebeneinander und überhaupt alles so behalten möchte wie es ist, braucht nichts weiter zu tun.
Zum Anpassen eurer Plattform geht ihr mit der Administrationsrolle in die Blockverwaltung: URL /admin/structure/block oder übers Menü: Struktur > Blocklayout und folgt den nachfolgenden Schritten:
Sprachwechsler
- Block Language (Systemname: language_toggle) in der Utilities-Region aktivieren und sicherstellen, dass "Titel anzeigen" aktiviert ist. Dieser Titel wird dann automatisch umgewandelt in den erwarteten Icon-Button.
- Den Block Language switcher im gleichen Zuge deaktivieren.
In einem eigenen Theme könnt ihr den Block auch selbst anlegen, stellt nur sicher, dass der Systemname (machine name) gleich lautet. CSS-Anpassungen sollten eigentlich nicht erforderlich sein, aber das könnt ihr selbst besser beurteilen.
User-Menü (Benutzermenü)
Block Account (Systemname: utility_menu_account) in der Utilities-Region aktivieren und sicherstellen, dass "Titel anzeigen" aktiviert ist. Dieser Titel wird dann automatisch umgewandelt in den erwarteten Icon-Button.
In einem eigenen Theme: siehe Sprachwechsler.
Änderung am Header-Layout
Wir haben angefangen, das Basis-Theme etwas aufzuräumen. Im Zuge dessen und im Zusammenhang mit den neuen Header-Icons haben wir das Header-Layout dezent verbessert und die Elemente in eine Flucht gesetzt. Idealerweise fällt es euch gar nicht auf, aber achtet beim Update bitte darauf, ob z. B. das Logo noch passend sitzt.
Text-Slider
Verschiedentlich wurde schon gefragt, wie sich Testimonials einpflegen lassen. Die Gesellschaft zur Entwicklung von Dingen hat das jetzt in die Hand genommen und einen neuen Abschnittstyp gesponsert, zunächst in einer ganz basalen Form: Der Inhalt von Textfeldern kann in einem Slider ausgespielt werden, vergleichbar der Mediengalerie. Jedes Textfeld produziert eine neue Folie. Dabei kann ausgewählt werden, ob eine einzelne Folie oder zwei gleichzeitig im Fokus stehen.
Die Gesellschaft zur Entwicklung von Dingen wird mit dem Eingabeformat "Vollständiges HTML" über Quellcode-Eingabe jeweils Blockzitat und Zitatgeber:in einbauen. Sinngemäß wird der Inhalt eines Textfelds so bestückt:
<figure>
<blockquote>
Das neue System ist superschnell und die Nutzer*innen sind total zufrieden.
Auch die Entwicklung lief mit so einer Leichtigkeit, das kenne ich von anderen
Entwicklungsteams ganz anders. Bei euch fühlt man sich wirklich als Teil des Teams.
</blockquote>
<figcaption>Begeisterte Kundin</figcaption>
</figure>Wir sind gespannt darauf, welche Ideen ihr damit umsetzt, lasst es uns wissen!
Handreichungen im Code
Es gibt jetzt ein paar mehr Textdokumente im .md-Format in der Code-Basis. Es geht um Entwicklungsprinzipien, Beiträge zur Software und eventuelle Sicherheitsmeldungen. Lest gern mal rein.
Und wenn ihr Verbesserungsvorschläge habt: auch das wäre schon ein wertvoller Beitrag zur Verbesserung der Software, und dafür braucht man keine Programmierkenntnisse, lediglich ein gutes (englisches) Sprachgefühl.
Wichtige Änderungen an Modulen
Diese Informationen sollten für euch nur relevant, wenn ihr eigene Patches für folgende Module erstellt hattet:
Das Tour-Modul ist in der neuen Hauptversion integriert. Damit entfallen Zusatzmodule, deren Funktionalität jetzt in der Hauptversion enthalten ist:
- Tour enhancements
- Tour UI
Linkit und Image widget crop haben ebenfalls neue Hauptversionen bekommen.
