Mercury Dokumentation

Artikel:Der Formatter „Akkordeon Artikel Aufmacher“

Der Artikel ist geeignet um News, aktuelle Meldungen oder Blogs mit optionalen Bildern und Texten in mehreren Absätzen zu erstellen.

Der Akkordeon Aufmacher stellt den Inhalt in der Form eines Akkordeons dar, welches automatisch durch die Liste erzeugt wird.

Eine Besonderheit von Akkordeon-Listen ist, dass diese NICHT auf eine Detailansicht verlinken, da alle wesentlichen Informationen aus dem Inhalt bereits in dem Akkordeon angezeigt werden.

Dieser Aufmacher kann nur in einer statischen Liste verwendet werden.

Zurück

Liste mit Akkordeon Artikel Aufmachern

Frau schaut durch eine Lupe

Das Inhaltselement „Meta-Info“ wurde erweitert und kann nun auch zur Beeinflussung der Trefferreihenfolge in der internen Suche verwendet werden.

Eine junge Frau liegt auf dem Boden und liest Bücher

Der Storyteller baut eine bildschirmfüllende Abfolge von animierten Inhalten mit eigener Navigation auf. Die Anzeige jeder einzelnen „Seite“ kann dabei individuell eingestellt werden.

Vertraulich bis zur Veröffentlichung

Inhalte, z.B. Nachrichten-Artikel, die bis zur ihrer Veröffentlichung auch im Offline-Projekt nur für bestimmte Redakteure sichtbar sein dürfen, können nun einfach im Editor angelegt werden.

Hin und wieder kommt es vor, dass bestimmte Inhalte, z.B. Nachrichten-Artikel, bis zur ihrer Veröffentlichung auch im Offline-Projekt nur für bestimmte Redakteure sichtbar sein dürfen, während sie nach der Veröffentlichung für alle sichtbar sein sollen. Mit Version 23-12 können solche Inhalte nun einfach im Editor angelegt werden. Vorher war dies nur mit hohem Aufwand durch manuelles Setzen von Berechtigungen möglich. 

Mercury Newsletter im 'Cöln' Layout

Der in der letzten Version hinzugefügte Newsletter im „Cöln“ Layout wurde um zusätzliche Ausgabemöglichkeiten erweitert. Möglich ist nun unter anderem die Verwendung von Icons sowie das links bzw. rechts Anordnen des Bildes neben den Text.

Folgende Ausgabemöglichkeiten sind neu dazu gekommen:

  • Social-Media Links.
  • Personen bzw. Kontaktelement mit Bild und Text.
  • Darstellung von Veranstaltungen mit „Kalenderoptik“.
  • Inhalts-Abschnitt, Artikel und Veranstaltung mit Bild links bzw. rechts.

Die neuen Ausgabemöglichkeiten sind selbstverständlich kombinierbar mit den bereits vorhandenen.

Icons auf einem Bildschirm

Zusätzlich zu den bisher vorhandenen „Awesome“ Icons sind nun über 1500 zusätzliche Icons hoher Qualität aus dem Bootstrap-Projekt verfügbar. Diese sind überall verwendbar, wo Icons über einen Namen angegeben werden können.

Bootstrap bietet seit der Version 5 einen umfangreichen Satz von über 1500 Icons, welcher aktiv weiter entwickelt wird. Die Bootstrap-Icons sind mit Meilenstein 23-03 vollständig in das Mercury Template integriert.

Die bisher verwendeten Fork (Font) Awesome Icons stehen weiterhin zur Verfügung. Eine Kombination von Icons aus verschiedenen Sätzen auf einer Webseite ist problemlos möglich.

Namensschilder von Personen

Die Inhaltselemente Organisation und Person lösen zukünftig das Element Kontakt-Information ab. Es wird empfohlen, für neue Websites nur noch diese Elemente zu verwenden.

Durch die Trennung in zwei verschiedene Inhaltselemente kann die Eingabemaske besser auf das jeweilige Element abgestimmt werden. Außerdem können spezialisierte Funktionen angeboten werden. So kann z.B. die Organisation auf eine übergeordnete Organisation verweisen, und Personen können einer Organisation zugeordnet werden. Dadurch können hierarchische Strukturen zwischen verschiedenen Abteilungen oder Trägern abgebildet werden. 

Organisation

Das Element Organisation ermöglicht das Darstellen von Organisationen bzw. Unternehmen, Trägern oder Abteilungen.

Eine Besonderheit ist, dass Inhaltselemente vom Typ Organisation auch miteinander verknüpft werden können, so dass eine Hierarchie oder Struktur einer größeren Organisation abgebildet werden kann. Mit dem Formatter Organisation erweiterte Detailansicht wird diese Hierarchie automatisch angezeigt und verlinkt.

