eCMS Formate - Elemente Cheat-Sheet

In diesem Artikel finden Sie eine Auswahl von Standard-Formaten als Elementschreibweise.

Einleitung

Viele Formate lassen sich bei der Verwendung in der sogenannten Elementschreibweise nutzen. Formate sind dynamische Ausgabe-Templates die in der Programmiersprache PHP erstellt werden und auf einer Seite letztendlich HTML erzeugen. Zum grundsätzlichen Verständnis was Formate sind, empfehlen wir zuerst den Artikel Formate - die Grundlagen zu lesen.

Grundlegendes zur Elementschreibweise finden Sie unter Formate als Elementschreibweise.

Wo kann ich das verwenden?

Die Elementschreibweise können Sie in vielen Einsatzgebieten - vornehmlich Fließtexten - verwenden. Nachfolgend ein paar Bereiche, die gut für die Elementschreibweise geeignet sind:

Layoute
innerhalb von Formaten selbst
Textbausteinen
direkte Inhalte als Platzhalterkonfiguration
redaktionelle Artikel

Tipp:
Innerhalb von Fließtexten in redaktionellen Artikel stehen Ihnen an vielen Stellen verbesserte Eingabemöglichkeiten über die Oberfläche zur Verfügung, so dass Sie die Elementschreibweise hierbei nicht zwangsläufig verwenden müssen.

Cheat Sheet

Bei den nun folgenden Beispielen werden Variablen zur Verdeutlichung immer in __ gesetzt, also __Variable__ . Beim Einsetzen der Variable ist auf die __ zu verzichten.

Links auf eCMS-Seiten

Ein Link zu einer eCMS Seite kann über die Formate eCMS-LINK / eCMS-LINK-URL eingefügt werden.

${eCMS-LINK}$

Syntax:

${eCMS-LINK:__Seiten-Label__(name=Mein Link)}$

Beispiel:

${eCMS-LINK:ecs_home(name=Link zur Startseite des Shop-Frontends)}$

${eCMS-LINK-URL}$

Das Format gibt es auch in der Variante eCMS-LINK-URL, um nur die URL der eCMS Seite zurückzuliefern.

Syntax:

<a href="${eCMS-LINK-URL:__Seiten-Label__}$">Mein Link</a>

Beispiel:

<a href="${eCMS-LINK-URL:ecs_home}$">Link zur Startseite des Shop-Frontends</a>

Links auf redaktionelle Artikel

Die Formate eCMS-CONTENT-LINK / eCMS-CONTENT-LINK-URL liefern einen Link oder eine URL auf eine hinterlegte Templateseite eines redaktionellen Artikels von einem bestimmten Inhaltstypen.

${eCMS-CONTENT-LINK}$

Syntax:

${eCMS-CONTENT-LINK:__Label-des-Artikels__(contenttype=__Label-des-Inhaltstypes__|name=Mein Link)}$

Beispiel:

 
	${eCMS-CONTENT-LINK:agb(contenttype=static_content|name=Unsere AGBs)}$
 
	<!-- der Parameter "name" kann auch weggelassen werden, dann wird der Titel des Artikels als Linktext zurückgeliefert -->
	${eCMS-CONTENT-LINK:agb(contenttype=static_content)}$

${eCMS--CONTENT-LINK-URL}$

Das Format gibt es auch als URL liefernde Variante - eCMS-CONTENT-LINK-URL.

Syntax:

<a href="${eCMS-CONTENT-LINK-URL:__Label-des-Artikels__(contenttype=__Label-des-Inhaltstypes__)}$">Mein Link</a>

Beispiel:

<a href="${eCMS-CONTENT-LINK-URL:agb(contenttype=static_content)}$">Unsere AGBs</a>

Links auf eine Kategorieseite

Die Formate eCMS-CATEGORY-LINK / eCMS-CATEGORY-LINK-URL liefern einen Link auf eine Kategorieseite.

${eCMS-CATEGORY-LINK}$

Syntax:

${eCMS-CATEGORY-LINK:__Kategorie-Code__(name=Mein Link)}$

Beispiel:

 
	${eCMS-CATEGORY-LINK:shop_haengeleuchten(name=Unsere Hängeleuchten)}$
 
	<!-- der Parameter "name" kann auch weggelassen werden, dann wird der Titel der Kategorie als Linktext zurückgeliefert -->
	${eCMS-CATEGORY-LINK:shop_haengeleuchten}$

${eCMS-CATEGORY-LINK-URL}$

Das Format gibt es auch als URL liefernde Variante - eCMS-CATEGORY-LINK-URL.

Syntax:

