Bilder ausrichten und formatieren
Der Editor TinyMCE bietet verschiedene Gruppen von CSS-Klassen zur Formatierung für bestimmte Elemente an. So gibt es eine Gruppe "Blockformate" für Blockelemente und eben auch eine Gruppe von CSS-Klassen für Bilder, die "Bildformate".
Zur Verfügung stehen im Stylesheet des Templates definierte CSS-Klassen.
Zu erreichen sind diese Formate über das Dropdown Menü ganz oben im Editor. Die CSS-Klassen für Bilder findet man hier:
Format => Formate => Bildformate
Leider kann man immer nur 1 Aktion ausführen, wenn man also eine CSS-Klasse deaktivieren und dem Element eine andere CSS-Klasse zuordnen will, muss man sich nach dem deaktivieren noch einmal durch die Menüstruktur bemühen.
Die neueren Templates von ge-webdesign.de enthalten folgende Klassen für Bilder:
- img.tplge_border
- img.tplge_left_border
- img.tplge_right_border
- img.tplge_noborder
- img.tplge_left_noborder
- img.tplge_right_noborder
- img.tplge_left
- img.tplge_right
- img.tplge_centered
Diese CSS-Klassen sorgen auch für ein responsibles Verhalten der Bilder, wenn der Bildschirm schmaler wird, z. B. auf Smartphones.
Anwendung
- Fügen Sie das gewünschte Bild in den Inhalt ein. In der Regel tut man das am besten am Anfang eines Absatzes.
- Markieren Sie das Bild mit der Maus und ordnen Sie ihm die gewünschte Klasse wie oben beschrieben zu. Ist dem Bild bereits eine Klasse zugeordnet, so ist diese Klasse im Formate-Menü markiert. Einem Bild können mehrere Klassen zugeordnet werden.
Beispiel
Dem Bild rechts (oder oben, je nach horizontaler Bildschirmauflösung) ist die Klasse
tplge_right_border
zugeordnet.
Man kann also mit dem Formate-Menü des TinyMCE Bilder nicht nur ausrichten, sondern im Rahmen der im Template vorhandenen CSS-Klassen auch formatieren, in diesem Fall mit einem Rahmen versehen.
