Okt
31
Bei der Entwicklung einer eigenen Extension für das TYPO3-System, tritt häufig die Frage auf, wie am Besten eine CSS oder JavaScript-Datei eingebunden werden kann. Die CSS- und JavaScript-Datei soll auch nur mit dieser Extension geladen werden und nicht immer global bei jedem Seitenaufruf, auch dort wo wie Extension nicht integriert ist, geladen werden. Es stehen in TYPO3 verschiedene Varianten zur Integration einer CSS- oder JavaScript-Datei zur Auswahl. Einen Idealfall gibt es nicht, denn jede Extension arbeitet individuell.
In dem gleich gezeigten Beispiel (Tutorial), möchte ich euch zeigen, wie eine CSS- oder JavaScript-Datei von einer Extension geladen werden kann, aber auch per TypoScript ausgetauscht werden könnte. So könnte nach Belieben ein Integrator die CSS-Datei austauschen, ohne die Extension zu bearbeiten und die Updatemöglichkeiten zu verringern, da der Core angepasst wurde.
Datei aus Extension per TypoScript definieren
Der Backenduser soll die Möglichkeit erhalten, zu entscheiden, welche CSS-Datei von der Extension eingebunden werden soll. Die Config-Option cssFile innerhalb des Plugins bietet uns genau diese Möglichkeit, um per TypoScript eine neue CSS-Datei für die Extension zu definieren.
In unserer Extension prüfen gegen, ob die TypoScript-Konfiguration für unsere Extension mit dem ExtensionKey "extensionKey" gesetzt wurde. Falls keine Individualisierung der CSS-Datei gesetzt wurde, werden wir unsere Extension-CSS-Datei laden lassen..
Datei in den HTML--Bereich schreiben
Setzen lässt sich die CSS-Datei für unsere Extension über das pSetup nur, wenn die Cache-Methode für unser Plugin aktiviert wurde. - Ist der Cache deaktiviert, wird die Extension als USER_INT-Objekt geladen und kann das $GLOBALS-Array nicht manipulieren. Sofern ich die Erfahrung gemacht habe, ist es seit der TYPO3 Version 4.5.x möglich, auch die CSS-Dateien in den Head-Bereich zu setzen, wenn die Cache-Methode für eine Extension deaktiviert wurde.
Korrekter Pfad zur Default-Datei
Zur Ermittlung des richtigen Dateipfades müssen wir definieren, wo die Extension-CSS-Datei liegen soll. Empfehlenswert ist es, die CSS-Datei mi in das Extensionverzeichnis zu liegen und da es eine Ressource ist, in einen neuen Ordner namens "res" abzulegen. Die Default-Struktur der Extension sieht z.B. wie folgt aus:
- doc
- mod1
- pi1
- res
Sofern wir den Ordner "res" angelegt und dort die CSS-Datei für unsere Extension abgelegt haben, können wir den Pfad zu unserer CSS-Datei definieren. Mit der mitgelieferten Funktion "siteRelPath" ermitteln wir den aktuellen Pfad zu unserer Extension.
Für die finale Implementierung unserer CSS-Datei oder auch JavaScript-Datei, wenden wir die Funktion zur Pfad-Generierung an und übergeben zusätzlich unsere CSS/JS-Datei.