Ebenfalls können Elemente vom Typ Person als Kontaktperson einer Organisation zugeordnet werden.

Zur Demo

Person

Das Element Person ermöglicht das Darstellen von Personendaten.

Personen können einer Organisation zugeordnet werden.

Zur Demo

Nachteile des Elements Kontakt-Information

In der Eingabemaske der Kontakt-Information besteht das Problem, dass zwei verschiedene Inhalte in einer Maske eingegeben werden können, wobei die Auswahl im Feld Art des Kontaktes entscheidet, um was es sich handeln soll.

Die Art des Kontaktes ist mit Person vorbelegt. Das hat in der Praxis dazu geführt, dass manchmal von der Redaktion Daten einer Organisation eingegeben werden, ohne im Feld Art des Kontaktes auch Organisation auszuwählen. Trotz der falschen Einstellung unterscheidet sich die Ausgabe auf der Seite nur geringfügig und wird dadurch selten bemerkt. Manchmal gefällt der Redaktion die eigentlich falsche Ausgabe sogar besser.

Wichtig zu wissen ist, dass für alle Kontakte in der Webseite für den Menschen unsichtbare Informationen abgelegt werden, mit denen Suchmaschinen - wie z.B. Google - erkennen können, dass es sich um eine Person oder Organisation handelt. Dazu werden die Daten gemäß dem schema.org Standard ausgezeichnet.

Wenn nun die Daten einer Organisation eingegeben werden, aber bei Art des Kontaktes Person ausgewählt ist, so werden die Informationen für Suchmaschinen unsichtbar als Person markiert. Dies kann zu Problemen im SEO-Ranking einer Seite führen.

Verfügbarkeit des Elements Kontakt-Information

Ob und wie das Element Kontakt-Information in Ihrer Webseite verfügbar ist hängt davon ab, wie Ihr Server eingestellt wurde. Folgende Szenarien sind möglich:

  • Es stehen nur Organisation und Person zur Verfügung, es gibt keine Kontakt-Information. Dies ist bei Installationen seit Meilenstein 20 die Vorgabe.
  • Organisation und Person sind verfügbar, vorhandene Kontakt-Informationen können weiterhin bearbeitet, aber nicht mehr neu angelegt werden. Wir empfehlen diese Einstellung für ältere Installationen. In diesem Fall können bestehende Inhalte weiter verwendet werden, neue Inhalte hingegen werden mit den neuen Elementen angelegt.
  • Organisation, Person und Kontakt-Informationen sind gleichzeitig verfügbar. In diesem Fall können alle Inhalte nebeneinander neu angelegt werden. Wir raten von dieser Einstellung ab.

Strandhaus Nummer 5

Das Mercury Template wurde auf die aktuelle Version Bootstrap 5.2 umgestellt. Die Umstellung wirkt sich automatisch auf alle bestehenden Webseiten aus, die Mercury verwenden.

Bootstrap 5 gewährleistet, dass zukünftige Weiterentwicklungen des Templates von den modernsten CSS Funktionen profitieren können. Die Umstellung wirkt sich automatisch auf alle bestehenden Webseiten aus, die das Mercury-Template verwenden.

Bootstrap 5 bietet verschiedene Neuerungen, unter anderem:

Bildschirmgröße XXL hinzugefügt

Mit XXL unterstützt Bootstrap 5 eine zusätzliche Bildschirmgröße. Damit kann auf großen Desktop-Bildschirmen mehr Inhalt dargestellt werden. Diese zusätzliche Bildschirmgröße steht automatisch auf allen Webseiten zur Verfügung. 

Verwendung von CSS Custom Properties

Bootstrap 5 verwendet moderne Webdesgin-Techniken wie CSS Custom Properties. Oft auch als CSS-Variablen bezeichnet, machen diese das Gestalten mit CSS für Agenturen sehr viel einfacher.

Keine Unterstützung mehr für Internet Explorer

Bootstrap 5 unterstützt Internet Explorer nicht mehr. Dieser ist inzwischen veraltet und wird aufgrund diverser Sicherheitslücken von Microsoft - zugunsten von Edge - nicht mehr weiterentwickelt.

Es wurde sorgfältig darauf geachtet, dass bestehende Mercury-Sites nach der Umstellung genauso dargestellt werden wie vorher. Eventuell können sich in Details minimale Abweichungen ergeben, welche aber Verbesserungen sein sollten. Sollte sich nach der Umstellung die Darstellung einer Mercury-Site wesentlich zum Schlechteren verändert sein, so informieren Sie bitte Alkacon Software bzw. Ihre OpenCms-Administration.

