Text mit Grafik oder Bild in Wordpress kombinieren

Text mit Grafik oder Bild in WordPress kombinieren

Für jeden Webmaster oder Blogger stellt sich die Frage, wie er denn effektiv Text und Grafik in WordPress kombinieren bzw. Text und Bild in WordPress oder einen anderen CMS oder einer sonstigen Webseite zusammen verwenden will. Die Zeiten als man hierzu noch Tabellen verwandte, sollte eigentlich längst vorbeit sein. Text und Grafik sollten codearm in WordPress kombiniert, Text und Bild sondern in regulären und gut nachvollziehbaren XHTML codiert sein. Dabei sollte ein Minimum an Code und eine geschickte Festlegung im CSS die Aufgabe erledigen und Text und Bild zu einem guten Zusammenspiel bringen. Text und Grafik sind dann gut zusammengestellt, wenn alle typischen Fälle abgedeckt sind.

Meiner Erfahrung nach gibt es nur folgende Fälle:

Kleine Grafiken oder Bilder liegen im fortlaufenden Text.
Eine große Grafik oder ein großes Bild steht als eigener Absatz zwischen anderen Absätzen aus Text.
Eine mittlere Grafik steht links und rechts „floatet“ der Text aus einem oder mehreren Absätzen. Irgendwann kommt dann ein Absatz, der nicht mehr floaten soll.
Eine mittlere Grafik steht rechts und links „floatet“ der Text aus einem oder mehreren Absätzen. Irgendwann kommt dann ein Absatz, der nicht mehr floaten soll.
Eine große Grafik oder ein großes Bild steht mit einer kurzen Bildbeschreibung als eigener Absatz zwischen anderen Absätzen aus Text.
Eine mittlere Grafik steht mit einer kurzen Bildbeschreibung links und rechts „floatet“ der Text aus einem oder mehreren Absätzen. Irgendwann kommt dann ein Absatz, der nicht mehr floaten soll.
Eine mittlere Grafik mit einer kurzen Bildbeschreibung steht rechts und links „floatet“ der Text aus einem oder mehreren Absätzen. Irgendwann kommt dann ein Absatz, der nicht mehr floaten soll.

Die letzten beiden Fälle sind die harten Nüsse, an denen ich lange geknackt habe. Es soll insbesondere gesichert sein, dass die Bildbeschreibung unabhängig von der Länge des floateten Textes niemals von der Grafik wegrückt, auch wenn der User die Schrift im Browser stark vergrößert oder verkleinert.

Im folgenden zeige ich die Lösung für das HTML-Register des WordPress-Editors auf. In einen späteren Beitrag werde ich dann zeigen wie man den grafischen TinyMCE-Editor zum gleichen Verhalten bringen kann.

1. Zwei Bilder im Text ohne Absätze:

Sehr kleine Bilder kann man im Text einfach positionieren. Man schreibt den Text und fügt das Bild ohne jede Zeilenschaltung in den Text ein. Ihr Titel Sehr kleine Bilder kann man im Text einfach positionieren. Man schreibt den Text und fügt das Bild ohne jede Zeilenschaltung in den Text ein.Hier läuft der Text weiter nachdem keine Absatzmarke gesetzt wurde.
Im Code-Editor sieht das ganze so aus:

text... 
<img src="adresse" alt="alt-text" /> 
oder ... <img title="Fähnchentext" src="adresse" alt="alt-text" /> 
weiter
im Text

2. Bild als Absatz: der Witz ist die Zeilenschaltung/Absatzmarke vor und nach dem Bild

Große Bilder um die 600 Pixel-Breite machen nur Sinn, wenn sie als eigner Absatz eingebaut werden. Dazu einfach jeweils vor und hinter der Bildeinfügung einen Absatz mit oder ohne Leerzeile erzeugen. Wichtig ist die Absatzschaltung, die Leerzeile ist optional.
Ihr Titel
Nach einer Absatzschaltung hinter der Bildeinfügung geht es hier mit dem Text weiter. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Quelltext:

Leerzeile ist optional. ABSATZSCHALTUNG
<img src="adresse " alt="text" />
ABSATZSCHALTUNG
Nach einer Absatzschaltung weiter im Text

3. Bild links und Text fließt rechts

Mittelgroße Bilder um 200 bis 400 Pixel Breite kann man links setzen und den Text rechts fließen lassen.
Hierzu wird eine Klasse in CSS definiert, die Bild und Text entsprechend positioniert.

.bild-links
{
float:left;
text-align:left;
margin:0 10px 10px 0;
}

Dieser Text ist noch Text, der vor dem Bild steht und der noch nicht fließt. Jetzt kommt das Absatzende des Absatzes der noch nicht fließt.

Nach der Bildeinbettung steht Leerzeile und hier geht’s weiter mit einen Absatz der fließt. Die Bildeinbettung erfolgt mit Bezug auf eine Klasse die das Bild nach links setzt. Damit der nun folgende Text nicht mehr fließt kommt im Anschluss ein Absatz mit Klassenbezug zum Clearen.

Nach einer Absatzschaltung sollte dieser Absatz, der eine Formatierung als Klasse hat, die das Fließen aufhebt, nicht mehr fließen.

