WBCE und Bilder

Der Umgang mit Bildern im Editor ist nach wie vor nicht zufriedenstellend - leider. Mögliche Lösungen würden mehr Zusammenspiel von Modulen und Templates erfordern, wofür es aber noch keine politische Mehrheit gibt.

In neueren Versionen des CKEditors können (wieder) Bilder hochgeladen werden, sie werden dabei aber nicht verkleinert und es ist auch schwierig, die Bilder nachträglich zu stauchen. Das liegt im wesentlichen daran, dass zum Stauchen bisher feste Pixel-Maße verwendet wurden, was sich bei responsiven Templates (und das sind mittlerweile praktisch alle!) sehr negativ auswirkt.

Eigene Bild-Classes

In den meisten neueren Templates gibt es vordefinierte Classes für Bilder:

pic2left, pic2right, pic3left, pic3right, pic4left, pic4right sowie picfull.

Also 1/2 breit, 1/3 breit usw, jeweils left / right. Die gewünschte Class gib einfach unter Stylesheet-Klasse („Formatvorlagenklassen“) bei den Bild-Eigenschaften an.

Der Vorteil dieser Lösung ist, dass auch das Verhalten auf Smartphones festgelegt ist: Auf einem Handy ist ein pic2left nicht die Hälfte breit, sondern die ganze Breite, ein pic4left nicht ein Viertel, sondern die Hälfte. Dieses Verhalten kann auch beliebig angepasst werden.

Ein weiterer Vorteil ist, dass gleichartige Bilder nicht wie die Zähne meiner Großmutter herumstehen, sondern ordentlich unter- und nebeneinander.

Falls diese Klassen in deinem Template nicht vorhanden sind, kannst du sie einfach aus der editor.css der Templates Hortal oder Vertal herauskopieren.

Manuelle Prozentangaben

Natürlich kannst du unter Breite auch manuell Prozentangaben machen, das Feld Höhe lasse aber leer, sonst ist das Bild verzerrt.

Der Nachteil dieser Methode ist aber, dass damit noch nicht der Abstand zum Text geklärt ist, und schon gar nicht das Verhalten am Handy.

Probleme mit CSS-Classes

Manchmal sind im Template weitere Classes definiert, die diese obigen wieder aushebeln, ein Klassiker ist etwas wie:
#content img {max-width:100%;}

Da die Anweisung genauer ist (und noch dazu mit #) gilt sie höher als die Anweisung in der editor css. Lösung: bei pic2left usw ein ! important anfügen oder eben #content img {max-width:100%;} entfernen - was aber dazu führen kann, dass plötzlich Bilder riesengroß sind. Die 2. Möglichkeit ist sauberer, weil ! important gerne mal Folgeprobleme verursacht und daher stets nur eine Notlösung ist. 

Zurück