Weitere Infos auf der Bootstrap Website

Roboter

Captchas werden häufig in Formularen verwendet, um sicher zu stellen, dass die Eingaben durch einen Menschen erfolgen. 

Mit Meilenstein 16 wird die Verwendung externer Captchas für das Formular ermöglicht. Unterstützt werden entweder Friendly Captcha oder Google reCAPTCHA. Ist ein externer Anbieter konfiguriert, so werden die Captchas in allen Formularen automatisch durch den konfigurierten Anbieter ersetzt.

Das Mercury Template verwendete bisher ein selbst erzeugtes Captcha. Dieses ist nicht mehr zeitgemäß, da mittlerweile „Formular-Bots“ in der Lage sind dieses zu überwinden. Es gab in der jüngeren Vergangeheit bereits Vorfälle, in denen Formulare, die das alte Capcha verwenden, mit sinnlosen Anfragen „überflutet“ wurden. 

Mehr über Captchas in der Wikipedia

Notebook eines Bloggers mit rotem Getränk

Für die Darstellung von Blogs gibt es mit Meilenstein 15 zusätzliche Formatter, die für die Listen- und Detaildarstellung verwendet werden können.

Die Darstellung der Listen-Aufmacher für einen Blog unterscheidet sich stark von den anderen Aufmacher-Arten wie z.B. dem Ausführlichen Aufmacher. In den Aufmachern für Blogs werden z.B. alle Formatierungen wie Fett oder Kursiv dargestellt. Auch Zeilen- oder Absatzumbrüche sowie Links werden wie eingegeben angezeigt. 

Folgende Elemente können in der speziellen Blog-Darstellung verwendet werden:

  • Artikel
  • Lockvogel
  • Medien

Für Blogs ist das Ziel, die Liste als einen fortlaufenden Text darzustellen. Die Layout-Anordnung von Überschrift, Text und Bild ist dabei vorgegeben.

Ein buntes durcheinander von Farben und Pinseln

Blog Listendarstellung

Durch verschiedene Element-Einstellungen in der Liste kann die Blog Darstellung weiter angepasst werden.

Die folgenden Element-Einstellungen stehen speziell für Listen mit Blog Aufmachern zur Verfügung:

Anzuzeigende Absätze 

Legt fest. wie viele Absätze aus dem Inhalt bereits in der Liste dargestellt werden.

Im Gegensatz zu den meisten anderen Listen-Aufmachern findet keine Textkürzung im Blog Listen-Aufmacher statt. Statt dessen wird immer mindestens der erste Ansatz vollständig dargestellt.

Mit dieser Element-Einstellung können zudem noch weitere Absätze nach dem ersten direkt in der Liste angezeigt werden.

Optional können auch alle Absätze in der Liste angezeigt werden, in diesem Fall entfällt evtl. die Notwendigkeit für eine Detail-Darstellung. Wenn Sie in diesem Fall für die Button-Beschriftung 'none' eingeben, wird kein Link auf die Detail-Darstellung mehr erzeugt, auch nicht in der Überschrift.

Zeige Bild-Vergrößerung

Diese Option steht für Blog Listen-Aufmacher zur Verfügung, da das Bild nicht verlinkt ist wie bei den meisten anderen Aufmacher-Arten.

Zeige Verfasser

Optional kann der Verfasser eines Artikels bereits in der Liste angezeigt werden.

Bitte beachten Sie, dass der Verfasser nur in dem Element „Artikel“ verfügbar ist. Für die anderen Elemente, welche mit den Blog verwendet werden können, wie z.B. „Lockvogel“ oder „Medien“, ist es nicht möglich, einen Verfasser anzugeben. Daher wird für diese Elemente kein Verfasser in der Liste angezeigt. 

Blog Kommentar-Zähler

Diese Option ermöglicht es, die Anzahl der Kommentare für einen Blog-Eintrag direkt in der Liste darzustellen. Hierfür sind weitere Einstellungen auf der Seite erforderlich, die weiter unten beschrieben werden.

Blog Kommentare

Kommentare für den Blog können auf der Detailseite über zusätzliche dynamische Funktionen realisiert werden. Mit Meilenstein 15 wurde der Dienstleister Hyvor Talk als neue Option hinzugefügt.

Um die Element-Einstellung Blog Kommentar-Zähler in der Liste nutzen zu können, ist es erforderlich, die dynamische Funktion Hyvor Talk Kommentare auf die Seite der Liste zu ziehen und hier in den Element-Einstellungen die Option Nur Kommentar-Zähler zu aktivieren. Diese spezielle Option steht mit Meilenstein 15 nur für die Kombination „Blog Aufmacher mit Hyvor Talk Kommentaren“ zur Verfügung.

