CMS (TYPO3) - Kurs Tag 10 - Inhaltselemente (Dateilinks & Datensätze anlegen), Sidemenu in der Sidebar erstellen /Erweiterungselemente

Mitschrift 21.05.2014

TAG 10

Farben für die beiden Kurse

• Customizer
• Anwender:
• Alle Teilnehmer

Was machen wir heute?

• Anwender: 2 neue Inhaltselemente kennenlernen und Texte schreiben - das System checken
• Customizer:  neue Möglichkeiten des Typo3, Sitemenü statt DropDown, Suche, aus dem Downloadbereich letzte Sicherung aufspielen und online on stellen, Einweisung für unsere Anwender, System (Kategorien anlegen) ausprobieren und tiefer anschauen

Customizer:

Kategorien einstellen:
Wenn wir eine Kategorie einstellen, müssen wir auch ein Plug-In einstellen
Seite - auf den Ordner bspw. Bayern gehen und dann Seiteninhalte - Plug-ins - Plug-in (Nachrichten)

User können keine Bilder hochladen - woran liegt das?
Interne Referenz zu den Bildern können nichtaufgebaut werden.
Dafür braucht man einen Lese und Schreibe-Zugriff:
Allgemeinen Gruppen jeweils unter dem Reiter Zugriffsliste - Tabelle ändern - Haken bei Dateireferenz
(Haken bei Berechtigung fehlt: Liste - kurs05 - backend-Nutzergruppe - zugriffsliste - haken bei Dateireferenz in Tabelle ändern)

Anwender:
Rahmenbedingungen für den Bilderupload:

• Bilder - was dürfen wir vetröffentlichen/ was nicht?
• Übersicht von Claudia - irights.info
• Recht am eigenen Bild (Zustimmung der Person auf dem Bild erforderlich)
• Urheberrecht (muss den Fotografen fragen, Schreiber des Textes)
• moralische Apsekte beachten, nicht diskriminierend...
• Kinderfotos nicht veröffentlichen
• Was dürfen wir veröffentlichen? - commons.Wikimedia ist eine Bilderdatenbank, mit Bildern, die man verwenden darf, wenn man den Urheber mit angibt - unten: use this file  oder Download/Herunterladen klicken und den Namen des Owners/ Fotografen angeben.
• Impressum - e-recht24.de

Bilder löschen in typo3:

Dateiliste - allgemein - alle Bilder angezeigt: wie kann ich das Bild löschen - auf das Symbol vor dem Bild - löschen - ABER: Wenn es von anderen Redakteuren benutzt wird, dann kann man es nicht löschen, bevor ich es löschen kann.

Einstellungen von Backendbenutzern vergleichen

Unter Backendbenutzer in den Admin.Werkzeugen, kann ich die Verzeichnisfreigaben etc. vergleichen, um zu gucken, ob alle richtig angelegt sind oder ob ich was vergessen habe zu customizen.
Ich kann auch die Filterfunktion nutzen


Anwender:

weitere Inhaltselemente

Spezielle Elemente (Reiter)

=> Dateilinks

Haben die Möglichkeit Dateien anzuzeigen und hinzuzufügen


Seite - Seite aussuchen - Neuen Datensatz erstellen - zweiter Reiter:  Spezielle Elemente
Reiter Allgemein: Dateien - Datei hinzufügen - Dann erhalten wir im Frontend einen Link zum pdf - die pdf wird dann in einem pdf-Viewer angezeigt
Bspw. können wir unseren Usern ein pdf zur Verfügung stellen

=> Datensätze einfügen

Erstellung von Verknüpfung zu Seitennachrichten
Seite - Seite aussuchen - Neuen Datensatz erstellen - zweiter Reiter:  Spezielle Elemente - Datensätze einfügen

So kann ich auch einen inernen Verweis erstellen - dies findet bspw Anwendung bei den AGBs - So muss ich sie nicht immer neu erstellen


Customizer:

Sidemenu in der Sidebar erstellen

bereitstellen - Unterseiten anklickbar machen
Dazu local arbeiten: Xampp starten

Unser Design hat kein DropDownmenü - wir wollen ein Sidemenü anstatt des DropDowns bauen.
Downloads / emerald2 - index.html öffnen, um Sitemenu anzusehen
Sitebar in UL/LI-Struktur unterteilt = verschachtelte Struktur
Das müssen wir nachbauen:

Was ist Index.html und was ist Typoskript?
Jedes Element, das in der Sidebar angezeigt wird, ist ein li-Element - werden eingerahmt von der UL

• LI ist eine geschlossene Einheit für sich - Typoskript
• UL soll allgemein gelten - index.html

in der index.html die öffnenden und schließenden Parameter UL setzen.
Mit Hilfe eines Markers

Die index.html im Backend ändern:

die index.html ist in den htdocs in den tagesverzeichnissen abgelegt.
Ich muss eine Möglichkeit dinden, die index.html aus dem Backend bearbeiten zu können


Dateliste - templates - index.html
über den bearbeiten modus, kann ich dann die index.html bearbeiten.

Eingabe in die index.html:

nach dem div-Container id="sidebar" einen Marker einfügen:

<ul>
###SIDEMENU###
</ul>

index.html: UL in die Sidemap eintragen und Marker SIDEMENU

Frage:
Warum kann ich nicht den vorhandenen SIDEBAR Marker verwenden?
Antwort:
Weil er schon mit den Styles.content.getRight belegt ist.


