Bilder können neben der normalen Darstellung auch verschiedene weitere Zusatzklassen verwenden,

um sie eben entsprechend darzustellen.

Und wie das funktioniert, sehen Sie in diesem Video, bzw. wie man Bildklassen eigentlich

hinzufügt.

In einem ersten Schritt brauchen Sie eine Inhaltsseite, auf der Sie Ihr Bild einfügen.

Das heißt, ich werde jetzt hier über Dateien hinzufügen, ein Bild auswählen, das ich verwende

und in die Seite einfügen.

Das Bild hat bei mir eine vollständige Größe und keine Ausrichtung und ein Link zur Mediendatei.

Also erstmal alles ganz normal, wie man das ebenso macht beim Bild einbinden.

Nachdem ich das aktualisiere und mir meine Inhaltsseite anschaue, sehe ich, dass das

Bild erstmal ganz normal aussieht.

Jetzt hätte ich aber gerne, dass das Bild vielleicht rund ist statt eckig.

Wie mache ich das?

Es gibt hier zwei Herangehensweisen.

Ich zeige jetzt erst einmal die Herangehensweise im Textmodus, bevor ich dann die zweite Herangehensweise

zeige.

Im Textmodus sieht man den HTML-Code.

Das heißt, Sie können hier über den Reiter Visuell Text auf Text wechseln.

Im Anschluss müssen Sie jetzt einfach der Anweisung folgen, die auf der Anleitung steht.

Zum Beispiel steht hier, hierzu wird dem ImageTag die Klasse Circle zugewiesen.

Wie machen Sie das?

Sie schauen hier einfach, wo fängt der ImageTag an und dann sehen Sie hier Image und hier

ist die schließende Klammer.

Das heißt, das ist alles das Bild und hier wird jetzt irgendwo ein Klassenattribut schon

sitzen, das heißt, man sieht das hier schon, das wird getrennt durch ein Leerzeichen und

dann sieht man hier ClassAlignNone und so weiter.

Und um jetzt Ihre Klasse hinzuzufügen, müssen Sie einfach nur das Wort Circle hier mit reinschreiben.

Und nachdem Sie das aktualisieren, dann sehen Sie schon, dass das Bild jetzt eben nicht

mehr eckig ist, sondern rund.

Das ist also die Möglichkeit über den Textmodus.

Neben diesem Vorgehen kann man aber auch anders vorgehen und zwar kann ich über Visuell auf

das Bild klicken, ist natürlich etwas groß, weil es die vollständige Größe hat und kann

hier auf den Stiftklicken bearbeiten.

Im Anschluss kann ich hier über diesen kleinen Reiter erweiterte Optionen auch einfach nachschauen

und kann im Anschluss hier unter Bild, CSS-Klasse einfach die gewünschte Bildklasse hinzufügen.

Manchmal steht übrigens auch in der Angabe, dass man das Ganze nicht dem Bild, also dem

ImageTag, zufügt, sondern der Beschreibung, also dann eben hier CSS-Klasse des Links.

Wenn ich das eben aktualisiere, dann erhalte ich das gleiche Ergebnis.

Auch hier wird dann nach dem Aktualisieren ein rundes Bild dargestellt.

Ich hoffe, ich konnte Ihnen ein wenig zeigen, wie man die Bildklasse hinzufügt und wie

immer, wenn Sie Fragen haben oder Ideen für unsere Anleitungen, dann schreiben Sie uns

eine Mail an webmaster.fau.de.