In diesem Post beschreibe und dokumentiere ich, wie man in Blogs, in denen die Editor-Einstellung "Zeilenumbrüche per br-Tag" aktiviert ist, Bilder, die keine Bildunterschrift haben, ausschließlich durch Arbeiten im Verfassen-Modus des Blogger-Editors nebeneinander stellen und als Gruppe oder innerhalb einer Zeile ausrichten kann. Das Nebeneinandestellen geht per Nebeneinanderziehen, das alternative Ausrichten einer Gruppe geht danach per Ausrichtungs-Button in der Editor-Kommandozeile und das unterschiedliche Ausrichten von Bildern innerhalb einer Zeile geht per Bild-Menü-Balken.
Man sollte unbedingt mindestens einmal alles lesen. Die folgende Navigation ist nur dazu da, zu Unterpunkten springen zu können, wenn man einzelne Abschnitte erneut lesen will.
- Hochladen
- Nebeneinanderziehen
- Fehleinordnungen und ihre Korrektur
- Vertikalen Abstand anpassen
- Bildergruppe bzw. Bilderzeile anders als mittig ausrichten
Hochladen
Folgend habe ich die Bilder gleichzeitig in das Auswahlfenster hochgeladen und die Reihenfolge im Blog dadurch bestimmt, dass ich sie im Auswahlfenster in der gewünschten Reihenfolge angeklickt habe, bevor ich sie dem Blog hinzugefügt habe. Standardmäßig stellen sich die Bilder dann jeweils einzeln mittig in eine eigene Zeile und haben jeweils einen Zeilenumbruch unter sich.
Wenn man wirklich nur im Verfassen-Modus des Editors arbeiten will, dann ist es wichtig, die Bilder gleich in der richtigen Reihenfolge eingefügt zu haben. Hat das nicht geklappt, dann sollte man alle Bilder löschen, indem man den ganzen Bereich mit den Bildern entfernt. Dazu muss man den Bereich von vor dem ersten Bild bis nach dem letzten Bild markieren und auf Entf drücken. Bloß nicht über das Balken-Menü, das sich über die einzelnen Bilder legt, die Bilder einzeln entfernen; denn dabei bleibt Code im HTML stehen, der später stört.
So sehen die acht hochgeladenen Bilder im Web aus:
So sieht der Code dazu aus:
Wenn man die Bilder nicht gleichzeitig in den Post einfügt, sondern nacheinander, dann steht keine Leerzeile zwischen ihnen, wenn man sie nicht extra nach jedem Bild einfügt. Das ist für das Nebeneinanderziehen jedoch unbedeutend. Beim Ziehen werden automatisch alle Zeilenumbrüche nach unten gedrückt, bei einer Leerzeile zwischen den Bildern halt mehr als ohne.
Nebeneinanderziehen
Nun kann man von oben an ein Bild nach dem anderen rechts neben das vorhergehende Bild ziehen. Man fängt also mit dem zweiten Bild an. Und so geht das: Man klickt auf das zweite Bild, hält den Maus-Button gedrückt und zieht das Bild dann dicht rechts neben
das erste Bild. Das erste Bild rutscht dann etwas nach links und
das zweite Bild ordnet sich rechts daneben ein, wenn man den Maus-Button
loslässt. Dann zieht man genauso das dritte Bild rechts neben das zweite und so weiter.
Wenn es nach rechts hin enger wird, stellen sich die frisch gezogenen Bilder nicht mehr korrekt in die Reihe. Statt mittig, stellen sie sich nach ganz rechts oder der Abstand zum vorigen Bild ist geringer als bei den Bildern davor oder das frisch gezogene Bild hat das vorhergehende Bild nach unten gedrückt. Egal was davon passiert, die Lösung ist immer gleich: Bevor man weiter macht, muss man nun auf das zuletzt gezogene Bild und im Balken, der sich darüber legt auf "Zentriert" klicken. Daraufhin steht alles in korrekter Reihenfolge hintereinander. Am Ende jeder Zeile tritt das Problem auf und ist dann genau so zu lösen.
Im nächsten Punkt gehe ich unter "Fehleinordnungen und ihre Korrektur" noch genauer auf diese zu korrigierenden Fehlstellungen ein.
So sieht das Ergebnis im Web aus, wenn man alles richtig gemacht hat:
So sieht der Code dazu aus:
Fehleinordnungen und ihre Korrektur
Eine klare Grenze beim Nebeneinanderstellen von Bildern ist die Postbreite. Wenn Bilder gemeinsam zu breit sind, um darin nebeneinander Platz zu finden, kann man sie nicht nebeneinander stellen. Dabei ist auch zu bedenken, dass zu der Bildbreite nach links und rechts zusätzlich Abstände bestehen.
Für die Technik des Nebeneinanderziehens von Bildern wiederum ist die Breite des Editors im Verfassen-Modus ausschlaggebend, die ja unabhängig von der Postbreite ist.
Ist zwischen dem vorigen Bild und dem rechten Editor-Rand nicht mehr so viel Platz, dass man beim Nebeneinanderziehen dem Programm zweifelsfrei signalisieren könnte, wohin das Bild soll, nämlich direkt neben das vorige Bild oder an den rechten Rand des Editors, dann wird es vom Programm halt eventuell ganz rechts in die Zeile gestellt. Es gibt drei Varianten, wie sich diese Rechtsausrichtung zeigt.
Bei allen Fehleinordnungsvarianten ist die Lösung die selbe: Bevor man weiter macht, klickt man auf das zuletzt gezogene Bild und dann im Balken, der sich darüber legt, auf "Zentriert". Denn die vorhergehenden Bilder stehen ja gemeinsam zentriert und auch dieses Bild soll sich zentriert hinter den anderen einordnen.
So zeigt sich die Fehleinordnung:
Variante 1
Während sich im folgenden Beispiel Bild 2 noch korrekt direkt neben Bild 1 gestellt hatte, ordnete sich Bild 3 ganz rechts in der Zeile ein. Das ist schon im Editor deutlich erkennbar, wegen des größeren Abstands zum vorhergehenden Bild. Lösung: Klickt man das zuletzt gezogene Bild (hier also Bild 3) auf Zentriert, dann wird die Einordnung korrigiert.
Variante 1 im Verfassen-Modus des Editors:
Variante 1 im HTML-Modus des Editors:
Variante 1 im Web:
Variante 1 nach Korrektur, im Web:
Variante 1 falsch korrigiert
Achtung, nicht den Fehler begehen, auf "Links" statt auf "Zentriert" zu klicken, um die Fehleinordnung zu korrigieren, weil man denkt, dass das Bild doch weiter nach links soll. So funktioniert das nämlich nicht; denn "Links" bedeutet nicht weiter nach links, sondern ganz nach links. Würde man auf "Links" klicken, sähe das deshalb wie folgt aus.
Variante 1 falsch korrigiert im Verfassen-Modus des Editors:
Variante 1 falsch korrigiert im HTML-Modus des Editors:
Variante 1 falsch korrigiert im Web:
Lösung: Das kann man wieder in Ordnung bringen, indem man erneut auf das zuletzt gezogene Bild (hier Bild 3) klickt und dann auf "Zentriert".
Variante 2
Eine zweite Variante des Rechtseinordnens erkennt man im Editor nicht so leicht, weil es sich da nur als geringeren Abstand zum vorhegehenden Bild zeigt. Man sieht das dann erst in der Vorschau ganz deutlich. Lösung: Wird das zuletzt gezogene Bild (hier Bild 5) nun angeklickt und im Balken, der sich darüber legt, auf "Zentriert" geklickt, dann ist die Einordnung korrigiert. Hier rutscht Bild 5 dann im Editor in die zweite Zeile, weil es mittig ausgerichtet neben den anderen nicht genügend Platz hat. Würde meine Postbreite größer sein, als sie ist, dann stünde das Bild in der Webansicht jedoch hinter und nicht unter den anderen, weil dann ja noch Platz wäre.
Variante 2 im Verfassen-Modus des Editors:
Variante 2 im HTML-Modus des Editors:
Variante 2 im Web:
Variante 2 nach Korrektur, im Web:
Variante 3
Lassen vorhergehende Bilder im Editor nach rechts kaum noch Platz und ist ein nächstes Bild so breit, dass es beim Neben-das-vorhergehende-Bild-ziehen zu weit über das vorige Bild reicht, dann wird es (scheinbar) nicht neben das vorige Bild gestellt, sondern dann drängt es das vorige Bild nach unten.
Lösung: Aber auch das kann man ganz leicht korrigieren, indem man das zuletzt gezogene Bild (hier Bild 4) anklickt und im Balken, der sich darüber legt auf "Zentriert" klickt. Das nach unten gedrängte Bild (hier Bild 3) rutscht dann automatisch wieder an die richtige Stelle hoch und das zuletzt gezogene Bild (hier Bild 4) rutscht voraussichtlich in die nächste Zeile, weil in der ersten nicht genügend Platz ist. Alle Bilder sind jetzt aber codetechnisch direkt hintereinander eingeordnet und gemeinsam mittig ausgerichtet.
Variante 3 im Verfassen-Modus des Editors:
Variante 3 im HTML-Modus des Editors:
Variante 3 im Web:
Variante 3 nach Korrektur, im Web:
Klar, wer wirklich nur im Verfassen-Modus des Editors arbeitet und im HTML-Modus auch nicht den entstandenen Code kontrolliert, weil er ihn nicht beurteilen kann, der wird jetzt vermutlich unsicher sein und glauben, dass es aussieht, als sei Bild 4 vielleicht immer noch nicht eingereiht und einfach nur auf Ausgangsposition zurück gestellt. Den Erfolg kann man nur dann zweifelsfrei sehen, wenn die Postbreite allen vier Bildern nebeneinander Platz bietet und man die Postvorschau bemüht. Ansonsten sollte man das vierte Bild eh nicht hinter das dritte ziehen, sondern es in einer separaten Zeile lassen.
Vertikalen Abstand anpassen
Zur Erinnerung: So sieht es aus, wenn man acht schmale Bilder nebeneinander gezogen hat:
So sieht der Code dazu aus:
Die seitlichen Abstände der Bilder können im Verfassen-Modus des Editors nicht entfernt oder geändert werden. Deshalb kann man im Verfassen-Modus nur die Abstände nach unten hin anpassen.
Will man bei mehreren Bilderzeilen die Abstände zwischen den Zeilen an die seitlichen Abständen zwischen den Bildern anpassen, dann muss man jede Bilderzeile separat herstellen und eine Leerzeile zwischen die Bilderzeilen setzen. Eine Leerzeile ist nämlich exakt so hoch wie der Abstand zwischen den Bildern breit ist. Leerzeilen kann man nur zwischen separat erstellte Bilderzeilen setzen.
So sieht es im Web aus, wenn man nicht acht Bilder nebenenander stellt, sondern zweimal vier Bilder und zwischen den beiden Bilderzeilen eine Leerzeile einfügt:
So sieht der Code dazu aus:
Bildergruppe bzw. Bilderzeile anders als mittig ausrichten
Hat man die Bilder wie oben beschrieben gruppiert, kann man sie nun aus dieser mittigen Position heraus auch anders ausrichten und anordnen. Man kann sie als Gruppe gemeinsam links oder gemeinsam rechts ausrichten oder man kann die Bilder innerhalb einer Zeile jeweils unterschiedlich anordnen.
Bildergruppe bzw. Bilderzeile gemeinsam links oder rechts ausrichten
Will man eine Bildergruppe oder Bilderzeile gemeinsam links oder gemeinsam rechts ausrichten, dann muss man sie markieren und per Ausrichtungsbutton in der Kommandozeile des Post-Editors gemeinsam ausrichten. Das Markieren geht so: Erstes Bild der Zeile anklicken, Hochstelltaste gedrückt halten und so oft auf die Pfeil-Rechts-Taste tippen, bis alle Bilder der Gruppe markiert sind.
So sieht eine Bilderzeile links ausgerichtet im Web aus:
So sieht der Code dazu aus:
Innerhalb einer Zeile Bilder unterschiedlich ausrichten
Man kann die jeweils äußeren Bilder innerhalb einer Bilderzeile anders ausrichten als die anderen Bilder. Dazu muss man sie jeweils anklicken und das Ausrichtungsmenü im Balken, der sich über das Bild legt, nutzen. Folgend richte ich so das erste Bild ganz links und das letzte Bild ganz rechts aus.
So sieht das im Web aus:
So sieht der Code dazu aus:
Ute Ziemes, sg.utez.de, 11.06.2013
0 Kommentare:
Kommentar veröffentlichen