Grid View als Templateselector in TYPO3 4.5 LTS

Der nachfolgende Typoscript-Code ermöglicht es, das das Grid View von TYPO3 wie die Extension „Page Template Selector“ von Robert Lemke funktioniert. Je nach ausgewähltem Backend-Layout wird das passende Frontend-Template verwendet.

page.10 = TEMPLATE
page.10 {
  template = CASE
  template {
	key.cObject = TEXT
	key.cObject {
	  field = backend_layout
	  ifEmpty.cObject = TEXT
	  ifEmpty.cObject.data = levelfield: -2, backend_layout_next_level, slide
	}
	1 = FILE
	1.file = fileadmin/templates/startseite.html
	2 = FILE
	2.file = fileadmin/templates/zweispaltig.html
	default = FILE
	default.file = fileadmin/templates/allgemein.html
  }
}

Die Zeile „ifEmpty.cObject.data = levelfield: -2, backend_layout_next_level, slide“ sorgt dafür, dass das entsprechende Template der aktuellen Seite verwendet wird. Ist auf der aktuellen Seite kein Backend-Layout gesetzt, wird die darüber liegende Seite geprüft. Ist dort ein Template vorhanden, wird dies verwendet, andernfalls wird wiederum die Seite darüber abgefragt. Liegt kein Backend-Layout vor, greift der „default“-Eintrag und das Template „allgemein.html“ wird verwendet.

 

Dateiendungen in Kleinbuchstaben umwandeln

Des öfteren erhalte ich von Kollegen oder Kunden Dateien mit Großbuchstaben im Dateiname.
Da ich bei Websites gerne Dateinamen verwende, die komplett kleingeschrieben sind, benötigte ich einen Arbeitsschritt der mir das automatisch erledigte (mit automatisch meine ich nicht einen Praktikant ;-)).  Dank Linux und der mächtigen Bash lässt sich diese Aufgabe einfach lösen.
Folgendes Bash-Kommando wandelt die Dateiendung JPG in Kleinbuchstaben um:

for f in *.jpg; do mv $f `basename $f .jpg`.JPG; done;

Soll der komplette Dateiname kleingeschrieben werden, hilft folgendes Kommando:

ls | awk '{print "mv "$0" "tolower($0)}' | sh

Um rekursiv auch Unterordner zu beachten nimmt man dieses Kommando:

for dir in $(find -depth -type d | grep -v ^.$); do mv -v "$dir" $(dirname "$dir")/$(echo $(basename "$dir") | tr '[:upper:]' '[:lower:]') ; done;

Möglicherweise gibt es auch noch kürzere Kommandos…hat jemand Tipps?

 

Flaggen Icons im TYPO3-Backend austauschen

Achtung, die nachfolgenden Änderungen betreffen nur die TYPO3-Versionen < 4.5.
Da ab der Version 4.5 so genannte CSS-Sprites zum Einsatz kommen, kann diese Methode in dieser Version nicht verwendet werden.

Aus meiner Erfahrung gibt es zwei Möglichkeiten, die Flaggen im TYPO3-Backend auszutauschen:

  1. man ändert die Dateien im bisher verwendeten Verzeichnis
  2. man wechselt das Verzeichnis und verwendet die darin enthaltenen Grafiken

Für die erste Methode wechselt man in das Verzeichnis „/typo3/gfx/flags/“ und ändert dort die gewünschten Grafiken. Der Vorteil hierbei liegt darin, dass keine weiteren Anpassungen gemacht werden müssen. Einfach austauschen und fertig. Ein Problem tritt dann auf, wenn TYPO3 upgedated wird und somit die Flaggen wieder durch die Standard-Icons ersetzt werden.

Die zweite Methode, aus meiner Sicht die glücklichere, da die Änderung auch bei einem Update beibehalten wird, bereitete mir zuerst einige Probleme.
Mir war klar, dass ich den Pfad irgendwie ändern kann, denn TYPO3 ist äußerst flexibel, jedoch fehlte mir noch der richtige Ansatz. Selbst nach einiger Recherche habe ich keine passende Info dazu gefunden, wie das Verzeichnis geändert werden kann.
Danke deshalb an Stefan Galinski, seines Zeichens TYPO3 v4 Core Developer, der mir über Twitter den entscheidenden Hinweis dazu gab.

Um den Pfad zu ändern, muss die Datei „extTables.php“ im Verzeichnis „typo3conf“ um folgendes erweitert werden:

t3lib_div::loadTCA('sys_language');
$TCA['sys_language']['columns']['flag']['config']['fileFolder'] = 'fileadmin/pfad/zu/den/flaggen/';

