Beitrag mit Bildern im Fließtext ausrichten

Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in einem Beitrag Bilder im Fließtext ausrichtet! Ich zeige euch hier zunächst die unbearbeitete Darstellung eines Beitrags ohne Bilder im Firefox und hier im Safari! Hierzu gilt es als erstes zu sagen, dass bei dieser Vorgehensweise 100%ig valider Code entsteht und alle bekannten Browser bei der Darstellung jeweils das exakt gleiche Abbild liefern.
Zunächst wählt ihr im Joomla-Backend den gewünschten Beitrag aus, setzt den Cursor an die gewünschte Einfügeposition und klickt auf den Button „Bild" unterhalb des Beitragstextes! Es öffnet sich die Medien-Bibliothek. Für alle, die noch nicht wissen wie Sie Ihre Bilder in die Medien-Bibliothek importieren können habe ich ein weiteres Tutorial erstellt: https://www.youtube.com/watch?v=xWCsWXKzpRs - Hier wählt ihr euer Bild aus und klickt anschließend auf „Einfügen"! Anschließend speichert ihr den Beitrag mittels „Speichern" ab!
Hier seht Ihr zunächst die Umsetzung im Firefox und hier im Safari. Die Darstellung selbst ist jedoch gelinde ausgedrückt „unschön"!

Jetzt wählt ihr im Joomla-Backend das Bild aus und klickt auf den Button „Bild einfügen/verändern"! Hier wählt ihr den Reiter „Aussehen" aus. Unter „Ausrichtung" dürfte euch in 99% aller Fälle lediglich „Links" oder „Rechts" interessieren. Hier wählt ihr „Links" aus und beobachtet dabei die Zeile „Format"! Hier wird der CSS-Befehl „float: left;" eingefügt. Für alle Personen, denen CSS völlig fremd ist: Dieser Befehl sagt aus, dass unser Bild „links platziert und vom Text sowie von weiteren Elementen (beispielsweise andere Bilder, Symbole, Videos usw.) umflossen wird"! Wir werden hier später zwar noch etwas in CSS einsteigen, jedoch ist dies für die Umsetzung in diesem Tutorial nur für feine Details notwendig.

Beim Klick auf „Aktualisieren" erscheint eine Fehlermeldung! Diese sagt aus, dass wir eine Bild-Beschreibung (Alt-Tag) eingeben sollen, um behinderten Menschen oder speziellen Endgeräten ohne Bild-Darstellung eine „alternative" Erklärung zu dem Bild liefern können. Diese gebt Ihr unter dem Reiter „Allgemein" bei „Beschreibung" ein.

Wie Ihr seht hat sich die Darstellung bereits enorm verbessert. Was allerdings nach wie vor sehr stört ist die Tatsache, dass unser Text press am Bild anliegt.
Jetzt wählt ihr im Joomla-Backend erneut das Bild aus, klickt wieder auf den Button „Bild einfügen/verändern" und wählt hier wieder den Reiter „Aussehen" aus. Dort gebt ihr nun testweise 15 bei „Vertikaler Abstand" und 10 bei „Horizontaler Abstand" ein. Die Maßeinheit dieser Werte ist übrigens Pixel, also keine Millimeter, Zentimeter, em oder ähnliches! Die CSS-Profis unter euch erkennen hier direkt wieder die Veränderung in der Zeile „Format"! Hier wird jetzt „margin: 15px 10px;" ergänzt. Für alle Nicht-CSS-Profis erklärt sich hier dieser Befehl selbst: Der erste Wert steht für den vertikalen und der zweite Wert für den horizontalen Abstand zwischen Bild und Text! Wir werden später diesen Befehl noch etwas „erweitern"!
So sieht das Ganze schon deutlich besser aus. Um euch das Umfliesen noch etwas näher zu bringen füge ich jetzt noch ein weiteres und kleineres Bild ein.
Zunächst habe ich hier die selben Einstellungen vorgenommen wie bei meinem Passbild.
Wir sollten den Abstand jetzt etwas verkleinern, da natürlich bei einem kleineren Bild ein großer Abstand oft unpassend ist! Ihr könnt übrigens das ausgewählte Bild inklusive aller bereits getätigten Einstellungen einfach mit der Maus neu platzieren! Ein Klick auf „Entfernen" löscht das Bild mitsamt allen Einstellungen! Mit STRG+Z können alle Aktionen rückgängig gemacht werden!
Wie Ihr seht bleiben alle Einstellungen erhalten.
Da hier ein responsives Design eingesetzt wurde, gibt es jetzt natürlich verschiedene Darstellungsmöglichkeiten.

Schreibe einen Kommentar