Tag: extension Archive - TYPO3 Diplom

Responsive Design mit TYPO3

Auf Slideshare findet sich eine interessante Präsentation, die den Einstieg in das Thema Responsive Design mit TYPO3 bietet. Neben Stolpersteinen werden auch Best Practices vorgestellt.

Von den notwendigen Config-Einstellungen (korrekter Doctype, Charset etc.) über das richtige Markup-Rendering (DIV-Container dürfen z.B. keine festen Breiten haben) bis hin zum richtigen HTML-Header (Stichwort Viewport, Kompatiblität zum Internet Explorer, Apple-Endgeräte Support) sowie den verbundenen Fallstricken (z. B. das Verhalten von Videos zum Responsive Webdesign, Tabellen oder Bildunterschriften) werden alle Basics kurz erläutert.

Die in der Präse genannte Extension „Responsive TYPO3“ ist derzeit in der Beta-Phase und sehr experimentell anzusehen. Trotzdem ist dies sicher ein spannender Schritt in Richtung Responsive Design für TYPO3.

Man darf gespannt sein wie es weiter geht.

Konfiguration des Template Auto-Parsers

Der Auto-Parser ist eine Extension, welche die XHTML-Designvorlage nach korrekter Konfiguration automatisch mit TYPO3-Markierungen zur Laufzeit versieht. So können vom Content Management System in die vorgesehenen Positionen, in diesem Fall durch „subparts“ markiert, die verschiedenartigen Inhalte dynamisch einfügt werden.

#Konfiguration des Auto-Parser fuer Haupt-Template:
plugin.tx_automaketemplate_pi1 {

  # Die Designvorlage wird eingelesen:
  content = FILE
  content.file = fileadmin/template/main_template.html

  # Hier werden die Elemente im der XHTML-Vorlage definiert
  # welche von subpart-Comments umgeben werden sollen:

  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title

    DIV.all = 1
  }

  # Alle relativen Pfadangaben soll diese Prefix vorangestellt werden:
  relPathPrefix = fileadmin/template/
}

Zu Beginn ist es notwendig, die Designvorlage einzulesen (diese wurde zuvor samt Style Sheet über den Dateimanager an die angegebene Position gebracht). Hierfür wird die Variable „content“ mit dem FILE-Objekt belegt, damit eine Datei eingebunden werden kann . Anschließend erfolgt die Zuweisung der Designvorlage, die ab diesem Zeitpunkt dem System bekannt ist. Darauf folgend wird die Vorlage nach bestimmten Tags abgesucht und mit Subpart-Markern belegt. Zwischen dem öffnenden und schließenden Body-Tag der Vorlage soll der Subpart „DOCUMENT_BODY“ eingefügt werden. Analog dazu gilt dies für den Head-Tag. Außerdem wird der Title-Tag, welcher den Seitentitel beinhaltet, entfernt. Der Titel der jeweiligen Seite wird durch TYPO3 später dynamisch und passend ergänzt. Alle Div-Tags der Vorlage, an die ein Klassen- oder ID-Name vergeben wurde, werden ebenfalls mit gleichnamigen Subparts versehen. Durch diesen Umstand ist erreicht, dass jeder relevante Container des zu Grunde liegenden Layout über einen füllbaren Subpart-Marker verfügt, der durch dynamische Teile (Navigationen, Inhalte etc.) ergänzt werden kann . Die letzte Anweisung des Setups bewirkt, dass allen relativen Pfadangaben aus der Vorlage der Zusatz „fileadmin/template/“ vorangestellt wird. Dabei handelt es sich um das selbst gewählte Unterverzeichnis in dem alle Template-bezogenen Daten abgelegt sind. Es sind keine Pfadanpassungen in der Ausgangsvorlage nötig. TYPO3 kann diese Begebenheit vollkommen automatisch ohne weiteres Zutun des Users regeln.