WPLake > Blog > ACF-Galerie-Feld: Leitfaden zur Verwendung und Anzeige
  • English
  • Español
  • Français
  • Italiano

ACF-Galerie-Feld: Leitfaden zur Verwendung und Anzeige

Zeit zum Lesen: 7 Minuten

-

ACF Anleitungen Plugins

-

Aktualisiert 06.10.23

Lernen Sie, wie das Feld Galerie funktioniert und sich verhält. Zeigen Sie eine Galerie manuell oder mit intelligenten Vorlagen an, und nutzen Sie die Optionen Masonry und Lightbox.

Inhaltsübersicht

Über das Feld Galerie

#Link kopiert

Das ACF-Galeriefeld ist ein Feldtyp innerhalb des Advanced Custom Fields (ACF) Plugins. Es ermöglicht Ihnen, mehrere Bilder für ein einzelnes Feld direkt aus der WordPress-Mediathek auszuwählen. Dies ist besonders nützlich bei der Erstellung verschiedener Arten von Galerien oder wenn Sie eine benutzerdefinierte Sammlung von Bildern auf einer Seite präsentieren müssen. Im Gegensatz zum ACF Image Feld, das nur ein einziges Bild unterstützt, bietet das ACF Gallery Feld die Flexibilität, mehrere Bilder auszuwählen und anzuzeigen.

Hinzufügen eines Feldtyps Galerie in Advanced Custom Fields (ACF)
Sie können bei der Bearbeitung Ihrer Seite mehrere Bilder in das ACF-Galeriefeld einfügen.
Sie können Bilder leicht entfernen, indem Sie auf das 'x' klicken und sie ziehen, um sie nach Bedarf neu anzuordnen.

Erweiterungen

#Link kopiert

Für Bilder sind die folgenden Erweiterungen zulässig: .jpg, .jpeg, .png, .gif und .ico. Eine Liste der zulässigen Erweiterungen für alle Dateitypen finden Sie auf der zugehörigen wordpress.org-Seite. Wenn Sie das Hochladen von Dateitypen wie .svg erlauben möchten, müssen Sie spezielle Hooks verwenden.

Hinweis: Es ist nicht möglich, Nicht-Bilddateien in das ACF-Bildfeld hochzuladen. Für Dateitypen wie .doc oder .pdf sollten Sie, auch bei Verwendung von Hooks, das ACF File Feld verwenden, das für diesen Zweck vorgesehen ist.

Wenn Sie daran interessiert sind, die Hook-Namen zu erlernen, um die Unterstützung für weitere Bilderweiterungen als die oben aufgeführten hinzuzufügen, stellen wir einen Codeschnipsel zur Verfügung, der das Hochladen von .svg auf Ihrer Website ermöglicht. Sie können ihn für Ihre gewünschte Erweiterung anpassen oder ihn unverändert für .svg verwenden. Der Code kann in Ihre functions.php Datei eingefügt werden. Alternativ können Sie auch das Safe SVG Plugin verwenden.

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

Rückgabeformate

#Link kopiert

Das ACF-Galeriefeld bietet drei verschiedene Rückgabeformate: Bild-Array, Bild-URL und Bild-ID. Dies spiegelt das Feld Bild wider, aber die Antwort ist durchweg ein Array. Innerhalb des Arrays haben die Elemente einen Typ, der dem gewählten Rückgabeformat entspricht. Es ist wichtig zu beachten, dass dies keinen Einfluss auf das Aussehen des Feldes oder die Optionen hat, die den Website-Administratoren zur Verfügung stehen. Stattdessen bestimmt das Galerie-Rückgabeformat die Daten, die Sie im Code erhalten, insbesondere wenn Sie das ACF-Galeriefeld mit der Funktion get_field aus der WordPress-Datenbank anfordern.

Wir empfehlen die Verwendung der Option 'Image ID', um die beste Leistung zu erzielen. Sie ist die bevorzugte Wahl. Von der Option "Bild-URL" hingegen raten wir ab, es sei denn, Sie haben einen speziellen Bedarf dafür. Diese Option liefert nur die URL des Bildes ohne zusätzliche Details, was für die meisten Anwendungsfälle nicht ausreichend sein dürfte.

Hinter den ACF-Kulissen

#Link kopiert

Das ACF-Galerie-Feld funktioniert ähnlich wie das ACF-Bild-Feld, jedoch mit einem wichtigen Unterschied: Es speichert ein Array von Bild-IDs in der Post-Meta der jeweiligen Seite oder des Post-Elements. Im Gegensatz dazu speichert das Image-Feld nur eine einzige Bild-ID.

Das ACF-Galeriefeld dient im Wesentlichen als Vermittler zwischen der Medienbibliothek und Ihnen, dem Benutzer. Es bietet eine intuitive Benutzeroberfläche für die Auswahl mehrerer Bilder aus Ihrer Medienbibliothek. Intern speichert es die Bilder jedoch nicht einzeln. Stattdessen werden die Bilder (oder Anhänge) aus der Mediathek mit einer bestimmten Seite oder einem bestimmten Beitrag durch eine Art von Tagging oder "Verlinkung" verknüpft.

