Entwicklung & Design

Workshop TemplaVoilà Teil 2: Eigene Content-Elemente erstellen

Seite 2 / 7

Auf der darauffolgenden Seite können Sie das Mapping anlegen, der erste Schritt ist das Mapping des Root-Elements. Das Root-Element ist in diesem Fall, genau wie beim Page-Template, das Body-Tag der HTML-Datei. Klicken Sie also auf den Button „Map“ auf der rechten Seite.

Um das Mapping zu erleichtern, wählen Sie in dem Dropdown-Menü „Mapping Window“ die Option „Mode: HTML Source“ aus. Sie sehen nun den HTML-Code der Seite, in dem Sie auf das Body-Tag klicken.

Dieses wird dadurch verwendet. Wählen Sie in der anschließenden Maske den Mapping-Type „INNER“ aus. Sie können jetzt mit dem Mapping der verschiedenen Elemente innerhalb des Bodys fortfahren.

Als nächstes legen Sie ein neues Feld an (Add new field), benennen es mit dem (frei wählbaren) Namen „field_inhaltlinks“ und klicken auf „Add“.

Diesem neuen Feld geben Sie in der angezeigten Eingabemaske den Titel „Inhalt Linke Spalte“ und wählen als Editing Type „Content Elements“ aus. Dies ermöglicht Ihnen später im Backend, in diesem Bereich der Seite beliebige Content-Elemente hinzuzufügen. Danach klicken Sie auf „Add“.

Jetzt müssen Sie auch dieses Feld noch mappen und klicken hierfür auf der rechten Seite auf „map“. In der HTML-Ansicht wählen Sie den Container für die linke Spalte aus (<div class=“linke-spalte“> ) und wählen „INNER“ als Mapping-Type.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
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!

Antworten
jo.tischer
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?

Antworten
jo.tischer
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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.