ACF-Galerie-Feld: Leitfaden zur Verwendung und Anzeige

Das ACF-Galerie-Feld ist ein Feldtyp des Plugins Advanced Custom Fields (ACF). Das ACF-Galerie-Feld ermöglicht die Auswahl mehrerer Bilder für ein einzelnes Feld aus der WordPress-Mediathek (im Gegensatz zum ACF-Bildfeld, das nur ein einziges Bild unterstützt). Entwickler verwenden es üblicherweise für alle Arten von Galerien oder wenn sie einen benutzerdefinierten Satz von Bildern auf einer Seite anzeigen müssen.

Eine wichtige Einschränkung ist die Dateierweiterung. Sie können nur Dateien mit den erlaubten Erweiterungen hochladen. Für Bilder sind erlaubt: .jpg, .jpeg, .png, .gif und .ico. Die Liste der zulässigen Erweiterungen für alle Dateitypen finden Sie auf der zugehörigen wordpress.org-Seite. Wenn Sie das Hochladen von z.B. .svg erlauben wollen, müssen Sie spezielle Hooks verwenden.

Wenn Sie also die Hook-Namen wissen wollen, um eine andere Bilderweiterung als die oben aufgelistete hinzuzufügen, stellen wir Ihnen einen Code-Schnipsel zur Verfügung, der das Hochladen von .svg auf Ihrer Website ermöglicht. Sie können ihn für Ihre Zielerweiterung modifizieren oder ihn so verwenden, wie er für .svg ist. Der Code kann in Ihre functions.php eingefügt werden.

<?php
         add_filter('upload_mimes', function ($mimes) {
            $mimes['svg'] = 'image/svg+xml';

            return $mimes;
        });

        add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {
            $filetype = wp_check_filetype($filename, $mimes);

            return [
                'ext' => $filetype['ext'],
                'type' => $filetype['type'],
                'proper_filename' => $data['proper_filename']
            ];
        }, 10, 4);

Das ACF-Galeriefeld hat 3 verschiedene Rückgabeformate: Image Array, Image URL, und Image ID. Das ist genau wie das Image-Feld, aber die Antwort ist immer ein Array. Bei einem Array haben die Elemente einen Typ, der mit dem gewählten Rückgabeformat zusammenhängt. Dies hat keinen Einfluss auf das Aussehen des Feldes oder die Optionen für die Seitenverwaltung. Denn das Rückgabeformat der Galerie steuert, welche Daten Sie im Code erhalten. Wir meinen hier, wenn Sie das ACF-Galerie-Feld aus der WordPress-Datenbank mit der Funktion get_field abfragen.

Unser Vorschlag wäre, die Option "Image ID" zu verwenden, da dies die bevorzugte Option mit der besten Leistung ist. Vermeiden Sie die Option "Bild-URL", es sei denn, Sie benötigen sie aus einem bestimmten Grund. Denn damit erhalten Sie keine Details über das Bild, sondern nur die URL, was in den meisten Fällen nicht ausreicht.

Das ACF-Galerie-Feld verhält sich genau wie das ACF-Bilderfeld, mit einem großen Unterschied: Es speichert ein Array von Bild-IDs in der Post-Meta der Seite oder des Beitrags, während das Bilderfeld nur eine Bild-ID speichert.

Auf diese Weise fungiert das ACF-Galeriefeld als Vermittler zwischen der Medienbibliothek und Ihnen selbst. Es bietet eine intuitive Benutzeroberfläche, um mehrere Bilder aus Ihrer Mediathek auszuwählen. Aber in seinem Inneren speichert es die Bilder nicht separat. Es verwendet eine Art Markierung, um die Bilder (oder Anhänge, wenn Sie so wollen) aus der Mediathek für die Seite oder den Beitrag "anzuhängen" oder "zuzuordnen".

Nun zeige ich Ihnen, wie Sie ein ACF-Galerie-Feld mit einem Shortcode anzeigen können.

Wir können dies lösen, indem wir die berühmten WordPress Shortcodes verwenden. Sie sehen gleich aus, haben auch einfache englische Wörter in eckigen Klammern: [irgendein-Name]. Außerdem können sie "Argumente" akzeptieren und hinter den Kulissen verknüpft WordPress jeden Shortcode mit einer PHP-Funktion.

