ACF-Bildfeld: Leitfaden zur Verwendung und Anzeige

Der Feldtyp Bild ist einer von vielen möglichen Feldtypen im Advanced Custom Fields (ACF) Plugin. Mit dem Image-Feld können Sie ein beliebiges Bild aus der WordPress-Mediathek auswählen oder ein neues Bild hochladen.

WordPress-Beiträge und -Seiten verfügen zwar über ein eingebautes Feld "Featured Image", aber dieses Feld erlaubt nur ein einziges Bild für den gesamten Beitrag/die gesamte Seite, was eine Einschränkung darstellt. Mit den ACF-Bildfeldern können Sie mehrere Bilder an Ihren Beitrag/die Seite oder sogar an die Seite mit den Optionen "anhängen".

Aber bedenken Sie, dass ein Image-Feld nur die Auswahl eines einzigen Bildes erlaubt. Um also ein neues Bild zu Ihrer Seite hinzuzufügen, müssen Sie ein neues Feld erstellen. Wenn Sie mehrere Bilder in einem Feld auswählen und speichern möchten, verwenden Sie das ACF-Galerie-Feld, das für diesen Zweck konzipiert ist.

Eine weitere 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 related wordpress.org page. Wenn Sie das Hochladen von z.B. .svg erlauben wollen, müssen Sie spezielle Hooks verwenden.

Es gibt keine Möglichkeit, Nicht-Bilddateien in das ACF-Bildfeld hochzuladen. Zum Beispiel können Sie keine .doc, oder .pdf hochladen, auch nicht mit den Hooks. Hierfür müssen Sie das ACF File Feld verwenden, das dafür vorgesehen ist.

Wenn Sie also die Hook-Namen wissen wollen, um eine andere Bilderweiterung als die oben aufgelistete hinzuzufügen, stellen wir Ihnen ein Code-Snippet zur Verfügung, das 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);

Der Feldtyp Bild hat 3 verschiedene Rückgabeformate: Bild-Array, Bild-URL und Bild-ID. Dies hat keinen Einfluss auf das Aussehen des Feldes oder die Optionen für Website-Administratoren. Das Bild-Rückgabeformat steuert jedoch, welche Daten Sie im Code erhalten, wenn Sie dieses Bild mit der Funktion get_field aus der WordPress-Datenbank anfordern.

Ich schlage vor, dass Sie die Option "Image ID" wählen, da dies die beste Option für die Leistung ist. Vermeiden Sie die Option "Bild-URL" (es sei denn, Sie benötigen sie aus einem bestimmten Grund), da Sie damit keine Details über das Bild erhalten, sondern nur die URL, was wirklich nicht ausreicht.

Hier ein Blick hinter die Kulissen. Wenn Sie ein Bild auswählen, wird eine ID des ausgewählten Bildes in der Post Meta der aktuellen Seite (oder des Post/CPT-Elements) gespeichert. So können Sie dasselbe Bild auf vielen verschiedenen Seiten auswählen und es werden keine Duplikate des Bildes erstellt.

Wenn Sie ein neues Bild über ein beliebiges Bildfeld hinzufügen, lädt ACF dieses Bild physisch in Ihre WordPress-Installation hoch (in den Ordner wp-content/uploads). Dann wird ein neuer Anhang (mit diesem Bild) erstellt und die ID des Anhangs in der aktuellen Post/Page-Meta gespeichert.

Die ID eines Bildes wird unabhängig von der Option "Rückgabeformat" in der Datenbank gespeichert. Die Option "Rückgabeformat" steuert also nur, welche Daten Sie im Code erhalten. Aber in jedem Fall wird nur die ID eines Bildes (Anhang) in der Datenbank gespeichert. Deshalb habe ich empfohlen, das Rückgabeformat "ID" zu verwenden, da es dem Datenbankformat entspricht und keine zusätzliche Arbeit für das ACF-Plugin erfordert, um es abzurufen.

