Dateilink Beschreibung verlinken

11.03.2011

Content Element uploads Beschreibung verlinken

Christian Wolfram in Tutorials/TypoScript

Das Content Element Dateilinks (uploads) eignet sich in TYPO3 als gute Variante, wenn man einfach auf Dateien zum Download verlinken möchte.

An den Dateilinks habe mich allerdings 2 Dinge gestört.

Es wird immer der Dateiname verlinkt, was optisch keinen guten Eindruch macht.
Das Layout ist in eine Tabelle gefasst, was die Formatierung mit CSS teilweise erschwert.

Im Internet habe ich bei http://www.npostnik.de einen guten Lösungsansatz gefunden, welchen ich noch ein wenig verfeinert haben.

Um die Beschreibung zu verlinken, muss im TS-Setup folgende Zeilen eingefügt werden:

 
tt_content.uploads.20.itemRendering.20 {
1 ><br />2 >
 
1 = TEXT<br />1.value = <span><a href="
 
2 = TEXT<br />2.data = register:path
 
3 = TEXT<br />3.data = register:filename
 
4 = TEXT<br />4.value = ">
 
# Beschreibung anzeigen, wenn vorhanden<br />5 = TEXT<br />5.data = register:description<br />5.if.isTrue.data = register:description
 
# ansonsten Dateinamen anzeigen<br />6 = TEXT<br />6.data = register:filename<br />6.if.isTrue.data = register:description<br />6.if.negate = 1
 
7 = TEXT<br />7.value = </a></span>
}

Dadurch wird nun die Dateibeschreibung verlinkt, falls diese vorhanden ist. Falls nicht, wird weiterhin der Dateiname verlinkt.

Um nun noch das Tabellenlayout zu entfernen und durch DIV-Container, SPAN oder LI zu ersetzen, müssen die wrap-Eigenschaften angepasst werden.

 
tt_content.uploads.20.outerWrap=<div class="mytest">|</div>
 

Durch diese Zeilen entfernen wir schon einmal das fest codierte Table-Tag in class.tx_cssstyledcontent_pi1.php. Nun muss das Rendering der einzelnen Dateien noch angepasst werden:

 
tt_content.uploads.20.itemRendering{
wrap =<div class="div-odd divfirst">|</div> |*| <div class="div-even">|</div> || <div class="div-odd">|</div> |*|
 
10.wrap=<div class="divcsc-uploads-icon">|</div>
 
20.wrap=<div class="divcsc-uploads-fileName">|</div>
 
30.wrap=<div class="divcsc-uploads-fileSize">|</div><div class="clear"></div>
}

Das war es auch schon soweit.

Was mir bisher noch nicht gelungen ist, dass Layout entsprechend der Layouteinstellungen im Content Element anzupassen. Zum Beispiel wäre dies sinnvoll, wenn unterschiedliche CSS-Klassen benutzt werden sollen. Falls in dieser Richtung noch jemand einen Tipp hat, dann her damit.

Den kompletten Code gibt es hier auch noch mal als Download.

PermalinkTrackback link