Bilder nebeneinander für Anja

Bildunterschrift hinzufügen

Bildunterschrift hinzufügen

Heute eine neue Variante vom unendlichen Blogger Thema mehrere-Bilder-nebeneinander. Nicht jeder mag Tabellen bauen oder eigene A-Elemente schreiben. Meines Wissens hat noch niemand versucht, das Problem mehrere-Bilder-in-einer-Reihe mit dem Blogger-Editor zu lösen. Yeah, was soll ich sagen, es geht!

Hier eine Methode, wie ihr wie gewohnt mit dem Blogger-Editor arbeiten könnt und eure Bilder trotzdem nebeneinander bekommt.

So funktoniert's

Ihr ladet euer Bild ganz normal mit dem Blogger-Editor hoch. Dann gebt ihr euren Bild einen 'Untertitel'. Ihr müsst dort nichts rein schreiben, wichtig ist nur, dass ein Untertitel existiert. Die Größe eurer Bilder passt ihr soweit an, das mehrere Bilder nebeneinander passen. Dann macht ihr das selbe mit dem nächsten Bild und so weiter. Lasst euch nicht davon stören, dass jetzt noch alle Bilder untereinander stehen - darum kümmert ihr euch anschließend. Wenn ihr mit den Bildern fertig seid, wechselt im Editor zu 'HTML bearbeiten'!

HTML

Im HTML habt ihr jetzt einen riesigen Code für die Bilder stehen. Bei mir schaut der so aus:

Farbig

Entfärbt

Kontrast bearbeitet

Wieder Farbig!

Lasst euch von dem vielen Code nicht verwirren, dass müsst ihr nicht verstehen. Wenn ihr ganz genau hinschaut, sehr ihr im Code-Block verschieden Leerzeilen. Die müssen weg, löscht sie.

Im nächsten Schritt packt ihr den gesamten Code-Block in einen

Container und gebt ihm eine Klasse und zwar nach diesem Muster:

...
Codeblock
...

Danach sollte das ganze so auschauen:

Farbig

Entfärbt

Kontrast bearbeitet

Wieder Farbig!

CSS

Jetzt schaut euch eure Bilder noch mal an - alle stehen nach wie vor untereinander und irgendwie seid ihr noch keinen Schritt vorwärts gekommen. Jetzt kommt der Trick an der Sache - ihr wechselt noch mal in die HTML-Ansicht und kopiert diese CSS ganz oben in den Post hinein:

Dann 'veröffentlicht' ihr euren Post und wie von Zauberhand ordnen sich alle Bilder nebeneinander an. Mission accomplished!

Erläuterung

Der

 Container ist dazu da, um die Bilder 'nebeneinander' von den 'normalen' Bilder zu unterscheiden. Wenn ihr alle Bilder in eurem Blog in einer Reihe haben wollt, könntet ihr den Container  theoretisch auch weglassen. Aber das empfehle ich euch nicht. So wie oben beschrieben, ist es besser.

Der Trick besteht darin, dass wenn ihr eure Bildern einen Untertitel gebt, euch der Editor die Bilder in eine Tabelle packt. Das nützt ihr aus, indem ihr Elemente der Klasse .tr-caption-container  links floated und eh voilà, die Bilder ordnen sich alle von links nach rechts 'fließend' an.

Das geht mit 'normalen' Bildern nicht. Der Editor schreibt eine Style-Anweisung in's HTML, die das verhindert. Durch Zufall bin ich mal auf diesen Unterschied zwischen 'normale' Bilder und 'Bildern mit Untertitel gestossen' und habe mir überlegt, wie ich das ausnutzen kann.

'Bilder mit Untertitel' könnt ihr mit dieser Methode ganz normal im Blogger Editor laden und bearbeiten. Für Blogger Layouts habe ich noch keine simplere Methode gesehen, die das Problem mehrere-Bilder-nebeneinander löst. 

designed by 5202