Text in Listen ausgeben und die Anzahl der Zeichen begrenzen

Innerhalb einer Weblication® Liste können Sie über CSS oder XSL den Text aus dem jeweils eingelesenen Dokument ausgeben. Die Anzahl der Zeichen lassen sich dabei begrenzen.

Über Weblication® Listentemplates können Sie für die Listenübersicht sogenannte Textteaser nutzen. Um den Text in der Listenübersicht kompakt zu halten, können Sie den Text der eingelesenen Dateien auf eine bestimmte Anzahl an Zeichen kürzen.

Über CSS-Only

Weblication® CMS bietet ab Version 8.x vielfältige Möglichkeiten, rein über CSS die Ausgabe von Anwendungen zu beeinflussen. So können Sie z.B. auch den Text von Dateien kürzen, die in einer Weblication® Liste ausgegeben werden.

Über die CSS-Only-Eigenschaft -w-wsl rufen Sie die WSL-Funktion cropText auf und geben über entsprechende Parameter die Anzahl der Zeichen, die maximal ausgegeben werden sollen (z.B. 64) und um welche Zeichen diese ergänzt werden sollen (z.B. ...).

Beispiel 1: Schneidet die Beschreibung der Variante 0 nach 64 Zeichen serverseitig ab

.listDefault_var0 .listEntryDescription {-w-wsl:cropText(lengthCrop=64,shrinkCharacterCrop=' ',delimiterCrop='...');}

Alternativ kann auch rein über CSS (ohne CSS-Only) der Text über die w3schools.com: CSS3 text-overflow property ausgeblendet werden. Hierzu definieren Sie die Breite des entsprechenden Elementes und was bei Textüberlauf geschehen soll:

Beispiel 2: Schneidet den Titel der Variante 10 bei 100 Pixel Breite clientseitig ab

