Dienstag, 11. März 2014

Seitenteaser - Zeigen Sie Ihren Besuchern was Sie erwartet

Seitenteaser (oder engl. Pageteaser) finden Sie auf so ziemlich jeder Website und das aus gutem Grund: Sie zeigen den Besuchern gleich, was sie auf den Unterseiten erwartet. Die Usability ihrer Website verbessert sich und Ihr Seiten-Besucher freut sich, muss er nicht wild suchen bis er seine Inhalte findet. Auch Google mag Teaser, finden sich darin zahlreiche zusätzliche Informationen zu den Unterseiten. Die Code-/Content Ratio wird auch noch größer, was einen zusätzlichen SEO-Nutzen darstellt.

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!


4 Kommentare:

  1. Hallo ich habe dein tolles Menü ausprobiert, aber leider kommen die Bilder bei mir durcheinander nutzt 6.2

    AntwortenLöschen
    Antworten
    1. Hallo Janek,
      es 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

      Löschen
  2. kleiner Tipp:
    Wenn 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 >

    AntwortenLöschen
  3. Es funktioniert wunderbar, auch in den neuesten Typo3 Versionen (7.6.x)
    Es 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?

    AntwortenLöschen