5202

ein Blog über technische Fragen zu Blogger

Blogger: Bilder mit Tabelle nebeneinander stellen

von

Update

Bitte beachten: Ich habe in der Zwischenzeit eine Lösung gefunden, die das Problem mehrere-Bilder-in-einer-Reihe nur mit dem Blogger-Editor hinbekommt.

Achtung: Überarbeitetes Tutorial!
Mit dem Posteditor in einem Blogger-Post drei Bilder nebeneinander zu platzieren, kann schnell zu einer frustrierenden Angelegenheit werden. Einfacher ist es, die Bilder in einer HTML-Tabelle einzubinden.
 Tabellen sind eigentlich nicht besonders aufwendig, eine einfache 3x2 Tabelle, d.h drei Elemente nebeneinander und zwei Elemente untereinander schaut  in der absoluten Grundform so aus:
<table class="tabelle">
<tr> <td>#</td> <td>#</td> <td>#</td> </tr>
<tr> <td>*</td> <td>*</td> <td>*</td> </tr>
</table>
Die Tabelle ist für jeweils ein Bild und den dazugehörigen Untertitel gedacht - * steht für den Untertitel, # ist der Platzhalter für das Bild und zwar in dieser Form:
<a href="http://www.blogger.com/link"><img class="bild" src="http://bild.jpg" /></a>
Die drei Beispiel-Fotos & Untertiteln stehen in so einer simplen 3x2 Tabelle, d.h. die Tabelle besteht aus drei Fotos nebeneinander und unter jedem Foto ist jeweils ein Untertitel.
Original
Farbe entsättigt
Kontrast bearbeitet
Hier ist der HTML-Text dieser 3x2 Tabelle als Muster. Die langen Links habe ich mit goo.gl gekürzt, damit die Tabelle ein wenig übersichtlicher bleibt. Goo.gl Kürzungen werden auch in <img> Tags ausgelesen, also kann man sie genauso verwenden wie die langen Links. Im Unterschied zur 'ganz einfachen' Tabelle von oben stehen die Bilder noch in einem <tbody> Tag, aber das macht der Editor automatisch, die könnte man also auch weglassen.
<table class="tabelle">
<tbody>
<tr> <td><a href="http://goo.gl/QsCtl"><img class="bild" src="http://goo.gl/QsCtl" /></a></td>
<td><a href="http://goo.gl/uUZCt"><img class="bild" src="http://goo.gl/uUZCt" /></a></td> 
<td><a href="http://goo.gl/wMhwG"><img class="bild" src="http://goo.gl/wMhwG" /></a></td> </tr>
<tr> <td>Original</td> <td>Farbe entsättigt</td> <td>Kontrast bearbeitet</td> </tr>
</tbody></table>
Angewendet wird das ganze so, dass man im Posteditor auf "HTML bearbeiten" umschaltet, die 'Grundform' in den Editor kopiert und dann händisch die Links, Bilder & Untertitel einsetzt. Zurück auf 'Verfassen' kann man den Post normal weiter bearbeiten. Falls man eine zweite Reihe Fotos einsetzen möchte, kopiert man die 'Grundform' einfach noch mal im "HTML bearbeiten" - oder man bleibt gleich im HTML-Modus und schreibt alles in HTML, ist oft simpler.

Wie kann ich das Layout der Tabelle anpassen?

Damit das ganze a bisserl nach was ausschaut, kann man die Tabelle gestalten. Dazu geht ihr in den Vorlagen-Designer zur Box 'Benutzerspezifisches CSS hinzufügen'.

--> Bild-Größe anpassen
Um eure Bilder exakt auf die Seiten-Breite anzupassen, legt ihr Höhe und Breite eurer Bilder fest:
.bild {
   height: 200px;
   width: 400px;
}
Werte je nach Blogbreite anpassen

--> Untertitel zentrieren
td {
text-align: center;
}
--> Rahmen
.tabelle {
border:1px solid orange;
}
und so weiter. Das ist nur als Beispiel gedacht, um die grundsätzlichen Möglichkeiten zu demonstrieren. Mehr Bilder untereinander gehen so:
<table class="tabelle">
<tr> <td>#</td> <td>#</td> <td>#</td> </tr>
<tr> <td>*</td> <td>*</td> <td>*</td> </tr>
<tr> <td>#</td> <td>#</td> <td>#</td> </tr>
<tr> <td>*</td> <td>*</td> <td>*</td> </tr>
<tr> <td>#</td> <td>#</td> <td>#</td> </tr>
<tr> <td>*</td> <td>*</td> <td>*</td> </tr>
</table>
Ihr fügt also einfach mehr Tabellenzellen ein - letzen Endes sind große Tabellen nur eine Menge Bastelarbeit und man verliert irgendwann den Überblick über seine Links und Bildquellen und deswegen man absolut systematisch vorgehen, ansonsten ist das nicht schwierig.


Nachtrag: Es gibt auch die Möglichkeit mit CSS drei Bilder in einer Reihe zu bekommen ....