Zusätzliche Shortcodes

Letzte Änderung: 14. Dezember, 2016

Shortcode-Syntax

Es gibt spezielle Webinhalte, die nicht mit einfachem Markdown dargestellt werden können. Dies sind Inhalte wie Videos und spezielle Elemente aus Bootstrap. Damit solche Elemente auch verwendet werden können, haben wir für die Erweiterung "OXID Markdown" ein Shortcode-System integriert.

Shortcodes sind von geschweiften Klammern umgeben und beinhalten das Tag mit den entsprechenden Attributen:

{tag attribut1="wert1" ... attributN="wertN"}
Falls der Shortcode Inhalt benötigt ist die Syntax wie folgt:
{tag attribut1="wert1" ... attributN="wertN"} HTML-Inhalt {/tag}
Wichtig! Um Markdown innerhalb der Shortcodes verwenden zu können, müssen Sie Markdown Extra aktivieren!

VIMEO

Mit dem VIMEO-Shortcode können Sie schnell und unkompliziert VIMEO-Videos in Ihre Texte integrieren.

{vimeo video="VIMEO-Code" ratio="4by3|16by9" fullscreen="true|false" autoplay="true|false" loop="true|false" color="HTML-Farbwert"}

video (Pflichtfeld!): Hie geben Sie nur den VIMEO-Code an. Nicht die komplette VIMEO-URL!
ratio: Ermöglicht die beiden Video-Formate 4:3 oder 19:9
fullscreen: Zeigt das Symbol für die Fullscreen-Ansicht
autoplay: Das Video wird sofort automatisch abgespielt
loop: Das Video wird immer automatisch wiederholt
color: Farbwert für die VIMEO GUI

Beispiel:

{vimeo video="183466558"}
HTML-Quelltext: 

<div class="embed-responsive embed-responsive-16by9 vimeo-wrapper" markdown="1">
	<iframe 
		class="vimeo-iframe" 
		src="//player.vimeo.com/video/183466558?autoplay=0"> 
	</iframe>
</div>
HTML-Ausgabe:

YOUTUBE

Mit dem YOUTUBE-Shortcode können Sie schnell und unkompliziert YOUTUBE-Videos in Ihre Texte integrieren.

{vimeo video="YOUTUBE-Code" ratio="4by3|16by9" fullscreen="true|false" autoplay="true|false"}

video (Pflichtfeld!): Hie geben Sie nur den YOUTUBE-Code an. Nicht die komplette YOUTUBE-URL!
ratio: Ermöglicht die beiden Video-Formate 4:3 oder 19:9
fullscreen: Zeigt das Symbol für die Fullscreen-Ansicht
autoplay: Das Video wird sofort automatisch abgespielt

Beispiel:

{youtube video="jqIwdVwwKqQ"}
HTML-Quelltext: 

<div class="embed-responsive embed-responsive-16by9 youtoube-wrapper">
	<iframe 
		class="youtoube-iframe" 
		src="https://www.youtube.com/embed/jqIwdVwwKqQ?rel=0?autoplay=0"> 
	</iframe>
</div>
HTML-Ausgabe:

Font Aewsome

Mit dem Flow-Template von OXID haben Sie auch Zugriff auf die Icons von Font Awesome. Damit Sie die Icons ohne HTML-Kenntnisse in Ihre Texte integrieren können, haben wir auch dafür einen Shortcode erstellt.

{icon name="Icon-Name"}

name (Pflichtfeld!): Hier geben Sie nur die Bezeichnung des Icons an. Zum Beispiel shower
Eine Übersicht und Icon-Suche finden Sie unter http://fontawesome.io/icons/

Bootstrap

Bootstrap beinhaltet einige schöne Auszeichnungselemente mit denen Sie Ihren Texten einen besseren "Look" verpassen können. Einige davon habe wir für Sie als Shortcode umgesetzt.

Label

Mit dem Label-Element lassen sich Texte besonders auszeichnen bzw. hervorheben.

{icon class="Label-Klassenbezeichnung"} Text, HTML oder Markdown {/icon}

class (Pflichtfeld!): Eine der folgenden Klassenbezeichnungen.

default Default Label
primary Primary Label
success Success Label
info Info Label
warning Warning Label
danger Danger Label


Button

Auch für Bootstrap-Buttons haben wir einen Shortcode erstellt.

{button class="Button-Klassenbezeichnung"} Text, HTML oder Markdown {/button}

class (Pflichtfeld!): Eine der folgenden Klassenbezeichnungen.

default
primary
success
info
warning
danger
link


Alert

Mit Bootstrap-Alerts können Sie sehr einfach tolle Infoboxen erstellen.

{alert class="Alert-Klassenbezeichnung"} Text, HTML oder Markdown {/alert}

class (Pflichtfeld!): Eine der folgenden Klassenbezeichnungen.

success
Success! Indicates a successful or positive action.
info
Info! Indicates a neutral informative change or action.
warning
Warning! Indicates a warning that might need attention.
danger
Danger! Indicates a dangerous or potentially negative action.

Sie können Shortcodes auch verschachtelt anwenden. In diesem folgenden Beispiel um zusätzlich noch ein Icon anzuzeigen:
{alert class="warnig"} {icon name="key"} Bitte verwenden Sie ein **sicheres Passwort!** {/alert}
HTML-Quelltext: 

<div class="alert-outer">
	<div class="alert alert-warning">
		<p>
			<i class="fa fa-key"> </i> Bitte verwenden Sie ein <strong>sicheres Passwort!</strong> 
		</p>
	</div>
</div>
HTML-Output:

Bitte verwenden Sie ein sicheres Passwort!

Eigene Shortcodes

Weitere Information finden Sie unter Anpassungen.