Für den heutigen Tag ist keine Codierung erforderlich, was bedeutet, dass wir auch keine PHP-Funktionen schreiben werden. Stattdessen werden wir ein großartiges kostenloses Plugin namens ACF Views verwenden. Es bietet die Funktionalität, ein ACF-Galerie-Feld mit automatisch generierten Shortcodes anzuzeigen.

Das Plugin unterstützt alle ACF-Felder und ermöglicht auch die Anzeige von Standardbeiträgen und benutzerdefinierten Beiträgen auf Seiten. Wir konzentrieren uns aber erst einmal auf das ACF-Galerie-Feld. Lesen Sie wie man ACF-Felder ohne Programmierung anzeigt, um alle Vorteile des Shortcode-Ansatzes zu kennen.

Unten haben wir ein Video-Tutorial angehängt, das zeigt, wie man ACF-Felder auf einer einzelnen Seite mit Hilfe von Shortcodes anzeigen kann. Das Video ist für alle ACF-Feldtypen gleich. Weitere Video-Tutorials auf dem official YouTube channel.

Sie können das Video aber auch überspringen, denn weiter unten finden Sie eine vollständige Schritt-für-Schritt-Anleitung genau für das ACF-Galeriefeld.

Um der Anleitung folgen zu können, müssen Sie das ACF Views Plugin auf Ihrer WordPress-Website installieren, vergessen Sie nicht, es zu aktivieren. Außerdem muss das (kostenlose) ACF-Plugin installiert und aktiviert sein. Fahren Sie dann mit den nächsten Schritten fort.

Sobald Sie das ACF Views Plugin aktiviert haben, steht Ihnen in Ihrem Admin-Menü ein neuer Reiter mit dem Namen "ACF Views" zur Verfügung, den Sie einfach anklicken können.

Klicken Sie auf die Schaltfläche 'Neu hinzufügen', um eine Ansicht zu erstellen.

Hinweis: Der Begriff "View" ist die Bezeichnung für den speziellen Post Type, den das Plugin bereitstellt. Jeder Ansicht ist eine Liste von ACF-Feldern zugeordnet, so dass es möglich ist, viele Ansicht-Elemente zu erstellen, die verschiedene Felder (oder eine Reihe von Feldern) für verschiedene Beiträge/Seiten anzeigen.

Benennen Sie Ihre Ansicht, sie sollte kurz und beschreibend sein, da dies auch der Name ist, der in der Ansichtsliste angezeigt wird, damit sie leichter zu finden ist. Wir haben unsere Ansicht "Seitengalerie" genannt.

Wenn Sie neue Felder in Ihrer Ansicht zuweisen. Klicken Sie auf die Schaltfläche "Feld hinzufügen" und wählen Sie Ihre "Gruppe" aus dem Dropdown-Menü. In meinem Fall heißt die Gruppe "Seitenfelder". Wählen Sie nun das Zielfeld aus dem Dropdown, wir haben "Seitengalerie" gewählt.

Hinweis: Der Feldtyp wird zur leichteren Identifizierung in den Klammern angezeigt. So können Sie den Typ eines jeden Feldes in der Auswahlliste leicht erkennen.

In diesem Fall sollten Sie "(gallery)" sehen. Fahren Sie fort, indem Sie eine "Bildgröße" aus dem Dropdown-Menü auswählen, wir haben "Voll" gewählt.

Wenn Sie die Pro-Version des Plugins verwenden, dann stehen Ihnen auch die Optionen Masonry und Lightbox zur Verfügung. Siehe dazu den Screenshot unten.

Jede Ansicht unterstützt eine unbegrenzte Anzahl von ACF-Feldern, aber in unserem Fall werden wir nur ein einziges Feld zuweisen.

Klicke auf die Schaltfläche "Veröffentlichen", um deine Ansicht zu speichern und zu veröffentlichen. Wenn deine Ansicht veröffentlicht ist, wirst du feststellen, dass Shortcodes generiert wurden und in einem Block auf der rechten Seite deines Ansicht Bearbeitungsbildschirms verfügbar sind. Jeder View hat seinen eigenen Shortcode mit einer eindeutigen ID (die Shortcode-Struktur ist für alle Views gleich, aber die Argumente sind eindeutig).

[acf_views view-id="xxxx" name="x"]

Drücken Sie die Schaltfläche "In die Zwischenablage kopieren" für den ersten Shortcode.

Wir haben es fast geschafft, jetzt, wo alles vorbereitet ist, können wir das ACF-Galeriefeld anzeigen.

