Entwickler-Artikel

Abhängig davon, ob eine Liste Inhalte hat, lassen sich Inhalte ein- bzw. ausblenden. So können Sie z.B. die Listenüberschrift ausblenden, wenn die Liste selbst keine Inhalte hat oder statt dessen einen globalen, alternativen Inhalt einblenden.

In Weblication® kann über eigene Weblication® Techniken in Verbindung mit der BASE (Mobile First) JavaScript direkt in CSS eingebettet werden.

Um Vorschaubilder innerhalb des Banners zu verwenden, genügt es, die Listenerweiterung listEntryExtensionThumbnailAsPicture einzubinden

Über das Bild-Element können Sie für SVG-Grafiken bzw. Icons spezielle CSS-Only-Varianten verwenden.

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.

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.

Eine Vielzahl an Webseiten nutzt im Standard einen hellen Hintergrund mit schwarzer oder dunkler Schrift. Soll das Projekt einen dunklen Hintergrund und helle Schriftfarbe haben, sind die entsprechenden Farbvariablen anzupassen.

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.

Die pflegbaren Elemente einer Objektpflegemaske können nun direkt über den Seiten-Editor angepasst werden. Mit dieser neuen, zusätzlichen Technik lassen sich Masken noch schneller auf die projektspezifischen Anforderungen anpassen, ohne dabei den Quelltext-Editor nutzen zu müssen.

Ü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.

Über den Objekt-Wizard lassen sich bereits im Standard viele Elemente / Weblics® nutzen, um Objektdaten als Werte zu übergeben und auszugeben.

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

Am Beispiel des Glossar Weblics® wird vereinfacht aufgezeigt, wie Sie die Templates und Masken der Anwendung für einen andren Bereich kopieren und nutzen können.

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.

Sass-Bedingungen werden bei der Quelltextbearbeitung der page.scss bereits geprüft. Falls diese nicht aktiv sind, werden sie ausgegraut dargestellt, um so die Übersichtlichkeit zu erhöhen.

Navigationsbeispiele erleichtern Ihnen die Umsetzung Ihrer aktuellen und künftigen Projekte.

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.

Navigationseffekte können Sie entweder manuell in der jeweiligen Navigations-CSS definieren oder per Klick über einen Dekorator ergänzen.

Die Bildbreitenauswahl und die Bildbreitenberechnung wurden in der Mobile First BASE grundlegend überarbeitet. Dem Umstand geschuldet, dass es inzwischen sehr viele unterschiedlichen Bildschirmgrößen gibt, setzt die Mobile First BASE konsequent auf Responsive Images, um eine optimale Bildqualität bei gleichzeitig minimaler Bildgröße auszuliefern.

Die Menünavigation (Toggler-Navigation) kann über den Layoutwizard hinsichtlich des Einfahr-Verhaltens eingestellt werden.

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:

Eine Möglichkeit zum Anmelden und Abmelden in Benutzer Portalen sollte an zentraler Stelle vorgenommen werden.

Ü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.

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.

Listeneinträge einer Weblication® Liste zum Anteasern verwenden.

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.

Neben den vielfältigen Möglichkeiten, Inhalte von Dateien über Weblication Listen auszugeben (XSL, CSS, etc.), kann im Zeilentemplate der Liste auch rein auf PHP zurückgegriffen werden.

Listeneinträge lassen sich auf unterschiedliche Weise mehrspaltig darstellen.

Über die Maske der Linkbearbeitung können Sie Felder innerhalb der Pflegemaske auch dynamisch über PHP befüllen.

Über die CSS-Only Definitionen lässt sich festlegen, dass beim Eintragen eines Links abhängig von der URL das Icon für externe Links und auch das Ziel automatisch ausgewählt wird.

Um Verweise innerhalb des BASE Projektes hervorzuheben und passend zum Link-Ziel zu gestalten, liegt der Einsatz von Grafiken nahe.

Um einzelne Wörter im Link-Text hervorzuheben, können Sie mit aktuellstem Link-Weblic® auf eine CSS-Only-Eigenschaft zurückgreifen.

Die Darstellung der Lightbox beim Öffnen von Detailbildern lässt sich individuell beeinflussen.

Listen unterstützen bereits im Standard Lazy Loading, um Bilder erst zu laden, wenn diese sich im Anzeigebereich befinden. Besonders bei kleinen Bildschirmen in Verbindung mit langen Listen, die Vorschaubilder enthalten, lässt sich die übertragene Datenmenge so teilweise deutlich reduzieren.

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

Um Seitenbesuchern auch bei einer Kontaktanfrage die Möglichkeit zu geben, sich beim Newsletter anzumelden, ist lediglich das Formular entsprechend zu erweitern.

Beim Einsatz des Kategorienfilters ist es in der Regel so, daß sich die aufzulistenden Verzeichnisse bzw. Dateien auf die der eigentlichen Liste beziehen.

Die Schaltflächen das Kategoriefilters können Sie sehr einfach visuell über Symbole oder Icons hervorheben.

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

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.