Durch die Einschränkung von Instagram, nur einen einzigen Link im Profil zuzulassen, entstand ein verbreitetes Bedürfnis nach zentralen Verweislösungen – sogenannte Linktree-Seiten etablierten sich rasch als Standard. Auch in meinem Fall bestand die Herausforderung darin, mehrere Projekte über eine zentrale Einstiegseite zugänglich zu machen. Die bestehende Startseite, ursprünglich rein funktional als Sammlung von Weiterleitungen gedacht, genügte weder gestalterischen noch strukturellen Ansprüchen. Im Zuge des Updates auf Joomla! 5 und der Umstellung auf das Cassiopeia-Template bot sich die Gelegenheit zur technischen und konzeptionellen Neuausrichtung. Welche Überlegungen diesen Prozess geprägt haben, wie sich die Struktur entwickelt hat und welche Lösung daraus hervorging, erläutere ich im Folgenden.
Die Idee
Die meisten Projekte sind ohnehin primär über ihre jeweiligen Subdomänen erreichbar. Doch es kommt vor, dass Nutzer direkt auf die Hauptdomäne stoßen. Um in diesem Fall weder eine Fehlermeldung anzuzeigen noch eines der Projekte unangemessen hervorzuheben, entstand eine eher unansehnliche Übergangsseite. Glücklich war ich mit dieser Lösung nie – aber es fehlte die zündende Idee. Und wie das mit Provisorien so ist: Sie haben die unangenehme Eigenschaft, sich dauerhaft einzunisten.
Die Webseite lief noch auch Joomla! 3 und benötigte dringend ein Update auf Joomla! 5. Das alte Template, dass auf Gantry Helium basierte, funktioniert zwar auch auf Joomla! 5, aber ich nutze bei so großen Updates und wenn ich das Design ändern will, gerne die Möglichkeit über den Tellerrand zu schauen. Ab Joomla! 4 ist das Standardtemplate Cassiopeia verfügbar, welches meiner Meinung nach ein sehr gelungenes Template ist. An dieser Stelle einmal Kudos an die Entwickler*Innen des Templates.
Cassiopeia basiert auf Bootstrap 5 und somit sollte es ein Leichtes sein auch besondere Sachen einfach bauen zu können. Die Idee war simpel: Zuoberstsollte ein Bild von mir, danach der Name, gefolgt von einer kurzen Beschreibung, den Social Links und dann den Projektlinks sein. Das Ganze sollte dann natürlich auch gut auf Smartphones und großen Bildschirmen skalieren.
Erster Entwurf
Der erste Entwurf war nicht so schnell erzeugt wie zuerst gedacht. Zuerst habe ich einen kleinen Artikel gehabt, die Links dann aber in Modulen verteilt und beim Probieren war es viel hin und her klicken,Sodass ich dann doch erstmal alles in einen Artikel gepackt hatte, um alles an einem Platz zu haben.
Designs und Templates geslalten ist nun auch nicht mein Spezialgebiet. Bis es dann das erste Mal halbwegs nach etwas aussah, musste ich viel probieren und mir erst wieder die Funktionen von Bootstrap drauf schaffen.
Es gibt auf der Bootstrap Seite immer schöne Beispiele, aber wenn dann doch noch was hinzugefügt werden soll, muss man trotzdem erst einmal selbst die Details verstehen. So wollte ich zuerst nur einen Container erzeugen und von dort an mit Zeilen und Spalten arbeiten und zwischendrin die Links einbauen.
<div class="container">
<div class="row">
<a href="/..." class="btn btn-primary btn-lg mb-3">
<div class="col col-md-1">
<img src="/..." data-alt="..." />
</div>
<div class="col col-md-11">
...
</div>
</a>
</div>
<div class="row">...</div>
</div><div class="container">
<a href="/..." class="btn btn-primary btn-lg mb-3">
<div class="row">
<div class="col col-md-1">
<img src="/..." data-alt="..." />
</div>
<div class="col col-md-11">
...
</div>
</div>
</a>
<a ...>...</a>
</div>Allerdings musste ich dann relativ schnell feststellen, dass ich da etwas falsch gewickelt war und die CSS Regeln fragiler sind als gedacht. Damit die CSS Regeln funktionieren, müssen die Kindelemente für Spalten und Zeilen direkte Kindelemente sein. Jedes andere Element, wie hier das Linkelement a, unterbrechen die Erbfolge und zerstören das Styling.
Manchmal allerdings so dezent, dass man es nicht direkt merkt und munter weiter bastelt und sich dann wundert, dass es sich anders verhält.
Schlussendlich habe ich dann die richtige Kombination für mich dahingehend gefunden, dass das Linkelement das Elternelement ist. Jedes Linkelement ist als Button gezeichnet und beinhaltet einen eigenen Container mit einer Zeile und zwei Spalten, um ein Bild und Text zu visualisieren.
<a href="/..." class="btn btn-primary btn-lg mb-3">
<div class="container">
<div class="row">
<div class="col col-md-1">
<img src="/..." data-alt="..." />
</div>
<div class="col col-md-11">
...
</div>
</div>
</div>
</a>
<a ...>...</a>
Was kommt nach dem PoC?
Der Proof of concept war erfolgreich, jetzt geht es an die Feinheiten. Aber Moment, alles in einem Artikel zu haben und manuell zu editieren war zwar einfach und schnell, aber nicht sinnvoll für den Produktivbetrieb. Der Komfort fehlt an der Stelle. Aber wie kann man das Ganze komfortabler machen?
Streng genommen ist eine Liste von Links nichts anderes als ein Menü. Könnte man ein Menü nicht dahingehend gestalten, dass es die Funktionalität übernimmt? Es gibt schließlich die Template Overrides in Joomla!.
Was ist ein Template Override?
Jeder Bereich auf einer Webseite wird durch irgendeine Komponente, ein Modul oder ein Plugin generiert. Jede dieser Erweiterungen hat eine Vorlage, wie sie Dinge generiert und darstellt. Die Webseite an sich hat ein Template welches festlegt, wie die Webseite auszusehen hat. Dieses Template stellt benamte Bereiche bereit in die die Erweiterungen wiederum ihre Inhalte positionieren können, welche Farben und sonstige Gestaltungen benutzt werden. Die in Joomla! erstellbaren Menüs zählen zu dem Erweiterungstyp Modul. So kann die Darstellung von Menüs ebenfalls durch Template Overrides beeinflusst werden.
Einen Override erstellen
Joomla! bietet über den Administratorbereich die Möglichkeit mit einem Knopfdruck eine Kopie des Templates für das Menü anzulegen und ihm gegebenenfalls einen anderen Namen zu geben.
Wie Overrides im Detail erstellt werden, könnt ihr in der Joomla! Dokumentation und auf joomla.org nachlesen.
Von den erstellten Override Dateien brauchte ich nur die default.php und default_url.php, welche ich zu linktree.php und linktree_url.php umbenannt habe. Dann noch schnell, wie gewohnt, ein neues Menü und das dazugehörige Modul erstellt. In den Menümoduleinstellungen kann dann unter dem Reiter Erweitert im Auswahlfeld Layout der gerade erstellte Override ausgewählt werden. Cassiopeia macht standardmäßig noch einen Rahmen um jedes Modul. Wenn man das nicht will, wählt man weiter unten bei Modulstil noch noCard aus. Ich habe dann den Titel ebenfalls ausgeschaltet und das Modul in der Position main-bottom, die Cassiopeia bereitstellt, eingefügt.
Dann wurden alle nicht benötigten Teile aus dem Override herausgelöscht und meine zuvor erzeugte div Struktur so eingebaut, dass der gewünschte Effekt erzeugt wird.
Dem umschließenden Div des Menüs wurde die Klassen d-grid linktree gegeben, um die einzelnen Buttons auf ganzer Breite mit einem links angebrachten runden Bild anzuzeigen.
.linktree .card-img-left {
width: 100%;
height: 100%;
background-color: rgba(224, 224, 229, 0.4);
border-radius: 50%;
}Die resultierenden Links, welche vertikal gelistet werden, haben dann folgendes HTML Schema.
<a href="https://xyz.qwe" class="btn btn-primary btn-lg mb-3"> <div class="container">
<div class="row align-items-center">
<div class="col col-md-1">
<img class="card-img-left " src="/..." />
</div>
<div class="col col-md-11">
...
</div>
</div>
</div>
</a>Den fertigen Override könnt ihr in meinem GitHub Profil svanschu finden.
Mit dem Override kann in dem erstellten Linktreemenü einfach ein neues Item anlegen werden. Die Menüeinträge haben zum Teil zwei Zeilen.Das habe ich einfach dadurch gelöst, dass im Titel die erste von der zweiten Zeile mit einem ___ dreifachen Unterstrich als Trennsymbol getrennt sind. Das Bild wird über den Reiter Linktyp hinzugefügt.
Jetzt sind die großen Links versorgt und ich kann in Zukunft einfach ein neues Menü Item anlegen und es ist direkt passend formatiert.
Social Links
Es fehlen noch die Links zu den sozialen Netzwerken, welche natürlich auch durch ein Override als Menü administriert werden können. Dafür legte ich noch mal ein neues Override an, das ich dieses Mal linktreesocial.php und linktreesocial_url.php nannte.
Die Social Links sollen mit kleineren Buttons horizontal angeordnet und durch ihre netzwerkspezifischen Icons dargestellt werden. Die linktreesocial.php ist nahezu identisch zur linktree.php. Einzig die CSS-Klasse des umschließenden div ändert sich von d-grid linktree zu linktree_social und statt des Layouts linktree_url wird jetzt linktreesocial_url aufgerufen.
.linktree_social {
text-align: center;
}
.linktree_social button {
margin-left: 5px; margin-right: 5px;
}Für die Icons wird auf die Bibliothek Fontawesome zurückgegriffen, welche mit Joomla! 5 bereits mitgeliefert wird. Eingefügt werden diese dann dynamisch mit dem kleinen HTML snippet.
<i class="fa-brands ' . <?php echo $iconClass ?> . '"></i>
Die Icon CSS Klassen setzen sich dann in dem Muster fa-x-twitter, fa-mastodon, fa-github etc. zusammen und werden anhand der hinterlegten URL im Menü Item automatisch erkannt. Die klassische Option über die Administrationsoberfläche ein Icon manuell zu setzen, bleibt dabei erhalten.
Das Icon und gegebenenfalls der Menütitel werden dannvon dem HTML Link Tag umschlossen und dieser wiederum von dem eigentlichen Button Tag, der wie folgt aufgebaut ist.
echo '<button type="button" class="btn btn-light">' . $link . '</button>';
Und schon ist der Override für den horizontalen Bereich mit den Links zu den sozialen Netzwerken fertig. Den fertigen Override könnt ihr in meinem GitHub Profil svanschu finden.
Fazit
Nicht immer braucht es aufwendige Erweiterungen und Plugins, die von jemandem gepflegt werden müssen, oder einen externen Dienst. Oft genügt ein vernünftiges und flexibles Template, dasCassiopeia definitiv darstellt, mit ein paar passenden Overrides.