Jeder neue Upload erzeugt also einen neuen Anhang in der Mediathek. WordPress kann das neue Bild nicht mit den bereits hochgeladenen Bildern vergleichen, d.h. es wird ein weiterer Anhang erstellt, auch wenn Sie das gleiche Bild erneut hochladen. Deshalb ist es so wichtig, den Bildern eindeutige Namen zu geben und zunächst die Mediathek zu durchsuchen, bevor Sie ein neues Bild hochladen. Andernfalls werden Sie viele Duplikate desselben Bildes haben, was wiederum mehr Speicherplatz auf Ihrem Webhosting-Konto verbraucht, ganz zu schweigen von den Kopfschmerzen, die Sie später haben werden.

Das Aufheben der Zuweisung eines Bildes aus einem Bildfeld entfernt das Bild nicht aus Ihrer WordPress-Installation. Die Bilddatei bleibt in Ihrer Mediathek, auch wenn Sie sie von allen Seiten/Beiträgen, auf denen sich das Bildfeld befindet, entfernt haben. Tatsächlich gibt es nur wenige Gründe, warum Sie ein Bild vollständig aus Ihrer WordPress-Bibliothek entfernen müssen. Aber das würde den Rahmen des heutigen Artikels sprengen.

Shortcodes sind eine leistungsstarke WordPress-Funktion. Eigentlich sind es nur Schlüsselwörter, die WordPress mit einer PHP-Funktion verknüpft. Sie sehen wie folgt aus, mit Wörtern in eckigen Klammern: [irgendein-Name] und können Argumente akzeptieren, zum Beispiel [irgendein-Name erstes-Argument="erster-Wert"].

Aber wir werden keinen PHP-Code schreiben. Wir werden ein großartiges kostenloses Plugin namens ACF Views verwenden, um Bildfelder ohne Programmierung mit generierten Shortcodes anzuzeigen.

Das ACF Views Plugin ermöglicht es Ihnen, Beiträge und ihre ACF-Felder mit Hilfe von Shortcodes anzuzeigen. Wie Sie sich vorstellen können, hat das Plugin eine breite Palette von Möglichkeiten und unterstützt auch alle ACF-Feldtypen. Aber wir werden uns heute auf die Anzeige von Bildern konzentrieren. Lesen Sie wie Sie ACF-Felder ohne Programmierung anzeigen, um alle Vorteile des Shortcode-Ansatzes kennenzulernen.

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

Um der Anleitung zu folgen, installieren Sie das ACF Views Plugin auf Ihrer WordPress Seite und denken Sie daran, es zu aktivieren. Außerdem müssen Sie das (kostenlose) ACF-Plugin installieren und aktivieren. Fahren Sie dann mit den nächsten Schritten fort.

Wenn Sie das ACF Views Plugin aktiviert haben, sehen Sie einen neuen Punkt in Ihrem Admin-Menü, der "ACF Views" heißt.

In dem Untermenü gibt es mehrere Einträge, aber wir brauchen nur den einen mit der Bezeichnung "ACF Views".

Besuchen Sie die Registerkarte ACF-Ansichten und 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. Jede Ansicht ist eine Liste von ACF-Feldern, die angezeigt werden sollen, so dass Sie viele verschiedene Ansichten haben können, um verschiedene Felder (oder Gruppen von Feldern) für verschiedene Beiträge/Seiten anzuzeigen.

Gebe einen Namen für deine Ansicht. Dies ist der Name, der in der Liste der Views angezeigt wird, um sie leichter zu finden. Ich habe meine View "Page side image" genannt.

Nun müssen Sie Ihrer Ansicht ein neues Feld zuweisen. Klicken Sie auf die Schaltfläche "Feld hinzufügen" und wählen Sie Ihre "Gruppe" aus dem Dropdown-Menü. In unserem Fall heißt die Gruppe "Seitenfelder". Wählen Sie dann das Zielfeld aus der Liste aus. In unserem Fall heißt das Feld "Seitenbild". (Hinweis: Der Feldtyp ist zur leichteren Identifizierung in Klammern angegeben). In diesem Fall sollten Sie sehen, dass der Typ ein "Bild" ist. Fahren Sie fort, eine "Bildgröße" aus der Liste der verfügbaren Größen zu wählen, in unserem Fall haben wir "Voll" gewählt.