.clearen {
clear:both;
}

Hier können weitere Texte stehen, die natürlich auch nicht fließen.

4. Bild rechts und Text fließt links

Mittelgroße Bilder um 200 bis 400 Pixel Breite kann man rechts setzen und den Text links fließen lassen.
Hierzu wird eine Klasse in CSS definiert, die Bild und Text entsprechend positioniert.

.bild-rechts
{
float:right;
text-align:right;
margin:0 0 20px 0;
}

Dieser Text ist noch Text, der vor dem Bild steht und der noch nicht fließt. Jetzt kommt das Absatzende des Absatzes der noch nicht fließt.

Nach der Bildeinbettung kommt nach Absatzschaltung eine neue Zeile und hier geht’s weiter mit einen Absatz der fließt. Die Bildeinbettung erfolgt mit Bezug auf eine Klasse die das Bild nach links setzt. Damit der nun folgende Text nicht mehr fließt kommt im Anschluss ein Absatz mit Klassenbezug zum Clearen.

Nach einer Absatzschaltung sollte dieser Absatz, der eine Formatierung als Klasse hat, die das Fließen aufhebt, nicht mehr fließen.

Hier können weitere Texte stehen, die auch nicht fließen. Hier kann beliebiger Text stehen, der auch nicht fließt.

Text vor dem Bild ABSATZSCHALTUNG
<div class="bild-links"><img src="Bildadresse" alt="igendwas" /></div>
<pre lang="php">ABSATZSCHALTUNG
Text der fließt

Text fließt nicht mehr

5. Bild mit Legende

Um ein Bild fest und dauerhaft mit einer Bildbeschreibung zusammenzuführen, kann man für den Text das Tag span mit einer Klasse verwenden, die den Text in einen Block zwingt. Hier geht das so:
Definition der Klasse in CSS

span.legende {
display: block;
font-size: 1.2em;
color: rgb(0,0,255);
line-height: 1.2em;
}

Farbe für die Legende ist hier Blau.
Ihr Titel
Dies ist ein Photo von Rainer Meyer.
Hier geht’s nach Zeilenschaltung mit dem Text weiter.

Letzte Zeile des Absatzes vor dem Bild mit Legende.

<div class="bild-links"><img src="adresse" alt="irgendwas" />
<span class="legende">Dies ist ein Photo von Rainer Meyer.</span></div>
<pre lang="php">Hier weiter hinter Bild und Legende

6. Bild links mit Legende und fließenden Text rechts

Um das Bild und die Legende nach links zu setzen und anschließenden Text rechts fließen zu lassen, wird zusätzlich zum letzten Vorgehen Bild und Legende noch in eine Block-div eingebettet, dieser div-Block wird mittels Klasse nach links gesetzt. Letzte Zeile des Absatzes vor dem Bild mit Legende.

Dies ist ein Photo von Rainer Meyer.

Erste Zeile des dem Bild mit Legende folgenden Absatzes. Hier fließt der Text noch, und fließt und fließt… Letzte Zeile des fließenden Absatzes.

Nun kommt ein Absatz, der nicht mehr fließt, er muss mit Klasse definiert werden, die cleart.

Hier steht jetzt beliebig viel weiterer Text.

Letzte Zeile des Absatzes vor dem Bild mit Legende.
<div class="bild-rechts"><img src="..." alt="Ihr Titel" />
<span class="legende">Dies ist ein Photo von Rainer Meyer.</span></div>
Hier fließt der Text noch.... Letzte Zeile des fließenden Absatzes.
Text fließt nicht mehr

7. Bild rechts mit Legende und fließenden Text links

Letzte Zeile des Absatzes vor dem Bild mit Legende.
<div class="bild-rechts"><img src="https://train-und-coach.de/wp-content/uploads/400-150.jpg" alt="Ihr Titel" />
<span class="legende">Dies ist ein Photo von Rainer Meyer.</span></div>

Erste Zeile des dem Bild mit Legende folgenden Absatzes. Hier fließt der Text noch, und fließt und fließt… Dieser Absatz kann natürlich so lange werden, dass das Fließen aufhört und der Text unter das Bild mit Legende rutscht. Aber der fließende Text sollte nicht nur unter das Bild rutschen. Denn Bild und Legende sollen nicht getrennt werden. Letzte Zeile des fließenden Absatzes.

Nun kommt ein Absatz, der nicht mehr fließt, er muss mit Klasse definiert werden, die cleart.

Hier steht jetzt beliebig viel weiterer Text.

Dass die Legende nie vom Bild getrennt wird, können Sie daran erkennen, wenn sie mit STRG + oder – den Text im Browser vergrößern oder verkleinern.

Leider zeigt der grafische Modus von WordPress, das Fließen und die enge Verbindung zwischen Bild und Legende nicht richtig an. Man kann aber die drei CSS-Klassen, die hier zitiert sind in die Datei wordpress.css im Verzeichnis wp-includes/js/tinymce einbauen, um auch im grafischen Editor, das Fiießen zu sehen.

Aber es gibt aber noch eine bessere Lösung.

IT-Training Rainer Meyer