Thumbnails mit Bootstrap

Bootstrap besitzt eine Klasse thumbnails um eine Liste kleiner Vorschaubilder darzustellen, aber auch eine Klasse thumbnail für die Darstellung eines einzelnen kleinen Bildchens. Das Bild wird dann mit einem grauen Rahmen im Abstand von 4 Pixeln zum Bild angezeigt. Im einfachsten Fall sieht das so aus:

<a href="#" class="tumbnail">
	<img src="gartenhaus01" alt="Gartenhaus" />
</a>

Will man jedoch zusätzlich vielleicht eine Überschrift und/oder eine Beschreibung des Photos mitgeben, klammert man Photo und Beschreibung in einem <div>, dem man die Klasse thumbnail mitgibt und innerhalb dieses <div> schreibt man ein weiteres, das die Klasse caption bekommt. Man kann in diesem caption-Div alles einfügen, was HTML erlaubt und im Zweifelsfalle ganze Romane mitgeben.

<div class="thumbnail span3">
	<a href=""><img src="gartenhaus01" alt="Gartenhaus" /></a>
	<div class="caption">
		<h3>Gartenhaus</h3>
		<p>Unser Gartenhäuschen im Frühsommer 2013</p>
	</div>
</div>

Die Klasse span3 definiert die Weite Thumbnails und paßt wunderbar für Photos der Größe 240x180 Pixel, bei anderen Größen muß man ein wenig experimentieren.

Das Ergebnis sollte dann ungefähr so aussehen, wie das Photo oben rechts. Ich habe noch die Lizenz und den Namen des Photographen mit einem Absatz der Klasse small hinzugefügt(<p class="small">) und mir natürlich von RubyFrontier und seinen Makros helfen lassen, also in diesem Falle Link und Bild mit

<%= html.getLink(imageref("bild"), "url") %>

eingefügt.

Oft will man aber mehrere Thumbnails auf einmal anzeigen, um zum Beispiel auf eine Photostrecke hinzuweisen. Dafür bietet Bootstrap die »Klammer«-Klasse thumbnails, die genau dies ermöglicht.

---

• 

  Hufeisendiedlung

  Nach der Ernennung zum Weltkulturerbe wurde die Hufeisensiedlung komplett renoviert.

  Photo (cc): Jörg Kantel

• 

  Hufeisensiedlung

  Zuletzt war der Park in der Mitte des Hufeisens an der Reihe. Auch er strahlt jetzt wieder im neuen Glanz.

  Photo (cc): Jörg Kantel

• 

  Riesendistel (1)

  Diese Riesendistel habe ich am Teltowkanal entdeckt.

  Photo (cc): Jörg Kantel

• 

  Riesendistel (2)

  Photo (cc): Jörg Kantel

• 

  Riesendistel (3)

  Photo (cc): Jörg Kantel

---

Obiges Beispiel wurde mit folgendem Code (Auszug und wegen Zeilenumbruch leicht gekürzt) erstellt:

<ul class="thumbnails">
	<li class="span3">
		<div class="thumbnail">
			<%= html.getLink(imageref("hufeisen02"), "url-zum-bild") %>
			<div class="caption">
				<h3>Hufeisendiedlung</h3>
				<p>Nach der Ernennung …</p>
				<p class="small">Photo  …</p>
			</div>
		</div>
	</li>
	<li class="span3">
		<div class="thumbnail">
			…
		</div>
	</li>
	<li>
		…
	</li>
</ul>

Bootstrap übernimmt den Umbruch eigenständig, allerdings ist das Ergebnis nicht in allen Fällen zufriedenstellend. Besonders wenn Quer- und Hochformate gemischt vorkommen oder die Beschreibungen eine unterschiedliche Länge besitzen, entstehen schon mal häßliche Lücken. Auch hier muß man ein wenig experimentieren.

Sind allerdings alle Bilder gleich groß und besteht die caption nur aus einer (einzeiligen) Überschrift und dem (immer gleichen) Copyright-Vermerk (vgl. letzte Zeile des obigen Beispiels), dann überzeugt das Ergebnis ohne Zweifel.

Wer hier etwas vermutet, hat Recht: Dies sind meine ersten Versuche, an einer (statischen) flickr-Alternative zu arbeiten. Denn erstens ist flickr nach dem letzten Redesign fast unbrauchbar für mich geworden, zweitens kämpfe ich ja schon länger mit der Zensur und Prüderie dort und drittens wird es nach dem PRISM-Skandal wirklich Zeit, sich endgültig aus den Datensilos zu verabschieden.

Allerdings werde ich diese statischen Photo- oder Bilderseiten, die ich Photr (oder Pictr) genannt habe, vermutlich nicht mit RubyFrontier, sondern mit dem Perl Template Toolkit zusammenbasteln, da es mir für Sites mit mehreren (zehn-) tausend Seiten besser geeignet scheint. Schaun wir mal …

Siehe auch:

• Ich habe gelesen: Das Buch zu Bootstrap
• Worknote: Erste Schritte mit Bootstrap 2.0