TS - Ordner anlegen: Ausgelagertes Typoskript
Modularen Aufbau wählen:
auf Homeebene nur das zentarle Page, alles andere lagere ich in einen TS- Ordner außerhalb der Seitenstruktur unterhalb der Datensatznes - neuer Ordner namens TS

Dann aus dem Template - Home Setup das lib.menu rausschneiden, so dass nur noch das page drinbleibt:
Abspeichern!!!


Jetzt auf Template - TS - klicken um ein ERWEITERUNGSTEMPLATE zu erstellen:
= anreicherung des Roottemplates - nicht den oberen Button klicken, weil der ein neues Roottemplate erstellen würde



dann auf Setup:

HINWEIS: Ich kann nichts dirwekt in dieses Typoskwript reinschreiben - Trick: erst ein a reintippen, dann STRG V, dann das a wieder löschen.

also ein a reinschreiben und STRG+ V - Sonst kann ich nichts einfügen
und das a wieder löäschen!
Speichern und schließen!

-> Skrip verlagert. (lib.menu)

Um später die Erweiterungstemplates zu unterscheiden, können wir den Titel des Templates ergänzen: also +ext drinlassen und menu dahinterschrieben - speichern und schließen

Einbindung des Erweiterungstemplates in Home = Home sagen, dass es das Template gibt:

• Template - Home - vollständigen Template-Datensatz bearbeiten - Reiter Enthält - Erweiterungstemplates einbinden - Basis-Template einschließen 
• -> wir können unsere eigenen Templates einfügen
• Hinweis: statische sind die von den Entwicklern entwickelte.
• Dann auf Template klicken - im Seitenbaum auf den Ordner TS gehen und ext menu wählen

=> Damit ist das Basistemplate eingeschlossen.

• Speichern und schließen.

 
Wenn ich alles richtig gemacht habe, dann hat sich im Frontend nichts sichtbar verändert.


Info am Rande: Template-Hierarchie ansehen:
Template - Werkzeug Template-Analyse zeigt die Struktur , also Template-Hierarchie

Template - Home - Template-Analyse auswählen

Was ist nun mit unserem Seitenmenü passiert

Template - TS - Setup für ext menu - hier erstelen wir unser Sidemenü:

Menüs sind immer wieder UL LIs - daher lib-menu kopieren und darunter einfügen

NAMEN ändern !!! ganz wichtig! also sidemenu

lib.menu = HMENU
lib.menu {
  1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

lib.sidemenu = HMENU
lib.sidemenu {
  1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

Wir müssen jetzt noch das Lib-Sidemenu auf unseren marker setzen:

Template - Home - Setup - Hier einen Marker setzen: 

page = PAGE

page.stylesheet = fileadmin/templates/style.css

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/templates/index.html

page.10.workOnSubpart = DOCUMENT
page.10.marks.MENU < lib.menu
page.10.marks.SIDEMENU < lib.sidemenu

page.10.marks.CONTENT < styles.content.get
page.10.marks.SIDEBAR < styles.content.getRight

#page.10 < styles.content.get

speichern:
es hat sich was verändert - unser sidemenu ist rechts in der Sidebar

HINWEIS: Falls es nicht direkt angezeigt wird: Caches löschen!!! Da wir was in der index.html geändert haben

Jetzt wollen wir ein Menü mit Unterseiten haben (HMENU)

Funktionen - Unter Uns - Mehrere Seiten anlegen (um Unterpunkte anzulegen ;) )

Browser: typo3.net enthält die deutsche Typo3 Referenz
typo3.net - wissen - tsref

Mit einem HMEnu wird ein menü für die Darstellung im Frontend erzeigt - Inhaltselemente sind Contentobjekts (=cObjects)
Inhaltselemente/(cObjects)
Hier finden wir das HMENU
Eigenschaft: entryLevel = 

Gibt an, in welcher Ebene der rootline das Menü beginnen soll. Der Standardwert ist "0", was uns zu einem Menü mit den ersten Seiten der Website führt. Ist der Wert < 0, liegt entryLevel "hinter" der rootline. "-1" ist also ein Menü mit Einträgen aus der obersten Ebene, "-2" ist die Ebene nach dem obersten Ebene,...

Template - TS - Setup

lib.menu = HMENU
lib.menu {
  1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

lib.sidemenu = HMENU
lib.sidemenu {
  entryLevel = -1
  1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

Entrylevel muss auf der gleichen Ebene wie die 1 liegen...
Speichern und Chache leeren, um es auszuprobieren (start - Auge)

Uns fehlt noch die Überschrift des Sidemenus:
ein weiteres Li mit einer h2 vorlagern! 

lib.menu = HMENU
lib.menu {
  1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

lib.sidemenu = HMENU
lib.sidemenu {
  entryLevel = -1
  1 = TMENU
  1{
    wrap = <li><h2>Sidemenü</h2><ul> | </ul></li>
    NO.wrapItemAndSub = <li> | </li>
  }
}

Speichern / Cache leeren und gucken :)

Ergebnis:

Ergebnis: Sidemenu in typo3 Schritt für Schritt

Anwender:

Aufgaben: 
1) eine News zu der Region erstellen
2) einen Artikel auf der eigenen Seite erstellen
3) eine News schreiben, die sowohl auf start und auf der Regionenseite angezeigt wird
-> klappt über - NAchricht - DatensatzNews - Start - Neues Element: Reiter: Kategorien und Beziehungen - Kategorie start und NRW auswählen