1. Zusammenfassung der letzten Vorlesung

Transkript

1 Websiteentwicklung auf Basis vontypo3 TypoScript Unterlagen zur Vorlesung WS 14/ Zusammenfassung der letzten Vorlesung 2. Marker befüllen 3. Bildbearbeitung mit TypoScript 1

2 Template anlegen Template anlegen Title: Titel des Templates für interne Zwecke Sitetitle: Präfix für Seitentitel Description: für interne Zwecke Resources: Hier können z.b. Schriften (ttf) eingebunden werden, auf die dann ohne Pfadangabe zugriffen werden kann. Constants: Hier werden Variablen definiert und mit einem konstanten Wert versehen. Setup: enthält den TypoScript Code 2

3 Template anlegen Template bearbeiten Template anlegen Statisches Template für das Rendern der Page Content Elemente einbinden 3

4 TypoScript Setup CONFIG: Hier werden allgemeine Konfigurationen eingestellt Im Beispiel wird der Doctype auf HTML5 gesetzt Die Sprache der Website auf Deutsch TypoScript config Beispiele language = de Sprache für Übersetzungen (XML-Files) locale_all = de_de Zeichenkodierung in PHP : setlocale("lc_all",[wert]); baseurl = <base href=" /> tx_realurl_enable = 1 Extension für RealURL wird aktiviert linkvars = L, print erweitert URL um "&L=[L-value]&print=[print-value]" bei allen Links in TYPO3. Liste: 4

5 TypoScript Setup PAGE: Top Level Object includecss: Hier werden ein oder mehrere Stylesheets eingebunden Objekt TEMPLATE: Hier wird eine Datei eingebunden, die (im Gegensatz zum Objekt FILE von TYPO3 geändert werden kann. Es wird dazwischen geschaltet. Marker ansprechen 2 Typen von Marker 1. Bereich kommentiert HTML-Designvorlage TypoScript 5

6 Marker ansprechen 2 Typen von Marker 2. Marker HTML -Designvorlage TypoScript marks und subparts sind Funktionen des TEMPLATE-Objekts Syntax: marks.[platzhalter] = [OBJEKT] subparts.[platzhalter] = [OBJEKT] Objekte (Beispiele) Objekt TEXT Der Marker BREADCRUMB wird angesprochen und durch einen Text ersetzt. Objekt IMAGE Der Marker LOGO wird angesprochen und durch ein Bild ersetzt. 6

7 Datenbank Feld aus der Tabelle pages auslesen marks { BREADCRUMB = TEXT BREADCRUMB.field = title } Die TypoScript Funktion.field entspricht im o.g. Fall der SQL-Abfrage: SELECT title FROM pages WHERE uid = [aktuelle Seite] AND hidden=0 AND deleted=0 Datenbank Feld auslesen, wenn anderes leer Zunächst wird das Feld subtitle ausgelesen, ist dieses leer wird title ausgelesen BREADCRUMB.field = subtitle // title Die Tabelle pages enthält alle Inhalte aus page properties 7

8 Die Tabelle pages enthält alle Inhalte aus page properties Im Reiter Resources kann der Redakteur Dateien in die Seite einbinden. TYPO3 legt eine Kopie der Datei im Ordner uploads/media ab. Diese können dann ebenfalls über die Datenbanktabelle pages abgerufen werden. Bild aus page properties media einbinden subparts { IMAGE = IMAGE IMAGE.file.import = uploads/media/ IMAGE.file.import.field = media IMAGE.file.import.listNum = 0 IMAGE.file.width = 960 } Zunächst wird das Verzeichnis angegeben. Dann das Datenbankfeld mit dem Dateinamen Es wird die erste Datei ausgelesen. und auf 960 Pixel umgerechnet. TYPO3 erzeugt wiederum eine Kopie der Datei mit 960 Pixel breite Diese befindet sich im Verzeichnis typo3temp/gb 8

9 Grafikdatei aus Feld media rekursiv abfragen import = uploads/media/ import.data = levelmedia:-1, slide import.listnum = 0-1 bedeutet: es wird eine Menüebene zurück gegangen slide meint: bis ein File gefunden wurde Anmerkung zur Datei FH-Frankfurt05_Fileadmin_Setup.zip Diese Datei enthält neben de TypoScript Setup alle Verzeichnisse und Dateien innerhalb des Ordners Fileadmin. Das sind Designvorlage (HTML und CSS) Bilder Hintergrundbilder Schriften Diese werden zum Erstellen der Webssite benötigt. Bitte die Datei entpacken und die Verzeichnisse unterhalb von Fileadmin in Ihren fileadmin Ordner verschieben. Standardpfad: C:\TYPO3_4.7.7\htdocs\Dummy\fileadmin 9

10 Vielen Dank für Ihre Aufmerksamkeit Diese Präsentation können Sie ab morgen unter: /fh-frankfurt herunterladen. Miklos Weiszhaupt 10