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.