<a href="${eCMS-CATEGORY-LINK-URL:__Kategorie-Code__}$">Mein Link</a>

Beispiel:

<a href="${eCMS-CATEGORY-LINK-URL:shop_haengeleuchten)}$">Unsere Hängeleuchten</a>

Bild aus Mediabase

Mit dem Format eMB-IMG lassen sich Bilder aus der Mediabase ausgeben.

${eMB-IMG}$

Syntax:

${eMB-IMG:__Mediabase-Label-des-Bildes__(x=__Breite-des-Bildes__|y=__Höhe-des-Bildes__)}$

Beispiele:

 
	<!-- ein Bild mit dem Mediabase-Label "meinbild" wird 200px breit ausgegeben -->
	${eMB-IMG:meinbild(x=200)}$
 
	<!-- ein Bild mit dem Mediabase-Label "meinbild" wird max. 200px breit und max. 100px hoch (dabei wird das Seitenverhältnis beachtet) ausgegeben -->
	${eMB-IMG:meinbild(x=200|y=100)}$

Das Format lässt es auch zu, nur die URL des Bildes zurückzuliefern. Dies geschieht durch den Parameter "url_only=1".

Syntax:

<img src="${eMB-IMG:__Mediabase-Label-des-Bildes__(url_only=1|x=__Breite-des-Bildes__|y=__Höhe-des-Bildes__)}$" />

Beispiele:

 
	<!-- ein Bild mit dem Mediabase-Label "meinbild" wird 200px breit ausgegeben -->
	<img src="${eMB-IMG:meinbild(x=200|url_only=1)}$" />
 
	<!-- ein Bild mit dem Mediabase-Label "meinbild" wird max. 200px breit und max. 100px hoch (dabei wird das Seitenverhältnis beachtet) ausgegeben -->
	<img src="${eMB-IMG:meinbild(x=200|y=100|url_only=1)}$" />

Downloadlink einer Datei

Mit dem Format eMB-DOWNLOAD-URL können Mediabase-Inhalte zum Download verlinkt werden.

${eMB-DOWNLOAD-URL}$

Syntax:

${eMB-DOWNLOAD-URL:__Mediabase-Label-der-Download-Datei__}$

Beispiele:

 
	<!-- ein Bild mit dem Mediabase-Label "meinbild" zum Download verlinkt -->
	<a href="${eMB-DOWNLOAD-URL:meinbild}$">Mein Bild downloaden</a>
 
	<!-- ein PDF mit dem Mediabase-Label "meindokument" zum Download verlinkt -->
	<a href="${eMB-DOWNLOAD-URL:meindokument}$">Dokumentation (PDF)</a>

Video ausgeben

Mit dem Format eCMS-eMB-Video können Sie ein in der Mediabase hinterlegtes Video direkt im Fließtext einbetten. Das Video kann direkt auf Ihrem Server abgelegt sein oder bei einem externen Video-Dienst wie YouTube oder Vimeo gespeichert sein.

${eCMS-eMB-Video}$

Syntax:

${eCMS-eMB-Video:__Label-des-Videos-in-der-Mediabase__}$

Beispiele:

 
	<!-- YouTube-Video einbinden. Das YouTube-Video muss dabei in der Mediabase hinterlegt sein und wird über sein Mediabase-Label integriert. -->
	${eCMS-eMB-Video:mein-erstes-youtube-video}$
 
	<!-- Über das Style-Attribut können Sie, die Masse des Videos anpassen -->
	${eCMS-eMB-Video:mein-erstes-youtube-video(style=width:50%)}$

Textbaustein ausgeben

Mit dem Format eCMS-i18n können Textbausteine ausgegeben werden.

Allgemeine Informationen zu Textbausteinen finden Sie unter Textbausteine.

${eCMS-i18n}$

Syntax:

${eCMS-i18n:__Textbaustein-String__}$

Beispiele:

 
	<!-- einen einfachen Textbaustein ausgeben, welcher mit dem Textbaustein-String "mein_textbaustein" gespeichert wurde. -->
	${eCMS-i18n:mein_textbaustein}$
 
	<!-- wenn Sie innerhalb des Textbaustein-Inhaltes Ersetzungsplatzhalter nutzen, können Sie diese auch über den Elementschreibweise mitgeben. 
	ist der Ersetzungsplatzhalter z.B. "meinplatzhalter" und der Text "Mein Text" soll bei der Ausgabe des Textbausteins für den Ersetzungsplatzhalter eingefügt werden -->
	${eCMS-i18n:mein_textbaustein(meinplatzhalter=Mein Text)}$
 
	<!-- dies geht natürlich auch mit mehreren Ersetzungsplatzhaltern -->
	${eCMS-i18n:mein_textbaustein(meinplatzhalter1=Mein erster Text|meinplatzhalter2=Mein zweiter Text)}$