Besuchen Sie Ihre Zielseite mit dem ACF-Galerie-Feld (fügen Sie unbedingt ein paar Bilder ein) und fügen Sie den kopierten Shortcode an einer beliebigen Stelle im Seiteninhalt ein. Sie können den Shortcode mit dem Gutenberg-Editor einfügen. Klicken Sie auf die Schaltfläche "Plus" und wählen Sie den Block "Shortcode" aus der Liste aus. Fügen Sie Ihren Shortcode in den Block ein und klicken Sie auf die Schaltfläche "Aktualisieren", um Ihren Beitrag/Ihre Seite zu speichern.

Öffnen Sie die Seite, um das Ergebnis zu sehen. Wenn alles richtig gemacht wurde, sollten Sie alle angehängten Bilder aus dem ACF-Galerie-Feld angezeigt bekommen.

Wenn Sie Ihre Galerie nicht sehen, müssen Sie zurückgehen und die Seite bearbeiten. Vergewissern Sie sich, dass Sie einige Bilder in das ACF-Galerie-Feld eingefügt haben, und laden Sie dann die Seite neu. Wenn Sie aus irgendeinem Grund immer noch nichts sehen, dann gehen Sie zurück zur Bearbeitung Ihrer Ansicht und bestätigen Sie, dass Sie das richtige Feld "Gruppe" aus der Liste ausgewählt haben.

Um das Galerie-Feld anzuzeigen, müssen wir die ausgewählten Bilder aus dem Feld in img-Tags umwandeln.

Der Code wird je nach ausgewähltem Rückgabetyp unterschiedlich sein. Nachfolgend haben wir Beispiele aufgeführt, die Ihnen bei der Erstellung der Ausgabe helfen werden. Denken Sie aber daran, dass Sie Ihren eigenen CSS/JavaScript-Code schreiben müssen, um daraus eine interaktive Galerie zu machen.

1. PHP-Code zur Anzeige des Galerie-Feldes mit dem Rückgabeformat "ID":

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';
if ($images) {
    foreach ($images as $imageId) {
        echo wp_get_attachment_image($imageId, $size);
    }
}

2. PHP-Code zur Anzeige des Feldes Gallery mit dem Rückgabeformat "Array":

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';
if ($images) {
    foreach ($images as $imageData) {
        // displays the image. Each %s in the string will be replaced with the related argument
        printf("<img src='%s' alt='%s'>",
            esc_url($imageData['sizes'][$size]), esc_attr($imageData['alt']));
    }
}

3. PHP-Code zur Anzeige des Feldes Gallery mit dem Rückgabeformat "URL":

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
if ($images) {
    foreach ($images as $imageURL) {
        // displays the image. Each %s in the string will be replaced with the related argument
        printf("<img src='%s'>",
            esc_url($imageURL));
    }
}

Mit dem "URL"-Rückgabeformat können wir die Bildgröße nicht steuern und sind nicht in der Lage, neben der URL weitere Informationen zu erhalten. Von dieser Option sollte man die Finger lassen, besser ist es, immer das "ID"-Rückgabeformat zu wählen.

Weitere Informationen finden Sie im folgenden Video und im offiziellen ACF-Artikel.

Wir haben Ihnen gezeigt, wie Sie das ACF-Galerie-Feld verwenden können, seine Optionen und zwei Möglichkeiten, es anzuzeigen. Jetzt können Sie das Feld ganz einfach überall verwenden.

Vergessen Sie nicht, dass ein View im ACF Views plugin alle Feldtypen unterstützt und Sie die Ausgabe durch Hinzufügen einiger CSS-Regeln innerhalb des View gestalten können (siehe das CSS-Code-Feld auf der Registerkarte "Advanced"). Das Tolle daran ist, dass das CSS nur auf Seiten geladen wird, auf denen Sie den Shortcode verwenden.

In der gleichen Registerkarte können Sie JS-Code hinzufügen, was ebenfalls sehr nützlich ist, wie im Fall von Galerien. Bei der Basisversion müssen Sie Ihr eigenes CSS (und wahrscheinlich JavaScript) verwenden, um den Standard-Look in eine interaktive Galerie zu verwandeln. Mit der Pro Version stehen Ihnen die Optionen Masonry und Lightbox sofort zur Verfügung, d.h. ohne jegliche Programmierung.

Wir hoffen, dass Sie diesen Artikel nützlich fanden. Für weitere Informationen über das ACF Views Plugin besuchen Sie die offizielle Website.