Text in Listen ausgeben und die Anzahl der Zeichen begrenzen
02. Dezember 2014
liste text beschreibung description zeichen anzahl begrenzen crop teaser
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.
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;}Beim Auslesen von Binär-Dateien (pdf, Bilder, ...) kann dies z.B. der Fall sein, wenn dem Link ein Icon mitgegeben wird.
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> ...