Die Angabe „fileadmin/pfad/zu/den/flaggen/“ kann natürlich angepasst werden und dient hier nur als Beispiel.
Ich hoffe mit diesem Blog-Eintrag allen geholfen zu haben, die genauso wie ich verzweifelt auf der Suche nach der Lösung des Problems waren.

 

Grid View in TYPO3 4.5 LTS

Mit der vor Kurzem veröffentlichten TYPO3 Version 4.5 hat sich nicht nur der Support auf mehr als drei Jahre verlängert, nein auch einiges in der Usability hat sich getan. Das Backend wurde auf ExtJS umgestellt, es wurde ein Linkvalidator integriert und an vielen kleinen und großen Schrauben gedreht.

Auf ein visuelles Gut bin ich beim Durchschauen der Änderungsliste gestoßen… das Grid View. Mit ihm lässt sich die bisherige Spaltenansicht (Links, Normal, Rechts, Rand) so anpassen, dass diese wie im Frontend dargestellt werden. Also nicht nur nebeneinander wie bisher, sondern auch darüber, darunter, über mehrere Zeilen hinweg, und und und. Was in Zeiten vor CSS mit „Layouttabellen“ realisiert wurde, kann jetzt dementsprechend im Backend mit einem komfortablen Wizard erstellt werden.

TemplaVoila!-User kennen diese Art der Darstellung ja schon, für diejenigen die zum ersten Mal damit arbeiten wollen, findet sich nachfolgend eine kleine Einführung.

Das Grid View kann auf jeder Seite eingebunden werden. Dazu wählt man links in der Navigation das Listenmodul und legt einen neuen Datensatz vom Typ „Backend Layout“ an. Hier kann der Titel, ein Bild und eine Beschreibung hinterlegt werden. Der Dreh und Angelpunkt des Datensatzes ist jedoch der Konfigurationsbereich. Glücklicherweise wurde hier ein Wizard implementiert, über den die Konfiguration einfach und intuitiv erstellt werden kann. Wie zu erwarten, lassen sich über das Plus-Zeichen am rechten, bzw. unteren Rand weitere Felder hinzufügen und über das Minus-Zeichen die Felder wieder entfernen. In den Feldern selbst, kann die Position über die Pfeile verschoben werden und bei einem Klick auf das Stift-Symbol der Name, bzw. die Spaltennummer bearbeitet werden. Die Spaltennummern sind uns besser bekannt als „colPos“, daher sollten diese von 0 aufsteigend nummeriert werden. Über die Spaltennummer wird später im Typoscript der Inhalt an einen Marker gebunden und so im Frontend ausgegeben.

Nach dem Speichern des Grid View, muss dieses in den Seiteneigenschaften einer Seite zugeordnet werden. Hierbei kann man eine Darstellung für die aktuelle Seite, sowie für die darunter liegenden Seiten definieren. Wurden die Änderungen in den Seiteneigenschaften gespeichert, ist das Grid View aktiv und der Seiteninhalt kann in die entsprechenden Felder eingebunden werden.

Jetzt muss nur noch per Typoscript festgelegt werden, welches Feld auf der Website wo ausgegeben werden soll und wir haben das Grid View fertig integriert.