Jede Ansicht unterstützt eine unbegrenzte Anzahl von ACF-Feldern, aber in unserem Fall werden wir nur eines verwenden.

Klicken Sie auf die Schaltfläche "Veröffentlichen", um Ihre Ansicht zu speichern und zu veröffentlichen. Nachdem dein View veröffentlicht wurde, wirst du feststellen, dass Shortcodes in einem Block auf der rechten Seite deines View Bearbeitungsbildschirms erstellt wurden. Jede Ansicht hat ihren eigenen Shortcode mit einer eindeutigen ID. Die Struktur des Shortcodes ist also für alle Views gleich, aber die Argumente sind eindeutig.

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

Klicken Sie auf die Schaltfläche 'In die Zwischenablage kopieren' für den ersten Shortcode.

Okay, jetzt sollte alles bereit sein, um das Bildfeld anzuzeigen. Besuchen Sie die Zielseite mit dem Bildfeld. Vergewissern Sie sich, dass dem Feld ein Bild angehängt ist, und fügen Sie dann den Shortcode an einer beliebigen Stelle im Seiteninhalt ein. Um den Shortcode mit dem Gutenberg-Editor einzufü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.

Besuchen Sie die Seite, um das Ergebnis zu sehen, und wenn Sie alles richtig gemacht haben, sollten Sie Ihr ACF-Bild im Inhalt sehen.

Wenn Sie Ihr Bild nicht sehen können, gehen Sie zurück und bearbeiten Sie die Seite. Vergewissern Sie sich, dass Sie ein Bild an das ACF-Bildfeld angehängt haben, denn wenn das Feld leer ist, kann es nichts anzeigen.

Um das Bildfeld anzuzeigen, müssen wir das ausgewählte Bild in den img-Tag verwandeln.

Der Code wird je nach ausgewähltem Rückgabetyp unterschiedlich sein. Nachfolgend finden Sie Beispiele.

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

// don't forget to replace 'image' with your field name
$imageID = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageID) {
    // creates the img tag
    echo wp_get_attachment_image($imageID, $size);
}

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

<?php

// don't forget to replace 'image' with your field name
$imageData = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageData) {
    // displays the image. Each %s in the string will be replaced with the related argument
    printf("<img src='%s' alt='%s'>",
        esc_attr($imageData['size'][$size]), esc_attr($imageData['alt']));
}

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

// don't forget to replace 'image' with your field name
$imageURL = get_field('image');

if ($imageURL) {
    // displays the image. Each %s in the string will be replaced with the related argument
    printf("<img src='%s'>",
        esc_attr($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. Daher sollten Sie von dieser Option Abstand nehmen. Es ist immer besser, das "ID"-Rückgabeformat zu wählen.

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

Sie haben gelernt, wie man das ACF-Bildfeld verwendet, seine Optionen und zwei Möglichkeiten, es anzuzeigen. Jetzt können Sie das Feld ganz einfach überall verwenden.

Vergessen Sie nicht, dass Sie weitere Felder verschiedener Typen zu Ihrer Ansicht hinzufügen können. Zum Beispiel, wenn Sie mehrere Bilder mit Titeln auf einer Seite anzeigen wollen. Und die Feldwerte können mit Hilfe des CSS-Code-Feldes gestaltet werden, siehe Registerkarte "Erweitert" der Ansicht. Dieses CSS wird nur auf Seiten ausgegeben, auf denen Sie den Shortcode verwenden.

Ich hoffe, dieser Artikel war hilfreich. Weitere Informationen über das ACF Views Plugin finden Sie auf der offiziellen Website, dort finden Sie Links zum YouTube-Kanal für Video-Tutorials und Links zur Plugin-Dokumentation, die Ihnen bei Fragen weiterhelfen.