Eines der wichtigsten Kapitel in unseren WordPress-Workshops nimmt das Thema Einfügen, Ausrichten und Positionieren von Bildern ein. Die Bild- und Text-Ausrichtung ist nicht selten ein Grund für Frustrationen für Website-Betreiber, denn das Vermengen von Text und Bildern ist in HTML nicht ganz so einfach wie in Microsoft Word.
Worum gehts es?
Lesen Sie hier ein paar Tipps, wie Sie die Ausrichtung der in WordPress eingefügten Bilder finetunen können.
Bilder einfügen und ausrichten
Wie man Bilder in WordPress über den Editor einfügt und im Textverlauf ausrichtet, haben wir ausführlich in unserem WordPress Handbuch beschrieben.
In dem Handbuch erfahren Sie, dass man Bilder nicht nur für sich alleinstehend in einen eigenen Absatz einfügen muss, sondern die Bilder auch links- oder rechtsbündig in den Text einfließen lassen kann.
In Kurzform sieht der HTML-Code, der dem Bild die jeweilige Ausrichtung gibt wie folgt aus: <img class=”alignleft” src=”Bildadresse” /> für links- oder rechts ausgerichtet: <img class=”alignright” src=”Bildadresse” />
Abstand zwischen Bild und Text kontrollieren
Nun kann es sein, dass einem die vom Layout vorgegebenen Textabstände neben oder unter dem Bild nicht gefallen. Was nun? Nun muss man etwas Hand an den HTML-Code legen. Verwenden Sie sonst immer den Visuell-Editor, um die Texte Ihrer Website zu verfassen, dann ist es jetzt an der Zeit, Neuland zu betreten: Klicken Sie rechts über dem Editor-Feld auf den HTML-Reiter.
Sie sehen jetzt den HTML-Code Ihres Artikel. Der gesamte HTML-Code für das oben eingefügte Bild sieht zum Beispiel so aus:
<img src="https://elbnetz.com/wp-content/uploads/2012/09/Bilder-in-WordPress-einfügen.jpg" alt="Bilder in WordPress einfügen" title="Bilder in WordPress einfügen" width="375" height="249" />
Abstand zum Text vergrößern
Möchten Sie beispielsweise den Abstand zwischen Bild und Text rechts und unten vergrößern, dann fügen Sie den in rot gekennzeichneten „Style-Tag“ dem HTML-Code des Bildes hinzu:
<img class=”alignleft” src=”Bildadresse” style=“margin-right: 40px; margin-bottom: 40px;“/>
Fällt Ihnen der breitere Abstand zwischen Bild und Text auf? Wir haben auch einen extra großen Abstand gewählt :-). Sorry, aber hier muss noch etwas Text hin, damit Sie den Abstand nach unten sehen…)
Abstand zum Text verkleinern
Es kann auch Situationen geben, in denen man den Abstand verkleinern möchte. In diesem Fall setzt man einfach ein Minuszeichen vor den passen Style-Code:
<img class=”alignleft” src=”Bildadresse” style=“margin-bottom: -5px;“/>
Das was hier ziemlich unpassend aussieht, kann bei einigen Webdesigns (WordPress Themes) durchaus nötig sein. Speziell, wenn der Abstand zum Text unter dem Bild zu groß ausgefallen ist. Das ist zum Beispiel beim Standard-Theme Twentyeleven der Fall.
Einen neuen Absatz unter einem ausgerichteten Bild beginnen
Normalerweise wird der Text neben dem Bild solange weitergeführt, bis der Platz aufgebraucht ist. Also auch
Eine Überschrift,
oder ein neuer Absatz sind neben dem Bild ausgerichtet. Das stört nicht selten. Hier ist ein neuer Absatz, von dem ich möchte, dass er nachdem Bild startet. Wie Sie sehen, funktioniert das nicht automatisch. Ich konnte in einer Reihe von Zeilenumbrüche setzen <br/>, aber die genaue Zahl hängt von der Breite der Anzeige ab und kann gerade bei Betrachtung auf dem iPad oder iPhone zu unschönen Lücken führen.
Man könnte auch eine HTML-Tabelle verwenden, aber dadurch entstehen neue Probleme und außerdem ist das auch zu viel des Guten. Hier ist eine elegantere Lösung: Wickeln Sie den neuen Absatz einfach in den folgenden Code ein: <div style=“clear:both;“> … </div>, zum Beispiel:
Hier ist der Text neben dem Bild.
UPDATE: Bitte kopieren Sie nicht einfach den Code, denn die Anführungszeichen werden eventuell falsch im HTML übernommen. Diese müssen unbedingt ersetzt werden, damit der Code funktioniert.
Haben Sie noch Tricks zu diesem Thema?
Titelfoto: ‚wordjam #2 [read and create]‘ von Paul G gefunden auf Flickr.com unter CC-Lizenz.