Blog Detail-Darstellung

Neben dem besonderen Aufmacher für die Listen gibt es auch noch eine spezielle Blog Detail-Darstellung. Diese entspricht im Layout dem Blog Listen-Aufmacher, stellt aber natürlich alle Absätze des Artikels dar. 

Eine Besonderheit dabei ist das nahtlose Weiterlesen. Wenn der Benutzer in der Liste auf den Link „Mehr“ bzw. „Weiterlesen…“ unter dem Aufmacher-Text klickt, so springt die Detailseite beim Laden direkt an den nächsten Absatz. Der Benutzer muss also nicht den Text, welchen er schon gelesen hat, zunächst „wegscrollen“.

Hinweis: Um die spezielle Blog Detail-Darstellung auf der Detail-Seite zu aktivieren, ist es erforderlich, an dem entsprechenden Container der gewählten Layout-Zeile die Element-Einstellung Detail-Container Auswahl auf den Wert Spezieller Hauptinhalt als Detail-Container zu setzen.

Kalenderblatt

Meilenstein 14 ermöglicht es, Veranstaltungen und Gottesdienste in den persönlichen Kalender zu übernehmen.

Daten für Veranstaltungen und Gottesdienste können von den Benutzern der Webseite optional als iCalendar-Datei herunter geladen werden. So können die Daten der Veranstaltung in einen persönlichen Kalender übertragen werden.

iCalendar ist ein standardisiertes Datenformat zum Austausch von Kalenderinhalten. Das iCalendar-Format wird von fast allen Kalender-Programmen akzeptiert, die webbasierte Kalenderdaten einbinden können, u. a. Google Kalender / Android Kalender, Microsoft Outlook und alle macOS/iOS-Kalender Applikationen.

Zur Anleitung
Weitere Beispiele und Erläuterungen für Listen mit Akkordeon Aufmachern

Element-Einstellungen

CSS Anpassung (Selectbox)

Ermöglicht die Anpassung der Element-Darstellung unter Verwendung vorgegebener CSS Modifikationen.

Die Farben können über den Themen-Generator unter „Erweitert > Weitere Farben“ festgelegt werden.

Bitte beachten Sie, dass manche Elemente eventuell nicht jede hier aufgeführte Anpassung unterstützen.

Überschrift Aufmacher (Select-/Combobox)

Legt die Wichtigkeit der Aufmacher-Überschrift in den Elementen der Liste fest.

Dies ist insbesondere für Suchmaschinen (SEO) relevant und verändert nicht die sichtbare „Größe“ der Überschrift.

Bildformat (Mobil) (Select-/Combobox)

Das gewünschte Bildformat für die Darstellung auf kleinen Bildschirmen wie z.B. Smartphones.

Ermöglicht es die Bildgröße anhand von gängigen Formaten auszuwählen.

Das Bild wird automatisch so skaliert, dass die tatsächlichen Pixel bestmöglich in das gewählte Ausgabeformat eingepasst werden.

Anstatt der Vorgaben können Sie manuell jedes beliebige Format angeben. Verwenden Sie „Breite-Höhe“, zum Beispiel „5-1“ für eine extrem breites Format.

Bildformat (Desktop) (Select-/Combobox)

Das gewünschte Bildformat für die Darstellung auf großen Bildschirmen wie z.B. Desktop-Rechnern.

Ermöglicht es die Bildgröße anhand von gängigen Formaten auszuwählen.

Das Bild wird automatisch so skaliert, dass die tatsächlichen Pixel bestmöglich in das gewählte Ausgabeformat eingepasst werden.

Anstatt der Vorgaben können Sie manuell jedes beliebige Format angeben. Verwenden Sie „Breite-Höhe“, zum Beispiel „5-1“ für eine extrem breites Format.

Erster Eintrag offen (Checkbox)
Öffnet den ersten Eintrag des Akkordeons wenn die Seite geladen wird.
Mehrere Einträge offen (Checkbox)

Legt fest, ob mehrere Einträge des Akkordeons gleichzeitig geöffnet werden können.

Ist dies nicht gesetzt, so wird beim Öffnen eines Eintrags der bisher offene Eintrag geschlossen.

Zeige Bild-Vergrößerung (Checkbox)
Bilder werden mit einer Vergrößerungs-Option versehen.
Zeige Bild-Copyright (Checkbox)

Legt fest ob für Aufmacher-Bilder das Copyright als Einblendung angezeigt wird.

Zeige Bild-Titel (Checkbox)
Unterhalb des Bildes wird der Bild-Titel angezeigt, falls dieser vorhanden ist.