Campo immagine ACF: Guida all’uso e alla visualizzazione

Il tipo di campo Immagine è uno dei tanti tipi di campo possibili nel plugin Advanced Custom Fields (ACF). Il campo Immagine consente di selezionare qualsiasi immagine dalla Libreria multimediale di WordPress o di caricarne una nuova.

Sebbene i post e le pagine di WordPress dispongano di un campo immagine in primo piano, questo campo consente solo una singola immagine per l'intero post/pagina, il che è limitante. Utilizzando i campi immagine ACF è possibile "allegare" più immagini al post/pagina o anche alla pagina delle opzioni.

Ma tenete presente che un campo Immagine permette di selezionare solo una singola immagine. Quindi, per aggiungere una nuova immagine alla pagina, è necessario creare un nuovo campo. Se si desidera selezionare e memorizzare più immagini all'interno di un campo, utilizzare il campo Galleria ACF, che è stato progettato per questo.

Un'altra importante limitazione è l'estensione dei file. È possibile caricare solo file con le estensioni consentite. Per le immagini sono consentite le estensioni .jpg, .jpeg, .png, .gif e .ico. L'elenco delle estensioni consentite per tutti i tipi di file è disponibile nella pagina relativa a wordpress.org. Se si desidera consentire il caricamento, ad esempio, di .svg, è necessario utilizzare dei ganci speciali.

Non è possibile caricare file non di immagine nel campo Immagine ACF. Ad esempio, non è possibile caricare .doc, o .pdf nemmeno con i ganci. Per questo obiettivo, è necessario utilizzare il campo File ACF, che è stato progettato per questo scopo.

Quindi, se volete conoscere i nomi dei ganci per aggiungere un'altra estensione di immagine oltre a quelle sopra elencate, vi forniamo uno snippet di codice che consente di caricare .svg sul vostro sito web. È possibile modificarlo per l'estensione desiderata o utilizzarlo così com'è per .svg. Il codice può essere aggiunto al vostro functions.php.

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

Il tipo di campo Immagine ha 3 diversi formati di restituzione: Array di immagini, URL di immagini e ID di immagini. Questo non influisce sull'aspetto o sulle opzioni del campo per gli amministratori del sito. Tuttavia, il formato di restituzione dell'immagine controlla i dati che si ricevono nel codice quando si richiede l'immagine dal database di WordPress utilizzando la funzione get_field.

Suggerisco di scegliere l'opzione "ID immagine", in quanto è la migliore per le prestazioni. Evitare l'opzione "URL immagine" (a meno che non sia necessaria per un motivo specifico) perché non consente di ottenere alcun dettaglio sull'immagine, ma solo l'URL, che non è sufficiente.