Galeriefeld mit intelligenten Vorlagen anzeigen

#Link kopiert

Lassen Sie uns das Advanced Views Addon vorstellen.

Advanced Views bietet intelligente Vorlagen für die mühelose Anzeige von Inhalten. Es verfügt über integrierte Post-Queries und eine automatische Vorlagenerstellung, die eine schnelle Entwicklung bei gleichzeitiger Flexibilität ermöglichen.

Lassen Sie uns zunächst klären, was wir im Zusammenhang mit diesem Plugin unter "Vorlagen" verstehen: Advanced Views-Vorlagen basieren auf der Twig-Engine. Sie werden vielleicht denken: "Nicht schlecht, aber es erfordert immer noch das Abrufen von Feldern über PHP und das Schreiben von Markup von Grund auf, ganz zu schweigen vom Lesen der Twig-Dokumentation".

Hier glänzt das Plugin: "Intelligente Vorlagen". Das bedeutet, dass wir keine Felder abrufen oder Markup manuell von Grund auf erstellen müssen. Das Plugin bietet eine solide Grundlage, die die meisten Anwendungsfälle abdeckt. Wenn wir etwas Bestimmtes benötigen, können wir es leicht anpassen. Ist das nicht schön?

Grundlagen

#Link kopiert

Werfen wir nun einen Blick auf die Funktionsweise.

Das Plugin führt zwei neue Custom Post Types (CPTs) ein: ACF-Ansicht und ACF-Karte.

  • Ansicht für Beitragsdaten und Advanced Custom Fields
    Wir erstellen eine Ansicht und weisen ein oder mehrere Beitragsfelder zu, das Plugin generiert dann einen Shortcode, mit dem wir die Feldwerte für die Benutzer anzeigen. Wir können die Ausgabe mit dem CSS-Feld gestalten, das in jeder Ansicht enthalten ist.
  • Karte für die Auswahl von Beiträgen
    Wir erstellen eine Karte und weisen Beiträge (oder CPT-Elemente) zu, wählen eine Ansicht (die für die Anzeige der einzelnen Elemente verwendet wird) und das Plugin generiert einen Shortcode, den wir für die Anzeige der Beitragsliste verwenden. Die Liste der Beiträge kann manuell oder dynamisch mit Filtern zugewiesen werden.

Das Plugin bietet uns die Möglichkeit, mit den vertrauten WordPress-CPTs zu arbeiten, während es sich um die Abfrage und automatische Generierung von Twig-Markup-Vorlagen kümmert. Weitere Informationen über die Vorteile des Plugins finden Sie hier.

Installieren Sie das Plugin Advanced Views auf Ihrer WordPress-Website und vergessen Sie nicht, es zu aktivieren. Sie müssen auch das (kostenlose) ACF-Plugin installieren und aktivieren. Fahren Sie dann mit den nächsten Schritten fort.

Schritt 1. Erstellen einer Ansicht

#Link kopiert

Wenn Sie das Advanced Views Plugin aktivieren, werden Sie einen neuen Eintrag in Ihrem Admin-Menü mit dem Titel "Advanced Views" sehen.

Innerhalb des Untermenüs finden Sie mehrere Einträge, aber derjenige, den Sie verwenden müssen, heißt 'Advanced Views'

ACF Views provides list management via the familiar interface.
Ihre Liste sieht genauso aus, aber sie enthält keine View Elemente.

Geben Sie einen Namen für Ihre Ansicht an. Es kann alles sein, was die Ansicht beschreibt, da dieser Name in der Liste der Ansichten angezeigt wird, wodurch sie leichter zu identifizieren ist. Wir haben zum Beispiel unsere Ansicht "Seitengalerie" genannt.

ACF Views allow to assign multiple fields within your View.

Zuweisung von Feldern

#Link kopiert

Wenn Sie Ihrer Ansicht neue Felder zuweisen möchten, klicken Sie auf die Schaltfläche "Feld hinzufügen" und wählen Sie Ihre "Gruppe" aus dem Dropdown-Menü. In meinem Fall ist die Gruppe mit "Seitenfelder" beschriftet. Wählen Sie dann das Zielfeld aus dem Dropdown-Menü aus; in diesem Fall haben wir "Seitengalerie" ausgewählt.

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

In diesem Fall sollten Sie "(gallery)" in der Auswahlliste sehen. Wählen Sie eine "Bildgröße" aus der Liste; wir haben uns für "Voll" entschieden.

Wenn Sie die Pro-Version des Plugins verwenden, haben Sie auch Zugriff auf die Optionen Masonry und Lightbox. Zur Veranschaulichung sehen Sie sich bitte den Screenshot unten an.

