Typo3 Filelist / Dateiliste: Beschreibung statt Dateinamen verlinken

Mittwoch, 08. August 2012

Hat mich schon immer geärgert: Das Inhaltselement “Dateiliste” in Typo3 ist ziemlich grausig formatiert und eigentlich interessieren mich die Dateinamen der Downloads relativ wenig. Mit folgenden Zeilen im Setup-Script wird dieses Problem gelöst und noch ein paar andere schöne Dinge:

  • Die Download-Dateien werden als HTML-Liste ausgegeben
  • Es werden die Beschreibungen verlinkt statt der Dateinamen
  • Falls keine Beschreibung angegeben wurde gibt es ein Fallback auf den Dateinamen
  • Das UL-Element der Liste bekommt das Layout übergeben, was die Formatierung per CSS vereinfacht
  • Die LI-Elemente werden mit even/odd-Klassen markiert
  • Es wird ein SPAN-Element übergeben, dass die Datei-Erweiterung in der Klasse “filelist-icon-[suffix]” enthält. Diese Lösung ist gedacht um per CSS ein Hintergrundbild abhängig von dem Datei-Typ einzustellen. SPAN kann ja per CSS auf display: inline-block; gestellt werden und dann mit einer Höhe, Breite und Hintergrundbild gestyled werden.

 

tt_content.uploads {
  tt_content.uploads {
   20 {
      outerWrap = <ul class="filelist layout-{field:layout}">|</ul>
      outerWrap.insertData = 1
      itemRendering {
 
         wrap = <li class="filelist-item odd first">|</li> |*| <li class="filelist-item even">|</li> || <li class="filelist-item odd">|</li> |*|
 
 
         10 >
         10 = TEXT
         10.value = 
         10.dataWrap = <span class="filelist-icon filelist-icon-{register:fileExtension}">|</span>
 
         20 {
            wrap = <span class="filelist-name">|</span>
 
            1 >
            2 >
 
            2 = TEXT
            2.data = register:description
            2.data.override = register:filename
            2.data.override.if.isFalse.data = register:description
            2.dataWrap = <a href="{register:path}{register:filename}" target="{field:target}">|</a>
 
         }
 
         30.wrap = <span class="filelist-size">(|)</span><span class="clear_div"></span>
      }
   }
}

Vielen Dank an Chris Wolfram und seinen Blog-Beitrag auf dieser Seite, der mir den entscheidenden Hinweis gegeben hat.

Für Suchmaschinen: Typo3 Dateiliste als HTML-Liste ausgeben. Filelist Beschreibung verlinken statt Dateinamen. Typo3 Filelist eigene Icons für Dateitypen. Typo3 Dateiliste formatieren. Filelist Dateigröße verstecken. Dateiliste Icon verstecken. Typo3 Dateiliste mit abwechselnder Zeilenfarbe.

Nachtrag: TS für css_styles_content 4.7

 
tt_content.uploads {
	20 {
		outerWrap = <ul class="filelist layout-{field:layout}">|</ul>
		outerWrap.insertData = 1
 
 
		itemRendering {
 
			# css_styled_content 4.7
			wrap.cObject {
				10.oddEvenClass = odd first |*| even || odd
				10.elementClass = filelist-filetype-{register:fileExtension}
				20.value = <li class="filelist-item {register:oddEvenClass} {register:elementClass}">|</li>
			}			
 
			10 >
			10 = TEXT
			10.value = 
			10.dataWrap = <span class="filelist-icon filelist-icon-{register:fileExtension}">|</span>
 
 
			20 = COA
			20 {
				wrap = <span class="filelist-name">|</span>
 
				2 = TEXT
				2.data = register:description
				2.data.override = register:filename
				2.data.override.if.isFalse.data = register:description
				2.dataWrap = <a href="{register:path}{register:filename}" target="{field:target}">|</a>
 
			}
 
			30.wrap = <span class="filelist-size">(|)</span><span class="clear_div"></span>
		}
	}
}