Quadratisch, praktisch, gut - eine Bildergalerie mit imageTweak erstellen

Wer kennt das Problem nicht, der Artikel ist fast fertig und es fällt auf, dass ein ein halbes Dutzend Fotos oder Screenshots dazugehören um den Inhalt ergänzen. Am Besten in einer kleinen Galerie und alles ohne großen Aufwand:

Was benötigen Sie für eine solche Galerie?

• imageTweak muss installiert sein
• die jQuery Fancybox muss verfügbar sein (verwenden Sie hierfür das Add-on jQueryAdmin, erstellen Sie sich ein Preset in dem die Fancybox enthalten ist und binden Sie dieses in Ihrem Template oder auf der jeweiligen Seite ein)

Editieren Sie die CSS Datei des von Ihnen verwendeten Template und ergänzen Sie die Datei um die folgenden Formatierungsanweisungen:

ul.gallery {
  margin: 10px 0;
}
.gallery li {
  position: relative;
  float: left;
  display: inline-block;
  overflow: hidden;
  border: 5px solid #cecece;
  list-style: none;
  margin: 0 15px 15px 0;
  padding: 0;
  height: 200px;
  width: 200px;
}
.group:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
/* IE-Patch für IE 7*/
*:first-child+html .group { 
  min-height: 0; 
}
/* IE-Patch für IE 6*/
* html .group { 
  height: 1%; 
}

Bei diesem Tipp wird für die Bildergalerie keine Tabelle sondern eine unsortierte Liste verwendet. Wenn Sie die Darstellung der Bilder- bzw. Fotogalerie an Ihren Bedarf anpassen möchten sind die folgenden Einstellungen in der CSS Datei für Sie interessant:

• width: 200px; - gibt die Breite des Vorschaubildes an (in Pixeln)
• height: 200px; - gibt die Höhe des Vorschaubildes an
• border: 5px solid #cecece; - gibt die Breite und die Farbe des Rahmens um die Vorschaubilder an

Damit sind die Vorbereitungen abgeschlossen und Sie können Ihre erste Image Gallery erstellen.

Wenn Sie den CKEditor verwenden (empfohlen), finden Sie in der Toolbar einen Button "Create Div Container", gehen Sie bitte wie folgt vor:

• setzen Sie den Cursor an die Stelle, an der die Galerie eingefügt werden soll
• klicken Sie auf den Button "Create Div Container"
• geben Sie als Stylesheet-Klasse gallery group ein und klicken Sie auf "OK"
• fügen Sie eine unsortierte Liste ein

Der FCKEditor verfügt leider nicht über diese komfortable Möglichkeit, hier müssen Sie den DIV Container und die unsortierte Liste von Hand anlegen:

• schalten Sie im FCKEditor oben links auf die Quellcode Darstellung um
• positionieren Sie den Cursor an der gewünschten Stelle im Quelltext
• geben Sie das nachfolgend aufgelistete Code Fragment ein
• schalten Sie wieder in die normale Ansicht zurück

<div class="gallery group">
  <ul>
    <li></li>
  </ul>
</div>

In die neu eingefügte unsortierte Liste fügen Sie nun wie gewohnt das erste Bild ein. Geben Sie die gewünschte Größe des Bildes an (diese sollte größer sein als die festgelegte Größe für die Vorschaubilder von 200 x 200 Pixel) und tragen Sie bei den erweiterten Bild Eigenschaften unter Stylesheet Klasse tweak-fancybox ein. Wiederholen Sie den Vorgang für zwei weitere Bilder, speichern Sie danach die Seite ab und sehen Sie sich das Ergebnis an.

Die Vorgehensweise, die Bilder über eine unsortierte Liste einzufügen ist unkompliziert und sehr einfach zu handhaben, sie müssen sich nicht mit irgendwelchen Tabellen herumärgern. Darüber hinaus ist es nicht erforderlich, dass sich die Bilder in einem bestimmten Verzeichnis befinden, sie müssen nicht vorbereitet werden da imageTweak die Bilder automatisch optimiert. Insgesamt eine bequeme Lösung für die tägliche Bilder Galerie für zwischendurch - die hier vorgestellte Methode ist sicher nicht für die Präsentation der letzten 500 Party Fotos geeignet.

imageTweak hat aber noch ein paar Tricks auf Lager, die ich Ihnen nicht vorenthalten möchte.

In der folgenden Galerie wird immer das gleiche Bild verwendet und es wird stets in der gleichen Größe angezeigt, trotzdem wirkt jedes Bild ein wenig anders:

Der Schlüssel ist die Klasse crop, die Sie bei den erweiterten Bildeigenschaften zusätzlich zu der Klasse tweak-fancybox angeben können. crop veranlasst imageTweak dazu, das Bild nicht auf die angegebene Größe zu verkleinern (optimieren) sondern - ausgehend von der Bildmitte - einen Ausschnitt in der angegebenen Bildgröße zu wählen. Wird crop angegeben, können Sie außerdem weitere Klassen als Parameter übergeben und so die Darstellung des Galeriebild beeinflussen:

• top - setzt den Bildausschnitt an den oberen Bildrand
• bottom - setzt den Bildausschnitt an den unteren Bildrand
• left - setzt den Bidausschnitt an den linken Bildrand, kann mit top oder bottom kombiniert werden
• right - setzt den Bildausschnitt an den rechten Bildrand, kann mit top oder bottom kombiniert werden
• zoom[] - zoomt mit dem in den eckigen Klammern angegebenen Wert in das Originalbild, zoom[100] = Originalgröße, zoom[50] = 50%, zoom[15] = 15%

Das ersetzt natürlich kein Bildbearbeitungsprogramm, ermöglicht aber auf die Schnelle den einen oder anderen netten Effekt.

Wenn Sie mit crop und den zusätzlichen Klassen experimentieren, ist eine sehr wesentliche und wichtige Eigenschaft von imageTweak äußerst lästig: imageTweak schreibt die Bilder nur dann neu, wenn sich die Bildgröße oder das Bilddatum verändert - dies ist aber nicht der Fall, wenn Sie lediglich eine Klasse hinzufügen oder entfernen. Durch Angabe der Klasse no-cache erzwingen Sie, dass imageTweak das betreffende Bild bei jedem neuen Laden der Seite neu schreibt. Denken Sie also auf jeden Fall daran, no-cache wieder zu entfernen wenn Sie mit dem Ergebnis zufrieden sind!

Diese Dokumentation ist sicherlich nicht vollständig, ich freue mich über Ihre Ergänzungen, Hinweise, Tipps...

Ralf Hertsch, 20.04.2011