Die Optionen "Mauerwerk" und "Leuchtkasten" sind ausschließlich für Pro-Nutzer verfügbar.

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

Klicken Sie auf die Schaltfläche 'Veröffentlichen', um Ihre Ansicht zu speichern und zu veröffentlichen. Sobald Ihre Ansicht veröffentlicht ist, werden Sie feststellen, dass Shortcodes generiert wurden und in einem Block auf der rechten Seite des Bearbeitungsbildschirms Ihrer Ansicht verfügbar sind. Jede Ansicht hat einen eigenen Shortcode mit einer eindeutigen ID (die Shortcode-Struktur ist für alle Ansichten 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.

Schritt 2. Fügen Sie den Shortcode an der richtigen Stelle ein

#Link kopiert

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

Besuchen Sie Ihre Zielseite, die das ACF-Galerie-Feld enthält (stellen Sie sicher, dass Sie einige Bilder angehängt haben). Fügen Sie dann den kopierten Shortcode an einer beliebigen Stelle innerhalb des Seiteninhalts ein. Wenn Sie den Gutenberg-Editor verwenden, 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.

Gutenberg-Block mit einem Advanced Views-Shortcode.

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

Das ACF-Galerie-Feld wird jetzt auf der Seite mit einem Shortcode angezeigt (mit einem einfachen Erscheinungsbild).
Galerie mit aktivierter Option "Mauerwerk" (nur in der Pro-Version verfügbar).
Die Option "Leuchtkasten" ermöglicht das Zoomen für jedes Bild in der Galerie (nur in der Pro-Version verfügbar).

Wenn Sie Ihre Galerie nicht sehen können, folgen Sie diesen Schritten:

  1. Gehen Sie zurück und bearbeiten Sie die Seite.
  2. Bestätigen Sie, dass Sie einige Bilder in das Feld ACF-Galerie eingefügt haben.
  3. Laden Sie die Seite neu.

Wenn Sie aus irgendeinem Grund immer noch nichts sehen, kehren Sie zur Bearbeitung Ihrer Ansicht zurück und vergewissern Sie sich, dass Sie das richtige Feld "Gruppe" aus der Liste ausgewählt haben.

Galeriefeld mit PHP-Code anzeigen

#Link kopiert

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

Der Code variiert je nach ausgewähltem Rückgabetyp. Im Folgenden finden Sie Beispiele, die Ihnen bei der Erstellung der Ausgabe helfen können. Bitte beachten Sie jedoch, dass Sie für die Umwandlung in eine interaktive Galerie Ihren eigenen CSS- und JavaScript-Code schreiben müssen.

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

<?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 "Array" Rückgabeformat:

<?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 "Galerie" mit der "URL" Rückgabeformat:

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

Bei der Verwendung des "URL"-Rückgabeformats ist es wichtig zu beachten, dass Sie die Bildgröße nicht kontrollieren können und außer der URL selbst keinen Zugriff auf zusätzliche Informationen haben. Daher ist es ratsam, diese Option zu vermeiden und stattdessen das Rückgabeformat "ID" zu wählen, das mehr Flexibilität und Kontrolle bietet.

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

ACF Gallery field with code, video cover

Abschließende Gedanken

#Link kopiert

Wir haben die Verwendung des ACF-Galerie-Feldes, seine verschiedenen Optionen und zwei Methoden zu seiner Anzeige gezeigt. Sie sollten nun gut gerüstet sein, um dieses Feld in Ihren Projekten effektiv zu nutzen.

Denken Sie daran, dass eine Ansicht im Advanced Views Plugin alle Feldtypen unterstützt und Sie die Ausgabe durch Hinzufügen von CSS-Regeln innerhalb der Ansicht gestalten können (verwenden Sie das CSS-Code-Feld auf der Registerkarte "Erweitert"). Der Vorteil dieses Ansatzes ist, dass das CSS nur auf Seiten geladen wird, auf denen Sie den Shortcode eingebunden haben.

Auf der gleichen Registerkarte "Erweitert" können Sie auch JavaScript-Code einbinden, was besonders für die Verbesserung von Funktionen wie Galerien nützlich ist. Bei der Basisversion müssen Sie Ihr benutzerdefiniertes CSS (und möglicherweise JavaScript) anwenden, um die Standardansicht in eine interaktive Galerie zu verwandeln. Mit der Pro-Version sind die Optionen "Masonry" und "Lightbox" jedoch ohne Programmieraufwand verfügbar.

Wir hoffen, dass Sie diesen Artikel hilfreich fanden. Weitere Informationen über das Plugin Advanced Views finden Sie auf der offiziellen Website .

Über den Autor
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Kommentare

    Hinterlassen Sie einen Kommentar

    Antwort an 

    Bitte seien Sie rücksichtsvoll, wenn Sie einen Kommentar hinterlassen.

    Nicht öffentlich gezeigt

    Got it