Tabs / Akkordeon

Für die Darstellung von Tabs gibt es das Format eCMS-TABSFLEX. Dieses Format hat die Besonderheit, dass es mit Hilfe von CSS auf kleineren Bildschirmgrößen (z.B. bei Smartphones) automatisch zu einem Akkordeon wird.

${eCMS-TABSFLEX}$

Für die korrekte Implementierung mehrerer Tabs muss das Format eCMS-TABSFLEX mehrmals mit unterschiedlichen Parameter eingebunden werden. Es gibt dabei öffnende und schließende Einbindungen.

Syntax:

Folgender Syntax würde zwei Tabs erzeugen. Der Parameter title gibt den Text aus der im Tabreiter selbst angezeigt werden soll. Wenn der Parameter title_i18n verwendet wird, kann auch ein Textbaustein-String angegeben werden, so dass eine Übersetzung des Tabreiters gewährleistet werden kann. Der darzustellende Text innerhalb des Tabs sollte HTML sein.

 
	${eCMS-Tabsflex:start}$
	${eCMS-Tabsflex:item-start(title=__Titel-des-ersten-Tabs__)}$
	<div>Den Inhaltstext des ersten Tabs hier einfügen.</div>
	${eCMS-Tabsflex:item-end}$
	${eCMS-Tabsflex:item-start(title_i18n=__Textbaustein-String-für-Titel-des-zweiten-Tabs__)}$
	<div>Der Inhaltstext des zweitens Tabs hier einfügen.</div>
	${eCMS-Tabsflex:item-end}$
	${eCMS-Tabsflex:end}$

Beispiel:

Es sollen zwei Tabs dargestellt werden. Der erste Tab bekommt den statischen Titel "AGB". Der anzuzeigende Text ist ein AGB-Text. Der zweite Tab soll seinen Titel aus dem Textbaustein mit dem String impressum ziehen. Dort ist für die Sprache Deutsch Impressum und für die Sprache Englisch Imprint hinterlegt. Der Text innerhalb des Tabs solls statisch ein Impressum ausgegeben.

 
	${eCMS-Tabsflex:start}$
	${eCMS-Tabsflex:item-start(title=AGB)}$
	<div>
	  <h2>§1 Gegenstand dieser Allgemeinen Geschäftsbedingungen</h2>
	  <p>Gegendstand dieser AGB im folgenden ...</p>
	  <h2>§2 Präambel</h2>
	  <p>...</p>
	</div>
	${eCMS-Tabsflex:item-end}$
	${eCMS-Tabsflex:item-start(title_i18n=impressum)}$
	<div>
	Max Mustermann GmbH
	Musterstraße 10
	99999 Musterhausen
 
	Geschäftsführer: Max Mustermann
	</div>
	${eCMS-Tabsflex:item-end}$
	${eCMS-Tabsflex:end}$

Vordefenierte Formate eines Inhaltstypes ausgegeben

Wenn Sie in der Konfiguration eines Inhaltstypes ein spezielles Include-Format angegeben haben, kann dieses mit der Elementschreibweise des Formate eCMS-CONTENT-INCLUDE eingebunden werden.

Mehr zur Inhaltstypen und ihrer Konfigurationen erfahren Sie unter Inhalts-Typ.

${eCMS-CONTENT-INCLUDE}$

Syntax:

${eCMS-CONTENT-INCLUDE:__Label-des-Artikels__(contenttype=__Label-des-Inhaltstypes__)}$

Beispiele:

In einem Inhaltstyp "News" mit dem Label "news" wurde ein Include-Format "meine_news" definiert, welches zuvor als meine_news.class.php angelegt wurde. Das Format erzeugt beispielsweise eine Kurzansicht eines übergebenen Newsartikel. Zum Beispiel wurde der Newsartikel "Meine Beispielnews" mit dem Artikellabel "meine_beispielnews" angelegt. Mit der Elementschreibweise kann dieser Artikel mit dem hinterlegten Format an beliebiger Stelle ausgegeben werden.

 
	<!-- dieser Aufruf gibt das im Inhaltstyp "news" definierte Format aus. -->
	${eCMS-CONTENT-INCLUDE:meine_beispielnews(contenttype=news)}$
 
	<!-- Es kann auch ein abweichendes Format angegeben werden -->
	${eCMS-CONTENT-INCLUDE:meine_beispielnews(contenttype=news|format=mein_anderes_newsformat)}$