Joomla: Simple Image Gallery Extended und die Ausgabe der Thumbnail-Größen

Posted on by Julian Stock.

Die letzte Stunde habe ich damit verbracht, in das img-Tag der Thumbnails, die mit der Extension "SIGE - Simple Image Gallery Extended" für Joomla generiert werden, ihre Breite und Höhe einzubetten. In der Theorie ganz einfach, in der Umsetzung im Grunde genommen auch.

Zuerst habe ich mir die Stelle in der sige.php (_JOOMLAROOT/plugins/content/sige/sige.php) gesucht, die für die Generierung der Thumbnails zuständig ist. Gefunden habe ich in Zeile 1440 folgendes: $html .= '" src="'.$this->_live_site.$this->_rootfolder.$this->_images_dir.'/thumbs/'.$image.'" />'; Vor diese Zeile Code habe ich meinen "Hack" angesetzt:

$theSize = "";
$imgSize = array();
$imgPath = getcwd().$this->_rootfolder.$this->_images_dir.'/thumbs/'.$image;
if (file_exists($imgPath)) {
  $imgSize = getimagesize($imgPath);
  $theSize = " width='" . $imgSize[0] . "' height='" . $imgSize[1] . "'";
}

Nun habe ich die Variable $theSize noch an das Ende der ursprünglichen Zeile angehängt $html .= '" src="'.$this->_live_site.$this->_rootfolder.$this->_images_dir.'/thumbs/'.$image.'"'.$theSize.' />'; und erhalte nach einem erneuten Laden der Seite (sofern noch nicht geschehen) die gespeicherten Thumbnails mitsamt ihrer Breiten- und Höhenangabe. Dies funktioniert leider nur bei gecacheden (gibt es das Wort überhaupt?) Bildern, ist aber nicht weiter tragisch und lässt sich vermutlich auch nicht ändern. Habe ich allerdings auch nicht weiter drüber nachgedacht.

Warum habe ich das überhaupt gemacht?

Eine Kundin von mir möchte in einer Bildergalerie eine ähnliche Anordnung wie die von z. B. Pinterest verwenden. Ein Beispiel eines von mir verwendeten Scripts (Pinbox):

Pinbox Beispielanordnung

Bei einer solchen Anordnung hat man nur zwei Möglichkeiten: Entweder man wartet auf ein $(document).ready(); oder ein $(window).load();. Da man allerdings für die Berechnung der Abständie die Breite und Höhe der Bilder bzw. Container benötigt, muss zwangsweise auf letzteres zurückgegriffen werden. Dies hat den Nachteil, dass man ab einer Menge X an Bildern teilweise extrem lange Wartezeiten hinnehmen muss.

Verwendet man allerdings das oben genannte Codeschnipsel, kann man sich auf die Größenangaben im HTML-Code verlassen. Nun kann es höchstens noch passieren, dass nicht alle Bilder auf einmal angezeigt werden, allerdings ist dies das kleinere Übel. Die Abstände zwischen den Bildern stimmen auf jeden Fall.

Da in der Galerie meiner Kundin neben Portrait- auch Landscapebilder vorhanden sind (und diese natürlich gemixt sein können), muss man allerdings noch ein paar Werte mit JavaScript errechnen, damit es nicht zu unschönen Verzerrungen kommt.

Gehen wir von folgender DOM-Struktur (vereinfachte Darstellung) aus:

div.bildergalerie
    a.bild
        img
    /a
    a.bild
        img
    /a
    a.bild
        img
    /a
    ...
/div 

Verwendet habe ich folgendes Script:

$.each($("div.bildergalerie a"), function(index, currentEl) {
  var hasHeight = $(currentEl).find("img").attr("height");
  var heightForImg = $(currentEl).children().height();
  var widthForImg = $(currentEl).children().width();
  if ( typeof hasHeight !== 'undefined' && hasHeight !== false) {
    heightForImg = hasHeight;
    if ($(currentEl).find("img").attr("width") > $(currentEl).width()) {
      var calcHeight = ($(currentEl).find("img").attr("height") / $(currentEl).find("img").attr("width")) * $(currentEl).width();
      heightForImg = calcHeight;
      widthForImg = $(currentEl).width();
      $(currentEl).find("img").attr("height", "");
    }
  }
  $(currentEl).css({
    height : heightForImg,
    width : widthForImg
  });
});

Wenn die von PHP ermittelte Bildbreite (img) größer ist, als die durch CSS angegebene Breite des Eltern-Containers (a), wird die Höhe des Containers mit einer Formel neu berechnet (dies ist z. B. häufig im Landscape-Format der Fall). Ein Beispiel:

Container (Breite Höhe): 128 200 Wert: 200 / 128 = 1,5625

Bild (Breite Höhe) 250 130 Wert: 1,5625 * 128 (Breite des Containers) = 200

Anschließend wird die Höhe des Containers auf 200 Pixel gesetzt, die Attribut-Breite (!) des Bildes (img) auf leer (siehe Zeile: $(currentEl).find("img").attr("height", "");). Die Breite des Bildes habe ich mit Hilfe von CSS auf 100% gesetzt, damit diese immer auf der vollen Breite des Containers dargestellt werden.

Super Sache, was? :)


Julian Stock
Webentwickler aus Lübeck · 30 Jahre

Kommentare