ProcessWire Galerie Tutorial

Hier zeige ich wie man mit wenigen Zeilen Code eine Galerie auf seiner Webseite einbinden kann unter Benutzung des Feldes Image. Dieses Tutorial ist mit der Version 3.0.33 von ProcessWire erstellt.

ProcessWire vorbereiten

Um die Galerie nutzen zu können, muss man ein Feld für die Bilder erstellen und dieses den Templates hinzufügen. Dabei zu beachten ist, dass das Feld immer ein Array sein soll.

1.  Ein Feld „Gallery“ hinzufügen
2.  Setze „Type“ auf „Image“
3.  Speichern
4. Setze „Formatted value“ auf  „Array of items“
5. Speichern
6. Das Feld „Gallery“ den Templates hinzufügen, die es benutzen sollen.

Template Dateien anpassen

Die Funktionen, die Galerie in HTML umsetzten, kommen in die Datei „templates/_func.php“. Mit renderGallery wird das komplette HTML, das später nur in die Webseite eingebunden werden muss, erstellt. Diese ruft die Funktion renderGalleryItems auf, welche alle Bilder in der gewünschten Größe zusammen stellt. Wenn man später Bilder unterschiedlicher Größe darstellen möchte, muss man nur renderGallery anpassen und mehrmals renderGalleryItems aufrufen.

function renderGallery($images, $thumbWidth = 150, $thumbHeight = 150)
{

    $out = '<div id="gallery" class="my-gallery" itemscope="" itemtype="http://schema.org/ImageGallery">';
    $out .= renderGalleryItems($images, $thumbWidth, $thumbHeight);
    return $out . "</div>";
}

function renderGalleryItems($images, $thumbWidth = 150, $thumbHeight = 150){
    $out = "";
    
    foreach ($images as $image) {
        $thumbnail = $image->size($thumbWidth, $thumbHeight);
        $size = $image->width . "x" . $image->height;
        $out .= '<figure class="gallery-item" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">';
        $out .= '<a href="' . $image->url . '" itemprop="contentUrl" data-size="' . $size . '">';
        $out .= '<img class="img-rounded gallery-img" src="' . $thumbnail->url . '" itemprop="thumbnail" alt="' . $image->description . '">';
        $out .= '</a>';
        $out .= '<figcaption itemprop="caption description">' . $image->description . '</figcaption>';
        $out .= '</figure>';
    }
    return $out;
}

In der „templates/_init.php“ wird der Standardwert für eine leere Galerie eingetragen:

$gallery = "";</pre>

In den Templates (die aus 6.), die eine Galerie enthalten sollen, generiert man den HTML-Code mit:

<pre class="brush: php; title: ; notranslate" title="">if($page->gallery){
   $gallery = renderGallery($page->gallery);
}

Kurz noch die Galerie an der gewünschten Stelle in der „templates/_main.php“ einbinden.

<?PHP echo $gallery; ?></pre>

Noch ein klein bisschen CSS:

<pre class="brush: css; title: ; notranslate" title="">.my-gallery {

display: flex;
flex-wrap: wrap;
justify-content: space-around;

}

Wenn jetzt nichts zu sehen ist, liegt das womöglich am Standarddesign von ProcessWire. In dem wird width für

auf 0 gesetzt und verhindert, dass die Galerie angezeigt wird.

Fazit

Dank des vorgefertigten Felde-Typs Image lässt sich eine Galerie schnell und effizient erstellen. Auf der Seite kann man jetzt noch Scripte zum Anzeigen der Galerie hinzufügen wie zum Beispiel PhotoSwipe oder LightBox2.