page.10.marks{
 LOGO = CONTENT
 LOGO {
  table = tt_content
  select.where = colPos=0
 }
 ...
 LINKE_SPALTE{
  select.where = colPos=3
 }
 ...
 ADVERTS{
  select.where = colPos=x
 }

Aus meiner Sicht ist das Grid View eine große Bereicherung für das Backend von TYPO3 daher gehen Komplimente an alle, die daran mitgearbeitet haben.

Genug geschrieben, jetzt ist eure Meinung gefragt.

 

Android Entwicklung mit OpenSuSE und Archos 10.1

Wie unter developer.android.com beschrieben, sollte es nach wenigen Schritten möglich sein, auf einem angeschlossenen Gerät zu entwickeln. Bei drittens wird beschrieben, wie man sein System einrichten muss, um das Gerät unter „Ubuntu Linux“ zu erkennen. Da leider keine Beschreibung zur Entwicklung unter openSuSE vorliegt, hier meine Schritte (openSuSE 11.3):

1. In der Datei „AndroidManifest.xml“ der Anwendung (App), muss diese als debugbar definiert werden. Dazu wird der Application-Tag um android:debuggable=“true“ erweitert. Alternativ kann auch im Reiter „Application“ der Wert von „Debuggable“ auf „true“ geändert werden.
vorher:

nachher:

2. Das Gerät (in meinem Fall ein Archos 10.1), muss angeschlossen sein und das „USB-Debugging“ aktiviert sein. Zur Kontrollen kann dies über ‚Einstellungen -> Anwendungen -> Entwicklung‘ geprüft werden. Hier muss bei ‚USB-Debugging‘ der Haken gesetzt sein.
3. Nun muss für die Verwendung eines Gerätes eine Regel erstellt werden. Diese Regeln (engl. rules) sind an den Hersteller gebunden. Sollten also mehrere Geräte zur Entwicklung verwendet werden, müssen in der Regel auch mehrere Einträge erstellt werden. Um eine Regel zu erstellen, wechselt man mit ‚su‚ zum root-user. Anschließend wird in das Verzeichnis ‚/etc/udev/rules.d‘ gewechselt. Hier erstellt man mit ‚vi 51-android.rules‚ eine neue Datei und füllt diese mit nachfolgendem Inhalt (i drücken um in den insert-Modus von vi zu gelangen):

SUBSYSTEMS=="usb", ATTRS{idVendor}=="0e79", MODE="0666", SYMLINK+="android_adb"
SUBSYSTEMS=="usb", ATTRS{idVendor}=="0e79", MODE="0666", SYMLINK+="android_fastboot"

Stehen noch weitere Geräte zum debuggen zur Verfügung, müssen diese darunter definiert werden. Hierzu können die beiden Zeilen kopiert und an der Stelle ‚0e79‘ abgeändert werden (0e79 steht hierbei für den Hersteller Archos). Mit der Esc-Taste wird in den command-Modus von vi gewechselt. Hier lässt sich mit dem Befehl :wq<Enter> die Datei speichern und schließen.

Nun kommt der Schritt, der in der Beschreibung zu Ubuntu nicht genannt wird. Unter OpenSuSE muss in der Datei ‚adb_usb.ini‘ (zu finden im Home-Verzeichnis im Ordner .android) zusätzlich die Hersteller-ID eingetragen werden. In meinem Fall also ‚0x0e79‘. Im Anschluss daran, kann per ‚adb kill-server‚ und ‚adb devices‚ überprüft werden, ob das Gerät erkannt wurde, oder nicht.

PS: Sollte die Hersteller-ID (idVendor) nicht bekannt sein, kann diese nach dem Anschließen des Gerätes mit folgendem Befehl ermittelt werden: ‚tail -f /var/log/messages‚. Dort sollte ein Eintrag, ähnlich dem nachfolgenden, erscheinen:

usb 1-5: New USB device found, idVendor=0e79, idProduct=1411

In Eclipse kann nun bei einem Klick auf ‚Run‘ die Anwendung auf dem Gerät getestet werden.

 

Title und Metainfos bei tt_news anpassen

Heute stand ich vor dem Problem, dass auf der Singleansicht der tt_news-Seite der Titel bei allen Newseinträgen „Detailansicht“ lautete. Dies ist aus SEO-sicht unschön, ein individueller Seitentitel in jeder News ist Pflicht. Möglicherweise funktioniert die unten genannte Lösung nicht bei jedem, bei mir funktioniert das Ganze aber.

# SEO Headeranpassung auf der News-Detailseite
[globalVar = TSFE:id={$plugin.tt_news.singlePid}]
page{
  headerData{
    1 = RECORDS
    1{
      source = {GPvar:tx_ttnews|tt_news}
      source.insertData = 1
      tables = tt_news
      field = title
      conf.tt_news >
      conf.tt_news = TEXT
      conf.tt_news.field = title
    }
  }
}
[end]

Und anschließend die Anpassung der Keywords, sowie der Description (aus dem Untertitel der News und auf 150 Zeichen gekürzt):

# SEO Headeranpassung auf der News-Detailseite
[globalVar = TSFE:id={$plugin.tt_news.singlePid}]
page{
  meta{
    keywords.field >
    description >
    keywords.data = register:newsKeywords
		description.data = register:newsSubheader
		description.crop = 150 | ... | 1
  }
}
[end]

Sollte es eine einfachere Anpassung geben, würde ich mich über Feedback freuen.

 

Verzeichnis mit sshfs mounten

Bei meiner täglichen Arbeit hatte ich das Problem, dass sich die Samba-Freigabe des Servers nicht zufriedenstellend einbinden ließ. Da am Server eine Anmeldung per ssh möglich war, lag einem Zugriff per sshfs nichts im Wege. Mit folgendem Befehl konnte ich das entfernte Verzeichnis einbinden und so wie auf lokale dateien zugreifen.

sshfs benutzername@remotemaschine:/pfad/ /mnt/mountpoint -o allow_other