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 = "";

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


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; ?>

Noch ein klein bisschen CSS:


.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 <figure> 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.

Processwire Standardsprache ändern

Bei Processwire ist die Rückfallsprache Englisch, also sollte man im Template auch englische Begriffe benutzen. Um nun Processwire auf eine andere Sprache zum Beispiel Deutsch um zu stellen sind nur ein paar einfache Schritte notwendig.

Für den Fall einer einsprachigen Installation fügt man der „Default“ Sprache die jeweilige Übersetzung hinzu.

Wenn mehrere Sprachen benutzt werden sollen, unter der auch Englisch ist, dann erstellt man zusätzlich noch eine Sprache „en“. Bei der keine Übersetzung hochgeladen wird, da Englisch ja überall Vorprogrammiert ist.

Das sieht dann so aus:

  1. default – Übersetzung: de
  2. en – Übersetzung: keine
  3. … – Übersetzung: …

Zusätzlich sollte man bei der Startseite unter Einstellungen noch die Adressen anpassen und vergesst nicht den ‚HTML language code‘ in den Übersetzungen richtig zu setzen, damit die Sprache auch richtig von den Suchmaschinen erkannt werden.

Fork CMS Bootstrap Theme

In letzter Zeit hatte ich mich ein bisschen mit dem Fork CMS beschäftigt. An sich ein schönes CMS auf Symfony2 Basis, aber da ich nicht mal ein einfaches lauffähiges Modul für eine Galerie gefunden habe und ich jetzt nicht unbedingt Lust darauf habe eines zu schreiben, zumal die Dokumentation nicht so ergiebig ist.

Deswegen gibt es ein kleines Bootstrap basiertes Theme für das Fork CMS zum Download. Es ist als ein Basispaket für ein Template gedacht, da noch so einiges daran fehlt. Aber es unterstützt schonmal das Wichtigste, darunter alle Sprachen und eine endlose Navigationsstruktur. Mit ein bisschen Farbe (Bootstrap-Theme) könnte es sogar ganz passabel aussehen.

Download: https://github.com/keksmampfer/Fork-CMS-Theme-Bootstrap-Gray