t3n 14

Workshop TemplaVoilà Teil 2: Eigene Content-Elemente erstellen

Seite 4 / 7

Hier können Sie eine Beschreibung des Elements hinterlegen. Tragen Sie zum Beispiel folgenden Text ein: „Zweispalten Container mit einer 50%-50%-Aufteilung“. Im Feld „Icon“ können Sie ein Icon für das Flexible-Content-Element (FCE) angeben. Dieses Icon muss entweder vom Dateityp „PNG“ oder „GIF“ sein und wird in unveränderter Größe dargestellt, von TYPO3 also nicht skaliert. Standard-TYPO3-Icons haben eine Größe von 18x16 Pixeln (Breite x Höhe).

Nach dem Speichern wird Ihr Content-Element beim Anlegen neuer Inhalte auf einer Seite im Assistenten mit Icon und Beschreibung sehr übersichtlich gelistet und einem Redakteur wird somit die Arbeit erleichtert.

Content-Element „Bilderüberschrift“ erstellen

Um zu veranschaulichen, wie TypoScript in den Flexible-Content-Elements funktioniert, erstellen Sie als nächstes ein Content-Element für „Bildüberschriften“. Dieses soll einem Redakteur ermöglichen, eine Überschrift einzufügen, die als Bild dargestellt wird. Dadurch werden Überschriften möglich, die zum Beispiel mit einer bestimmten Schriftart, etwa der Hausschriftart, gerendert werden. Auch hierfür brauchen Sie eine HTML-Vorlage.

HTML-Vorlage (bilderheadline.html)

<html>
<head>
<title>Bilderheadline</title>
<link href="mainstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bilderheadliner">
</div>
</body>
</html>

Listing 3

Wie bereits die HTML-Vorlage für das zweispaltige Layout, speichern Sie auch diese Datei im Template-Ordner des Fileadmins. Wechseln Sie anschließend wieder in das Filelist-Modul in der linken Navigation, navigieren Sie in den Template-Ordner und rufen per Klick auf das Icon der Datei das TemplaVoilà-Modul auf. Mappen Sie erneut das Body-Tag als Root-Element und wählen Sie „INNER“ als Mapping-Type. Anschließend erstellen Sie ein neues Field (field_headline) und klicken auf „Add“.

  • Seite:
  • 1
  • 2
  • 3
  • 4
  • 7

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
jo.tischer

1

ROOT
Select the HTML element on the page which you want to be the overall container element for the template.

array

Bilderheadline

input_g

Bilderheadline

input
48
trim

Alt-Tag der Headline

input

1

Alt-Tag der Headline

input
48
trim

jo.tischer

Der artikel ist fein, aber doch schon alt?
Das ist meine DS XML "Bildüberschrift":

1

ROOT
Select the HTML element on the page which you want to be the overall container element for the template.

array

Bilderheadline

input_g

Bilderheadline

input
48
trim

Alt-Tag der Headline

input

1

Alt-Tag der Headline

input
48
trim

Da ist von "Typoscript" oder GIF nichts zu sehen. Weiß jemand warum?

Uwe Urbann

Super Artikel, sehr verständlich erklärt, vielen Dank! War genau das was ich gesucht hatte. Die flexiblen Content Elemente sind ja wirklich eine feine Sache!

Nur ein Hinweis: ich hatte den HTML-Code direkt aus dem Artikel übernommen (konnte den Softlink nicht finden). Und da sind die Anführungszeichen bei den inneren div-Containern nicht die "richtigen", sondern werden (zumindest auf dem Mac) als typographische Anführungszeichen übernommen. Dadurch funktioniert das Mapping nicht und es kommt zu einer Fehlermeldung!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung