Mobile First BASE Hilfe

 
  • Titel bei Blätterlisten um aktuelle Seite ergänzen

    Bei einer Blätterliste können Sie über ein PHP Element, welches während der XSLT-Transformation ausgeführt wird, den Seitentitel um die aktuell geblätterte Seite ergänzen. Dazu ermittelt man die aktuelle pageID und setzt den globalen Wert pageTitel neu zusammen.
  • Listenerweiterungen

    Listenerweiterungen sind einzelne XSLT-Templates, welche über CSS-Only in Listen und Bannern eingebunden werden, um diese so mit beliebigen Inhalten zu erweitern.
  • Objektdaten als Elemente ausgeben

    In der Mobile First BASE stehen Ihnen zur Ausgabe von Objekt-Daten vielfältige Möglichkeiten zur Verfügung.
  • Google Fonts lokal einbinden

    Werden Google Fonts über die Google Font API eingebunden, muss der Besucher damit rechnen, dass er Daten an Google sendet, sofern er die Schriftart nicht bereits im Cache hat. Aus Datenschutzssicht ist es also empfehlenswert Schriften nicht über den Google Server zu beziehen, sondern diese lokal abzulegen.
  • Lazy Loading Funktion bei Bildern aktivieren / deaktivieren

    Für das Bild-Element ist in den CSS-Only-Varianten (z.B. Variante 0) die Lazy Loading Funktion in der Regel standardmässig aktiviert
  • Verlinkung von Telefonnummern

    Anklickbare Telefonnummern können Sie über das Präfix tel: im Link-Feld ermöglichen.
  • Zeichenbegrenzung in Listen und per Ajax nachgeladenen Listen

    Text kann in Listen über spezielle Crop-Funktionen direkt über CSS begrenzt / abgeschnitten werden.
  • Sprach- bzw. Regions-URL in Meta-Angaben berücksichtigen

    Über ein globales Template können Sie das hreflang-Attribut für Sprach- oder Regions-URL Ihrer Seiten verwenden.
  • Inhaltbereich aus einer anderen Seite einbinden

    Mit dem Weblic® "Inhaltsbereich aus einer anderen Seite einbinden" binden Sie einen Inhaltsbereichscontaier aus einer anderen Seite ein. Im Gegensatz zum Weblic® "Inhalte aus einer anderen Seite einbinden" können Sie auf oberster Seitenebene den Inhalt der anderen Seite mitsamt Inhaltscontainer einlesen, was z.B. beim Einsatz einer Bereichsnavigation sehr nützlich ist.
  • Den Titel einer Liste ohne Link anzeigen

    Wenn der Titel einer Liste nur aus einer Überschrift und nicht zusätzlich aus einem Link bestehen soll, können Sie das über die CSS-Only Option -w-option-displayTitle:onlyInner; festlegen.
  • Nur spezielle Varianten eines Elementes auswählbar machen

    Wenn z.B. ein Element mit einer speziellen Variante als einziges einfügbar sein soll, kann das nich über den Typ definiert werden. Da dieser ja gleich ist, wie bei anderen Varianten des gleichen Typs. In dem Fall hilft ein kleiner Trick. Man benennt den Typ um, und erlaubt dann nur diesen temporären Typ einzufügen. Damit dann das eingefügte Element wieder den eigentlichen Typ besitzt, kann man das über das Attribut typeAfterInsert im Mastertemplate festlegen.
  • Seitentitel und weitere Metadaten individuell im Objekt-Template festlegen

    Ist nichts spezielles definiert, wird der Titel einer Seite aus dem vom Redakteur gepflegten Titel, ergänzt um den in der Projektkonfiguration festgelegten Prä- und Postfix, ausgegeben. Sollen bestimmte Seiten individuellere Titel bekommen, kann dies z.B. im Objekt-Template definiert werden. Das gleiche Prinzip kann auch für Beschreibung, Schlüsselwörter und das Robots-Meta-Tag genutzt werden.
  • Variantenauswahl beim Einfügen von Elementen ausblenden

    Beim Einfügen von Elementen werden die verfügbaren Untervarianten gleich zur Auswahl angeboten. Soll das vermieden werden, da einem Element bewusst nur eine Variante zugeordnet ist, kann dies über das Attribut allowSelectVariantsOnInsert="0" innerhalb des wd:item-Elementes im Mastertemplate festgelegt werden.
  • Mehrsprachige Metadaten in Bildern und Dokumenten pflegen

    Beim Einbinden von Bildern werden je nach Einstellung Metadaten, wie Titel oder Beschreibung, angezeigt. im Standard ist für deren Pflege eine einsprachige Maske verknüpft. Um die mehrsprachige Pflegemaske zu nutzen, gehen Sie wie folgt vor:
  • Titel in Lightbox bei Bildelementen deaktivieren

    Wenn ein Bild einen Titel eingepflegt hat, wird dieser automatisch in einer Lightbox angezeigt. Dies lässt sich über die CSS-Only Eigenschaft -w-showTitle:no; im Bildelement verhindern. Sie können den Wert entweder fest eintragen oder die entsprechende Option als Untervariante zur Auswahl anbieten.
  • JavaScript-Callback nach öffnen einer Lightbox

    Nach dem Aufruf einer Lightbox kann eine eigene JavaScript Funktion als Callback genutzt werden, um individuelle Anpassungen durchzuführen.
  • JavaScript-Callback nach dem Bannerwechsel

    Nach dem Aufruf eines Banners, also beim Start und nach jedem Wechsel, kann eine eigene JavaScript Funktion als Callback genutzt werden, um individuelle Anpassungen durchzuführen.
  • Bei Meldungen zusätzliche Inhaltbereiche pflegbar machen

    Bei vielen Objekten kann man inzwischen wählen, ob Redakteure dort nur Inhaltselemente einfügen können, die dann in einem fest definierten Inhaltsbereich ausgegeben werden, oder ob im Objekt selbst weitere Inhaltsbereiche ergänzt werden dürfen. Meist reicht es, wenn nur Inhaltselemente einpflegbar sind, über zusätzliche Inhaltselemente können hingegen umfangreicher gestaltete Seiten angeboten werden.
  • Reihenfolge der Flaggen zur Sprachwahl ändern

    Wenn Sie die Reihenfolge der Flaggen anpassen wollen, können Sie das über die Projektkonfiguration im Abschnitt Sprachwahl machen. Dort können Sie die anzuzeigenden Sprachen durch | getrennt manuell auflisten. Entsprechend dieser Auflistung werden die Flaggen dann im Quelltext ausgegeben.
  • Detailseiten in Listen per AJAX einbinden

    Listeneinträge lassen sich als komplette Seite, in einer Lightbox oder auch direkt in der Liste selbst per AJAX laden. Über CSS-Only können Sie direkt in der Listenvariante definieren, wo und auf welche Art die Details beim Klicke auf einen Listeneintrag geladen werden sollen.
  • JavaScript Dateien im HTML-Head einbinden

    HTML-Skripte werden erst am Ende der Seite eingebunden. Sollen einzelne Skripte jedoch schon im HTML-Head oder auch an anderer Stelle eingebunden werden kann dies durch einen zusätzlichen Parameter gesteuert werden. Wenn Sie das JavaScript weder minimieren, noch zusammenführen wollen, können Sie es auch direkt im Template an beliebiger Stelle einbinden.
  • Listeneinträge in einer Lightbox öffnen

    Listeneinträge werden standardmäßig im gleichen Fenster geöffnet. Sie können aber auch in einem neuen Fenster oder in eine Lightbox geöffnet werden. Beim Öffnen in einer Lightbox kann es zudem notwendig sein den Ansichtsmodus zu ergänzen, damit nur der Inhalt und nicht die ganze Seite in der Lightbox geöffnet wird.
  • Mouseover-Effekte für Navigationen über Dekoratoren

    Navigationseffekte können Sie entweder manuell in der jeweiligen Navigations-CSS definieren oder per Klick über einen Dekorator ergänzen. Installieren Sie dazu das Weblic "CSS Dekoratoren für die Hauptnavigation" und öffnen Sie anschließend den Layoutwizard im Panel über "Layout anpassen", Wenn Sie nun links auf "Dekoratoren / Effekte" klicken, bekommen Sie unter anderem eine Auswahl an Navigationseffekten, die Sie per Klick aktivieren können.
  • Social Share Buttons in Listen einbinden

    Über Listenerweiterungen lassen sich verschiedene Social Share Buttons in Listen einbinden. Diese können über einen Dekorator umschlossen und formatiert werden. Zusätzlich lässt sich definieren, ob die Buttons nur für Redakteure oder für alle Besucher nutzbar sind.
  • Vor- / Zurückpfeile in Bannern bedingt anzeigen

    Sobald der erste bzw. der letzte Eintrag eines Banners sichtbar ist, kann der entsprechende Navigationspfeil über CSS ausgeblendet werden. Das geschieht über die zwei dynamischen Klassen firstEntryVisible und lastEntryVisible.
  • Sanftes Scrollen bei internen Links konfigurieren

    Beim internen Links lässt sich smooth scrolling einsetzen und das verhalten konfigurieren. Das Verhalten ist entweder für spezielle Link- bzw. Navigationselemente oder auch global über CSS-Only definierbar.
  • Darstellungsvarianten von Seiten vererben bzw. zentral definieren

    Die Darstellungsvarianten einer Seite wird innerhalb der Objektdaten pageLayout definiert. Wenn Sie diese erben oder zentral ändern wollen können Sie das im CSS der Variante innerhalb der page.scss machen. Dort können Sie dann nicht nur die Variante selbst anpassen, sondern die Definitionen auch einfach über @extend von einer anderen Variante erben.
  • Den Listentitel ohne umschließendes A-Tag ausgeben

    In der Standardliste wird der Titel normal mit einem A-Tag umschlossen. Über die Option -w-option-displayTitle:onlyInner; können Sie dies deaktivieren.
  • In Objekten automatisch immer mit einer H2 Überschrift beginnen

    Wird bei einer Überschrift keine spezielle Ebene definiert, prüft das Element, ob davor bereits eine Überschrift existiert. Wenn ja, wird die Überschrift mit der Ebene 2 ausgegeben, ansonsten als Ebene 1. Da bei Objekte oft eine feste Gestaltung des oberen Seitenbereich samt erster Überschrift besteht, kann es sinnvoll sein, automatisch mit einer Überschrift der zweiten Ebene zu beginnen. Sie erreichen das, indem Sie vor der ersten einfügbaren Überschrift über PHP definieren, dass bereits eine Überschrift ausgegeben wurde.
  • Seitenbereiche global oder auf Seitenebene ein- bzw. ausblenden

    Seitenbereiche lassen sich global oder auf Seitenebene ein- und ausblenden. Ob und welche Seitenbereiche angezeigt werden sollen, wird global in der page.scss über die Seitenvarianten oder in der Seite selbst über die Metadaten festgelegt.
  • Hintergrundbilder global, pro Navigationspunkt oder pro Seite definieren

    Hintergrundbilder können entweder global für alle Seiten, navigationsabhängig pro Navigationspunkt oder auch individuell für jede Seite definiert werden. Auch Kombinationen sind möglich. Dabei überspielt dann der navigationsabhängige Hintergrund den globalen Hintergrund und der seitenspezifische Hintergrund wiederum den navigationsabhängigen.
  • SVG-Bilder in Listen einbetten, um diese per CSS zu formatieren

    SVG-Bilder werden in Listen standardmäßig über ein IMG-Element eingebunden. Sollen diese allerdings über CSS-gestaltet werden, müssen sie direkt als XML in die HTML-Seite eingebunden werden. Dies können Sie entsprechen dem folgenden Quelltextbeispiel in der CSS-Only Variante der entsprechenden Liste einstellen.
  • Pflegetags über PHP dynamisch generieren

    Pflegetags können vollständig dynamisch über PHP erzeugt werden, wenn das PHP vor der XSLT-Transformation ausgeführt wird. Dazu muss es innerhalb eines WSL-Tags wslEditorPre:php geschrieben werden.
  • Vorlesefunktion einbinden

    Die Vorlesefunktion kann über CSS-Only an beliebiger Stelle eingebunden werden, um Inhalte aus der ganzen Seite oder nur von Teilbereichen vorzulesen. Zudem können Sie festlegen, ob alle oder nur bestimmte Seiten mit einer Vorlesefunktion ausgestattet werden sollen.
  • Originalbilder ohne Größenanpassung in einer Bildergalerie anzeigen

    Über die Option -w-option-picture-sizeMode:original; werden Bilder ohne Größenanpassung direkt in einer Galerie angezeigt. Das kann z.B. bei der Auflistung von Logos, Icons oder Symbolen sinnvoll sein. Falls die Bilder in HD vorliegen, also doppelt so groß sind, kann -w-option-picture-sizeMode:original; verwendet werden. In dem Fall werden Sie in halber Größe auf der Seite angezeigt.
  • Listeneinträge über zusätzliche objektbasierte Data-Attribute formatieren

    Objektdaten können nicht nur ausgegeben, sondern auch als Data-Attribute ergänzt werden. So dienen sie z.B. als Basis für spezielle JavaScript-Funktionen oder auch zur objektabhängigen Formatierung einzelner Einträge.
  • Scroll-Fortschritt im Kopfbereich anzeigen

    Der Scroll-Fortschritt kann an beliebiger Stelle eingebunden werden. Neben dem Body z.B. auch im Kopfbereich, wodurch je nach Layout beim hochgeschobenen Kopfbereich nur noch genau der Scrollbalken sichtbar bleibt.
  • Scroll-Fortschritt nur bei bestimmten Objekttypen anzeigen

    Der Scroll-Fortschritt kann generell oder auch nur für bestimmte Objekttypen angezeigt werden. Dazu genügt es, den im HTML-Element eingetragene Objekttyp zu ergänzen.
  • Listeneinträge nach erstem Buchstaben gruppieren

    Listeneinträge lassen sich nach dem ersten Buchstaben gruppiert auflisten. Dabei wird das Data-Attribut headlinefirstletter vor dem ersten Eintrag, des jeweiligen Buchstabens angezeigt. Hierzu sind keine Anpassungen am XSLT notwendig, da die ersten Buchstaben per CSS-Content ausgegeben werden können.
  • Elementname des Akkordeon-Headers anpassen

    Akkordeon-Header sind standardmäßig mit H3-Elementen ausgezeichnet. Dies können Sie pro über CSS-Only Varianten allerdings beliebig anpassen. Denkbar sind z.B. DIV- oder auch H1- bzw. H2- Elemente.
  • Listenerweiterungen mit Parametern aufrufen

    Listenerweiterungen können ohne oder je nach Unterstützung auch mit einem oder mehreren Parametern aufgerufen werden. Welche Parameter unterstützt werden, sind in der Erweiterung selbst dokumentiert. Die Parameter sind durch Leerzeichen getrennt in Anführungszeichen zu setzen. Zwischen den Parametern darf kein Komma stehen.
  • Originalbilder in Bildergalerien und Listen, ohne zu skalieren nutzen

    Während Bilder standardmäßig skaliert werden, ist es zudem möglich, stattdessen auch die Originalbilder aufzulisten.
  • Farbe von SVG Bilder beim Überfahren mit der Maus ändern

    SVG-Bilder sind dann per CSS anpassbar, wenn sie direkt im HTML eingebettet sind, also nicht über IMG-Tag geladen werden. Für Bilder selbst gibt es dafür die Variante "SVG-Grafik eingebettet, per CSS formatierbar".
  • CSS-Only Dekoratoren in Listen verschachteln

    Dekoratoren können auch verschachtelt werden, wenn diese sowohl im öffnenden als auch im schließenden Dekorator jeweils eindeutige Klassen definiert haben.
  • Listenelemente mit DIVs umschließen

    Über CSS-Only Dekoratoren können Sie Listenelemente in zusätzliche HTML-Elemente, also z.B. DIVs packen. Auch eine mehrfache Verschachtelung ist möglich. In diesem Fall muss dann nur der schließende Dekorator ebenfalls den Klassennamen enthalten.
  • Navigation unter dem Banner anzeigen

    Die Navigation kann auch unter einem Seitenelement, meist einem Bild oder einem Banner angezeigt werden. Dazu müssen Sie im Seiten-Layout 'Hauptnavigation im Inhaltsbereich anzeigen aktivieren'. Im Panel können Sie anschließend über 'Kopfbereiche, Portalinhalte pflegen' Elemente dem oberen Bereich hinzufügen, welche dann über der Navigation erscheinen.
  • Mobile First BASE: Listen um Objektdaten erweitern und beliebig formatieren

    Das Mobile First Projekt bietet Ihnen eine Vielzahl neuer und einfacher Möglichkeiten, Objektdaten auf einfachste Weise in einer Liste abzugeben und zu formatieren.