Sie sehen, zahlreiche Gründe sprechen für den Einsatz von Seitenteasern. (Wenn Sie es nicht erwarten können den Code auszuprobieren: gleich zu Schrit 1)
Was sind Teaser?
Teaser stellen eine Vorschau auf weiterführende Inhalte dar. Das sind in der Regel Unterseiten Ihrer Website. Teaser beinhalten meist ein Vorschaubild, eine Überschrift (meist der Seitenname der Zielseite), einen kurzen Text der die Inhalte der Zielseite ein wenig beschreibt und einen Link zur Unterseite.Seitenteaser. Wie soll er aussehen?
Für unseren Teaser hätte ich gerne ein Vorschaubild, den Seitennamen (oder den alternativen Seitennamen), einen kurzen Text und einen Link, der "weiterlesen" heißen soll.Woher mit den Inhalten des Teasers?
Der Seitenteaser soll alle seinen Informationen aus den jeweiligen Seiteneigenschaften beziehen.Vorteil: Sie trennen klar zwischen den Seiteninformationen und Ihren Seiteninhalten. Zusätzlich können Text, Bild etc. optimal für Leser und Suchmaschinen angepasst werden.
Ich wähle also folgende Felder für meine Inhalte: abstract unter Metadata (für den Beschreibungstext) und files (bzw. media) unter Resources.
Umsetzung mit TypoScript
Für einen Seitenteaser brauchen Sie weder eine Extension noch JavaScript (zumindest wenn Sie hier ohne Effekte, Animationen oder - bei sehr vielen Teasern - mit asynchronem Nachladen arbeiten).TYPO3 selbst bringt mit seinem Inhaltselement "Menu" oder "Special Menus" gleich die Funktionalitäten mit, mit denen Sie leicht Ihre eigenen Teaser erstellen können. So können Sie z.B. das Menu "menu of subpages ... including abstract" nutzen, um gleich bilderlose Teaser zu erzeugen.
Nachteil: Wenn Sie bereits ein eigenes HTML- oder Fluid-Template erstellt haben, müssen Sie die TYPO3 eigenen Formatierungen mit berücksichtigen und Ihr CSS entsprechend anpassen.
Zusätzlicher Nachteil: Sie haben weder ein Vorschaubild, noch einen weiterführenden Link.
Machen Sie sich dennoch das TYPO3-Teassermenu zu nutze und passen Sie es an Ihre Bedürfnisse an.
Schritt 1: Neuer Menupunkt im Inhaltselement "Special Menus"
Bringen Sie in Schritt 1 TYPO3 bei, ein neues Menu-Element mit aufzunehmen.Tragen Sie in Ihr PageTS der Hauptseite einfach folgenden Code ein und Sie erhalten für Ihr Menu einen neuen Punkt "Seitenteaser m. Vorschaubild".
// -------------------------------
TCEFORM.tt_content.menu_type.addItems.100 = Seitenteaser m. Vorschaubild
// -------------------------------
Fertig.
Schritt 2: Das TypoScript für Ihr neues Menu-Element
Führen Sie Ihr neues Element in die tt_content-Referenz von TYPO3 ein. Es handelt sich bei den "Special Menus" um Navigationsmenus. Sie kennen das bereits wenn Sie z.B. ein HMENU/TMENU für Ihre normalen Navigationen erstellen.Sprich tt_content.menu.20.100 ist ein HMENU/TMENU.
(Beschreibung in den Kommentaren)
// Vererbt die Funktionalität des Menus "Menu of subpages ... including abstract" auf das neue Menu-Item "100"
tt_content.menu.20.100 < tt_content.menu.20.4
tt_content.menu.20.100 {
// Löscht evtl. Wraps um das gesamte Objekt
stdWrap >
1 {
// Wrap um den gesamten Teaser
wrap = <div class="row">|</div>
NO {
// Keine Verlinkung des Seitennamens, das machen wir selber
doNotLinkIt = 1
// alle zusätzlichen stdWrap-Auszeichnungen und Wraps löschen
stdWrap >
linkWrap >
// löschen des stdWrap (after) und folgender Objekte,
// welche dem normalen Menu-Element 4 nachfolgen würde (z.B. als <dd> einer Liste)
after >
// ------------------------
// Eigenes Objekt aufbauen
// Da wir mehrere Elemente brauchen, ist unser Objekt vom Typ Content Object Array
// Statt eines Arrays können Sie auch mit einem Template das Folgende erstellen.
// Ersetzen Sie einfach die Array-Indizes durch Marker, Subparts oder Variablen (Fluid)
// Dadurch trennen Sie Layout von Inhalt.
// Nachteil: das parsen des Templates braucht mehr Rechenleistung (meist zu vernachlässigen)
// Vorteil: Bessere Übersicht
stdWrap.cObject = COA
stdWrap.cObject {
// Wrapped jeden Einzelteaser
wrap = <div class="item">|</div>
// Zuerst möchte ich das Bild aus dem Media-Feld
// Sie können aber auch anders beginnen
// ------------------------
// Erstellt Bild-Objekt
10 = IMAGE
10 {
// Als Alt-Text den Seitennamen
altText.field = title
// Dateizuordnung
file {
// Speicherort der Bilder aus dem Feld Media
// Ist eher eine Art Workaround, da die Bilder ja referenziert werden (ab TYPO3 4.7)
import = uploads/media/
// Datenbankfeld der Seite mit dem Vorschaulbild
import.field = media
// Da das Bild über den FAL referenziert ist, muss das nochmals explizit angeführt werden,
// dass es sich um eine Referenz handelt
treatIdAsReference = 1
// Das erste Bild soll ausgeben werden
import.listNum = 0
}
// stdWrap um das Bild
stdWrap {
// Wrap um das Bild
wrap = <div class="image">|</div>
typolink {
// Verlinkt das Bild mit der Unterseite
parameter.data = field:uid
}
}
}
// Den Textblock bilde ich in einem COA ab
20 = COA
20 {
// Zuerst der Seitenname als TEXT-Objekt
10 = TEXT
10 {
// Holt den Seitennamen aus dem Feld "nav_title" = "alternative Pagetitle".
// Wenn das Feld leer ist, wird der Seitenname aus dem Feld "title" = "Pagetitle" geholt.
field = nav_title // title
wrap = <h3>|</h3>
typolink {
// Verlinkt den Seitennamen mit der Unterseite
parameter.data = field:uid
}
}
// Ausgabe des Kurztexts.
20 = TEXT
20 {
// Holt den Text aus dem Feld "abstract" (unter Meta-Angaben der jeweiligen Seite)
field = abstract
// Für den Fall, dass Sie Umbrüche im Feld "abstract" haben
br = 1
wrap = <p>|</p>
}
// Der abschließende "weiterlesen" Link.
// Ebenfalls ein Text-Objekt
30 = TEXT
30 {
// Das Objekt wird mit einem festen Text befüllt
value = weiterlesen
wrap = <p>|</p>
typolink {
// Verlinkt den Seitennamen mit der Unterseite
parameter.data = field:uid
}
}
}
}
}
}
}
Fazit:
Seitenteaser sind eine großartige Sache um die Usability der Seite zu verbessern, den Seitenbesucher gezielt in Ihre Inhalte einzuführen und die Code-/Content Ratio zu erhöhen.Mit ein wenig TypoScript lassen sich nicht nur einfache, sondern auch sehr komplexe Teaser erstellen und für Ihren Redakteur ist die Trennung zwischen Seiteninformationen und Seiteninhalten ebenfalls eine Erleichterung, wird sein Workflow gleich mit optimiert.
Viel Spaß beim Ausprobieren!
Hallo ich habe dein tolles Menü ausprobiert, aber leider kommen die Bilder bei mir durcheinander nutzt 6.2
AntwortenLöschenHallo Janek,
Löschenes kann sein, dass TYPO3 6.2 da ein kleines Problem mit dem treatIdAsReference hat. Einen Workaround, der sehr gut funktioniert ist, statt ein IMAGE-Object zu erstellen, erstmal ein FILES-Object aufzubauen und darin (im renderObj) das IMAGE-Objekt zu erzeugen:
// Statt IMAGE folgt FILES
10 = FILES
10.references.table = pages
10.references.fieldName = media
// Dann das neue IMAGE-Objekt per renderObj
10.renderObj = IMAGE
10.renderObj.file.import.data = files:current:publicUrl
// Der Rest bleibt wie gehabt (alles innerhalb von renderObj natürlich
// das treatIdAsReference muss auch wegbleiben!
Viele Grüße
kleiner Tipp:
AntwortenLöschenWenn man ein Menü über "ausgewählte Seiten" (und nicht über die Unterseiten ausgewählter Seiten) haben möchte, dann kopiere man "default" anstatt "4":
// Vererbt die Funktionalität des Menus "Menu of selected pages" auf das neue Menu-Item "100"
tt_content.menu.20.100 < tt_content.menu.20.default
Dazu muss man aber auch noch zusätzlich einen NO-Wrap eliminieren (das kann man ohnehin!):
...
tt_content.menu.20.100.1.NO.wrapItemAndSub >
Es funktioniert wunderbar, auch in den neuesten Typo3 Versionen (7.6.x)
AntwortenLöschenEs gibt aber ein Problem - Mounted Page.
typolink.parameter.data = field:uid
ignoriert es einfach und verlinkt direkt zu Originalseite, z.B.:
index.php?id=100
statt
index.php?id=200&MP=200-100
wie es Menü von Unterseiten macht...
Gibt es dafür eine Lösung?