.listDefault_var_10 .listEntryTitle a  {display:inline-block;width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
Das ist z.B. dann nützlich, wenn sich innerhalb des A-Tags bzw. der Überschrift noch Markup befindet.
Beim Auslesen von Binär-Dateien (pdf, Bilder, ...) kann dies z.B. der Fall sein, wenn dem Link ein Icon mitgegeben wird.
Über das XSL-Template

Alternativ zur Möglichkeit über CSS-Only können Sie den Text auch über WSL-Funktionen direkt im XSL-Template kürzen. Dies kann z.B. herangezogen werden, wenn Sie über eine ältere Weblication® CMS Version verfügen (älter CMS 8.x) oder das Begrenzen rein über CSS nicht gewünscht ist.

Lesen Sie hierzu über z.B. wsl:documentData den Beschreibungstext der jeweils eingelesenen Dateien aus.

Über das Attribut "lengthCrop" begrenzen Sie die Anzahl der auszulesenden Zeichen. Zusätzlich bewirken Sie durch Angabe eines Leerzeichens im Attribut "shrinkCharacterCrop", daß nur ganze Wörter ausgegeben werden und nicht Mitten in einem Wort abgeschnitten wird. Über das Attribut "delimiterCrop" setzen Sie zudem nach dem ausgelesenen Text drei Punkte für die Umsetzung als Textteaser.

Die Beschränkung der maximalen Anzahl an Zeichen für den auszulesenen Text ermöglicht Ihnen eine gleich strukturierte Ausgabe der jeweiligen Listeneinträge.

Beispiel: Auszug aus xxx.wFilelist.php mit Auslesen des Beschreibungstextes über wsl:documentData und Zeichenbegrenzung

...
<p class="listEntryDescription"><wsl:documentData document="{@path}" lengthCrop="120" shrinkCharacterCrop=" " delimiterCrop=" ..." data="/wd:document/wd:extension/wd:meta/wd:description/text()" /></p>
...

WSL-Tag cropText

Ab Weblication® CMS Version 005.058.026.000 steht Ihnen zum Abschneiden von Texten auch ein eigenes WSL-Tag zur Verfügung. "cropText" ermöglicht Ihnen die Angabe der maximalen Anzahl an Zeichen auch bei beliebigem Text. Auf diese Weise können Sie nicht nur beim Beschreibungstext, sondern auch bei Inhaltstext die Zeichen begrenzen.

Beispiel: Auszug aus xxx.wFilelist.php mit Auslesen des Inhaltstextes über die xPath-Funktion document und Zeichenbegrenzung

...
<p class="listEntryDescription"><wsl:cropText lengthCrop="120" shrinkCharacterCrop=" " delimiterCrop=""><xsl:value-of disable-output-escaping="yes" select="document(concat($wDocumentRoot,@path))/wd:document/wd:group[@id='content1']/wd:item/wd:fragment[@id='text']/text()"/></wsl:cropText></p>
...
FAQs are only visible for Weblication ai search and editors!
Wie kann ich den Text innerhalb einer Weblication® Liste aus einem eingelesenen Dokument ausgeben?
Innerhalb einer Weblication® Liste können Sie den Text über CSS oder XSL aus dem jeweils eingelesenen Dokument ausgeben. Außerdem lässt sich die Ausgabe des Textes dabei gezielt begrenzen.
Wofür werden Textteaser in Weblication® Listentemplates verwendet?
Mit Weblication® Listentemplates können Sie für die Listenübersicht sogenannte Textteaser nutzen. Dadurch bleibt die Listenübersicht kompakt, indem der Text der eingelesenen Dateien auf eine definierte Anzahl an Zeichen gekürzt wird.
Wie kann ich das Kürzen von Text in einer Weblication® Liste rein über CSS erreichen?
Ab Weblication® CMS Version 8.x gibt es vielfältige Möglichkeiten, die Ausgabe rein über CSS zu beeinflussen. So kann z.B. auch der Text von Dateien gekürzt werden. Dafür nutzen Sie die CSS-Only-Eigenschaft <code class="codeInline">*-w-wsl*</code>, um die WSL-Funktion <code class="codeInline">cropText</code> aufzurufen und Parameter für die maximal auszugebenden Zeichen sowie das Ergänzungszeichen (z.B. <code class="codeInline">...</code>) zu übergeben.
Wie schneide ich mit CSS-Only den Text serverseitig nach einer bestimmten Zeichenanzahl ab?
Beispielhaft kann die Beschreibung serverseitig nach 64 Zeichen abgeschnitten werden, indem <code class="codeInline">cropText(lengthCrop=64, shrinkCharacterCrop=' ', delimiterCrop='...')</code> auf das passende Listenelement angewendet wird, z.B.: <code class="codeInline">.listDefault_var0 .listEntryDescription {-w-wsl:cropText(lengthCrop=64,shrinkCharacterCrop=' ',delimiterCrop='...');}</code>.
Wie kann ich Text ohne CSS-Only kürzen bzw. bei Überlauf ausblenden?
Alternativ können Sie rein über CSS dafür sorgen, dass der Text ausgeblendet wird, indem Sie die Breite des betroffenen Elements definieren und den Umgang mit Überlauf festlegen (z.B. <code class="codeInline">white-space: nowrap; overflow: hidden; text-overflow: ellipsis;</code>). Beispiel: <code class="codeInline">width:100px</code> plus <code class="codeInline">text-overflow:ellipsis</code>.
Wann ist das clientseitige Abschneiden per CSS besonders nützlich?
Das ist besonders nützlich, wenn innerhalb des Links bzw. der Überschrift noch Markup enthalten ist (z.B. im A-Tag oder in der Überschrift), sodass Sie dennoch eine einzeilige, begrenzte Darstellung erreichen.
Wie kann ich den Text stattdessen im XSL-Template kürzen?
Alternativ zur CSS-Only-Variante können Sie die WSL-Funktionen direkt im XSL-Template verwenden, insbesondere wenn Sie eine ältere Weblication® CMS Version (älter als 8.x) nutzen oder das Begrenzen nicht rein über CSS gewünscht ist. Sie lesen z.B. den Beschreibungstext über <code class="codeInline">wsl:documentData</code> aus und begrenzen ihn dort.
Welche Parameter helfen beim Kürzen via XSL/WSDL-Funktionen und wie beeinflussen sie das Ergebnis?
Über das Attribut <code class="codeInline">lengthCrop</code> begrenzen Sie die Anzahl der auszulesenden Zeichen. Durch ein Leerzeichen im <code class="codeInline">shrinkCharacterCrop</code>-Attribut wird sichergestellt, dass nur ganze Wörter ausgegeben werden und nicht mitten im Wort abgeschnitten wird. Mit <code class="codeInline">delimiterCrop</code> setzen Sie nach dem gekürzten Text z.B. drei Punkte als Textteaser.
Wie kann ich in XSL/WSDL den Beschreibungstext mit Zeichenbegrenzung ausgeben?
Beispielhaft wird der Beschreibungstext über <code class="codeInline">wsl:documentData</code> ausgelesen und mit <code class="codeInline">lengthCrop</code>, <code class="codeInline">shrinkCharacterCrop</code> und <code class="codeInline">delimiterCrop</code> begrenzt, z.B. im Kontext eines Listeneintrags: <code class="codeInline"><wsl:documentData ... lengthCrop="120" shrinkCharacterCrop=" " delimiterCrop=" ..." data="...description/text()" /></code>.
Gibt es ab einer bestimmten Weblication® CMS Version ein eigenes WSL-Tag zum Kürzen von Text?
Ja. Ab Weblication® CMS Version <code class="codeInline">005.058.026.000</code> steht das WSL-Tag <code class="codeInline">cropText</code> zur Verfügung. Damit können Sie die maximale Anzahl an Zeichen auch bei beliebigem Text begrenzen.
Wie kann ich mit dem WSL-Tag <code class="codeInline">cropText</code> sowohl Beschreibung als auch Inhaltstext begrenzen?
Sie können <code class="codeInline">cropText</code> mit <code class="codeInline">lengthCrop</code>, <code class="codeInline">shrinkCharacterCrop</code> und <code class="codeInline">delimiterCrop</code> verwenden. Das ermöglicht das Begrenzen der Zeichenanzahl z.B. beim Beschreibungstext ebenso wie beim Inhaltstext, etwa durch Auslesen des Textes über <code class="codeInline">document(...)</code> und anschließendes <code class="codeInline">cropText</code>-Wrapping.
Wie sieht ein Beispiel für das Kürzen von Inhaltstext mit <code class="codeInline">wsl:cropText</code> aus?
Im Beispiel wird innerhalb eines Elements der Inhaltstext per XPath ausgelesen und durch <code class="codeInline">cropText</code> auf z.B. 120 Zeichen begrenzt, inkl. Wort-Erhalt und Trennzeichen (Ellipsis), z.B. mit: <code class="codeInline"><wsl:cropText lengthCrop="120" shrinkCharacterCrop=" " delimiterCrop=" ..."> ... </wsl:cropText></code>.
Wozu dient die Beschränkung der maximalen Zeichenanzahl für Listeneinträge?
Die Begrenzung hilft dabei, eine gleich strukturierte Ausgabe der jeweiligen Listeneinträge zu erreichen, da jeder Eintrag den Text auf eine definierte Länge bringt.