ProcessWire: SEO mit Meta Tags

Suchmaschinenoptimierung (SEO) ist ein Thema, dass man nicht vernachlässigen sollte. Da Suchmaschinen den Inhalt von <meta>-Tags mitunter mehr oder weniger berücksichtigen und anzeigen, zeige ich im Fogenden, wie man die gängigen Meta-Tags in ProcessWire einbinden kann. Dazu erstellt man zuerst die notwendigen Felder und fügt diese dann bei den Templates ein. Zuzüglich müssen diese dann noch im <head>-Tag des Templates eingefügt werden. Das ganze gibt es auch hier als benutzerfreundliches Modul, nur unterstützt es noch nicht nofollow und noindex und lässt sich weniger individualisieren.
(mehr …)

ProcessWire: Update für das SiteMap Modul

Das Modul für ProcessWire zum automatischen Generieren der SiteMap.xml war nicht mehr aktuell. Es funktioniert nun mit mehrsprachigen Seiten und gibt diese jetzt jede Sprache richtig als eigene Seite aus. Vorher wurde nur die zuerst installierte Sprache ausgegeben. Zudem läuft es nun unter ProcessWire 3+, was bei der alten Version nur eingeschränkt möglich war.

Download:
https://github.com/keksmampfer/ProcessWire3-MarkupSitemapXML

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.

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