Ecco uno sguardo al dietro le quinte. Quando si sceglie un'immagine, viene salvato un ID dell'immagine selezionata nel Post Meta della pagina (o dell'elemento Post/CPT) corrente. In questo modo è possibile selezionare la stessa immagine su molte pagine diverse e non si creeranno duplicati di quell'immagine.

Quando si aggiunge una nuova immagine utilizzando un qualsiasi campo immagine, ACF carica fisicamente l'immagine nell'installazione di WordPress (nella cartella wp-content/uploads). Quindi crea un nuovo allegato (con questa immagine) e salva l'ID dell'allegato nel meta del post/pagina corrente.

L'ID di un'immagine viene salvato nel database indipendentemente dall'opzione "Formato di ritorno". Quindi l'opzione 'Formato di ritorno' controlla solo i dati ricevuti nel codice. In ogni caso, solo l'ID di un'immagine (allegato) sarà salvato nel database. Per questo motivo ho consigliato di usare il formato di ritorno 'ID', in quanto si adatta al formato del database e non richiede un lavoro supplementare da parte del plugin ACF per recuperarlo.

Quindi ogni nuovo caricamento crea un nuovo allegato nella Libreria multimediale. WordPress non può confrontare la nuova immagine con quelle già caricate, il che significa che creerà un altro allegato anche se si carica di nuovo la stessa immagine. Ecco perché è così importante dare alle immagini nomi chiari e cercare nella Media Library prima di caricare una nuova immagine. In caso contrario, si avranno molti duplicati della stessa immagine e, di conseguenza, si utilizzerà più spazio sul proprio account di web hosting, per non parlare dei grattacapi che ne deriveranno.

La mancata assegnazione di un'immagine da un campo immagine non rimuove l'immagine dall'installazione di WordPress. Il file dell'immagine rimarrà nella Libreria multimediale, anche se è stato rimosso da tutte le pagine/post in cui si trova il campo immagine. In realtà, ci sono solo pochi motivi per cui è necessario rimuovere completamente un'immagine dalla libreria di WordPress. Ma non rientrano nello scopo dell'articolo di oggi.

Gli shortcode sono una potente funzione di WordPress. In realtà sono solo frasi chiave che WordPress associa a una funzione PHP. Hanno questo aspetto, con le parole tra parentesi quadre: [some-name] e possono accettare argomenti, ad esempio [some-name first-argument="first-value"].

Ma non scriveremo alcun codice PHP. Utilizzeremo un ottimo plugin gratuito, chiamato ACF Views, per visualizzare i campi immagine senza doverli codificare, utilizzando gli shortcode generati.

Il plugin ACF Views consente di visualizzare i post e i relativi campi ACF utilizzando gli shortcode. Come si può immaginare, il plugin ha un'ampia gamma di funzionalità e supporta anche tutti i tipi di campi ACF. Ma per oggi ci concentreremo sulla visualizzazione delle immagini. Leggete come visualizzare i campi ACF senza codifica per conoscere tutti i vantaggi dell'approccio tramite shortcode.

Di seguito abbiamo allegato un video tutorial che mostra come visualizzare i campi ACF su una singola pagina utilizzando il metodo shortcode. Il video è comune a tutti i tipi di campi ACF. Altri video tutorial sono disponibili sul canale ufficiale di YouTube .

Ma non esitate a saltare il video, perché di seguito vi forniamo una guida completa passo-passo proprio per il campo immagine ACF.

Per seguirla, installate il plugin ACF Views sul vostro sito WordPress e ricordatevi di attivarlo. È inoltre necessario che il plugin ACF (gratuito) sia installato e attivo. Continuate quindi con i passi successivi.

Una volta attivato il plugin ACF Views, si vedrà una nuova voce nel menu di amministrazione, chiamata "ACF Views".

Nel sottomenu ci sono diverse voci, ma a noi servirà solo quella chiamata "ACF Views".

Visitare la scheda Viste ACF, fare clic sul pulsante 'Aggiungi nuovo' per creare una vista .

Nota: il termine "View" è il nome dato al tipo di post speciale fornito dal plugin. Ogni Vistaè un elenco di campi ACF da visualizzare, quindi si possono avere molte diverse Visteper visualizzare diversi campi (o insiemi di campi) per diversi post/pagine.

Dare un nome alla vista. Può essere qualsiasi cosa che descriva la Vista, questo è il nome che verrà visualizzato nell'elenco delle Viste per facilitarne la ricerca. Ho chiamato la mia vista "Immagine lato pagina".

Ora è necessario assegnare un nuovo campo alla vista . Fare clic sul pulsante "Aggiungi campo" e selezionare il "Gruppo" dall'elenco a discesa. Nel nostro caso, il gruppo si chiama "Campi pagina". Quindi selezionare il campo di destinazione dall'elenco. Nel nostro caso, il campo si chiama "Immagine laterale". (Nota: il tipo di campo è indicato tra parentesi per facilitare l'identificazione). In questo caso, si dovrebbe vedere che il tipo è un'"immagine"; continuare a scegliere una "Dimensione immagine" dall'elenco delle dimensioni disponibili, nel nostro caso abbiamo scelto "Intero".

Ogni vista supporta un numero illimitato di campi ACF, ma nel nostro caso ne useremo solo uno.

Fare clic sul pulsante 'Pubblica' per salvare e pubblicare la vista . Dopo che la vista è stata pubblicata, si noterà che i codici brevi sono stati generati in un blocco sul lato destro della schermata di modifica della vista. Ogni vista ha il proprio shortcode con un ID univoco. Quindi la struttura del codice breve è la stessa per tutte le viste, ma gli argomenti sono unici.

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

Fare clic sul pulsante "Copia negli appunti" per il primo shortcode.

Ok, ora dovrebbe essere tutto pronto per visualizzare il campo immagine. Visitare la pagina di destinazione con il campo immagine. Assicurarsi che il campo abbia un'immagine allegata e incollare lo shortcode in qualsiasi punto del contenuto della pagina. Per incollare lo shortcode con l'editor di Gutenberg, fare clic sul pulsante più e scegliere il blocco "Shortcode" dall'elenco. Incollare il codice breve nel blocco e fare clic sul pulsante "Aggiorna" per salvare il post/pagina.

Visitate la pagina per vedere il risultato e, se avete fatto tutto correttamente, dovreste vedere la vostra immagine ACF visualizzata nel contenuto.

Se non si vede l'immagine, tornare indietro e modificare la pagina. Assicuratevi di aver allegato un'immagine al campo immagine ACF, perché se il campo è vuoto non avrà nulla da visualizzare.

Per visualizzare il campo immagine dobbiamo trasformare l'immagine selezionata nel tag img.

Il codice sarà diverso a seconda del tipo di ritorno selezionato. Di seguito sono riportati alcuni esempi.

1. Codice PHP per visualizzare il campo immagine con il "ID" Formato di ritorno:

// 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. Codice PHP per visualizzare il campo Immagine con "Array" Formato di ritorno:

<?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. Codice PHP per visualizzare il campo Immagine con l' "URL" Formato di ritorno:

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

Con il formato di ritorno "URL" non si può controllare la dimensione dell'immagine e non si possono ottenere altre informazioni oltre all'URL. Quindi è meglio evitare questa opzione. È sempre meglio scegliere il formato di ritorno "ID".

Per ulteriori dettagli, guardate il video qui sotto e leggete l'articolo ufficiale dell'ACF.

Avete imparato a usare il campo Immagine ACF, le sue opzioni e due modi per visualizzarlo. Ora è possibile utilizzare facilmente il campo ovunque.

Non dimenticate che potete aggiungere altri campi di tipo diverso alla vostra vista . Ad esempio, nel caso in cui si vogliano visualizzare più immagini con titoli in una pagina. I valori dei campi possono essere stilizzati utilizzando il campo del codice CSS, vedere la scheda Avanzate della vista. Il CSS verrà stampato solo nelle pagine in cui si utilizza lo shortcode.

Spero che questo articolo sia stato utile. Potete trovare ulteriori informazioni sul plugin ACF Views sul sito ufficiale , dove potete trovare i link al canale YouTube per i video tutorial e i link alla documentazione del plugin che vi aiuterà con qualsiasi domanda.