Campo galleria ACF: Guida all’uso e alla visualizzazione

Il campo Galleria ACF è un tipo di campo del plugin Advanced Custom Fields (ACF). Il campo ACF Gallery consente di selezionare più immagini per un singolo campo dalla libreria multimediale di WordPress (a differenza del campo ACF Image, che supporta solo una singola immagine). Gli sviluppatori lo usano comunemente per tutti i tipi di gallerie o quando devono visualizzare un insieme personalizzato di immagini su una pagina.

Una limitazione importante è 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.

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 campo Galleria ACF ha 3 diversi formati di restituzione: Array di immagini, URL di immagini e ID di immagini. È esattamente come il campo Image, ma la risposta è sempre un array. Con un array, gli elementi hanno un tipo correlato al formato di restituzione scelto. Questo non influisce sull'aspetto del campo o sulle opzioni per l'amministratore del sito. Perché il formato di restituzione della galleria controlla i dati ottenuti nel codice. Si intende quando si richiede il campo Galleria ACF dal database di WordPress utilizzando la funzione get_field.

Il nostro suggerimento è di utilizzare l'opzione 'ID immagine', in quanto è l'opzione preferita con le migliori prestazioni. Evitare di usare l'opzione "URL immagine", a meno che non sia necessaria per un motivo specifico. Infatti, non consente di ricevere alcun dettaglio sull'immagine, ma solo l'URL, che nella maggior parte dei casi non è sufficiente.

Il campo Galleria di ACF si comporta esattamente come il campo Immagine di ACF , con una differenza sostanziale: memorizza un array di ID di immagini nel Post Meta della pagina o dell'elemento del post, mentre il campo Immagine memorizza solo un ID di immagine.

In questo modo, il campo Galleria ACF funziona da mediatore tra la Libreria multimediale e l'utente. Fornisce un'interfaccia intuitiva per scegliere più immagini dalla Libreria multimediale. Ma all'interno non memorizza le immagini separatamente. Utilizza una sorta di marchio per "allegare" o "mettere in relazione" le immagini (o gli allegati, se preferite) dalla Libreria multimediale per la pagina o il post.

Ora vi mostrerò come visualizzare un campo Galleria ACF utilizzando uno shortcode.

Possiamo risolvere questo problema utilizzando i famosi shortcode di WordPress . Hanno lo stesso aspetto, ma hanno anche parole semplici in inglese tra parentesi quadre: [some-name]. Inoltre, possono accettare "argomenti" e dietro le quinte WordPress associa ogni shortcode a una funzione PHP.

Per oggi non è necessaria alcuna codifica, il che significa che non scriveremo alcuna funzione PHP. Utilizzeremo invece un ottimo plugin gratuito, chiamato ACF Views. Fornisce la funzionalità per visualizzare un campo della Galleria ACF utilizzando shortcode autogenerati.

Il plugin supporta tutti i campi ACF e consente anche di visualizzare post predefiniti e post personalizzati nelle pagine. Ma per ora ci concentreremo sul campo ACF Gallery. Leggete come visualizzare i campi ACF senza codifica per conoscere tutti i vantaggi dell'approccio shortcode.

Di seguito abbiamo allegato un video tutorial che mostra come visualizzare i campi ACF in 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 sentitevi liberi di saltare il video perché qui di seguito vi forniamo una guida completa passo-passo proprio per il campo della Galleria ACF.

Per seguire la guida è necessario installare il plugin ACF Views sul proprio sito web WordPress e non dimenticare di attivarlo. È inoltre necessario che il plugin ACF (gratuito) sia installato e attivo. Continuate quindi con i passaggi successivi.

Dopo aver attivato il plugin ACF Views, nel menu di amministrazione è disponibile una nuova scheda denominata "ACF Views".

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 ha un elenco di campi ACF assegnati ad essa, quindi è possibile creare molti elementi di Vista che visualizzano campi diversi (o un insieme di campi) per diversi post/pagine.

Dare un nome alla vista , che deve essere breve e descrittivo, perché è anche il nome che verrà mostrato nell'elenco delle viste , rendendola più facile da trovare. Abbiamo chiamato la nostra vista "Galleria di pagine".

Quando si assegnano nuovi campi nella vista . Fare clic sul pulsante 'Aggiungi campo' e selezionare il 'Gruppo' dal menu a tendina. Nel mio caso, il gruppo si chiama "Campi pagina". Ora selezionare il campo di destinazione dall'elenco a discesa, noi abbiamo selezionato "Galleria di pagine".

Nota: il tipo di campo è indicato tra le parentesi per facilitare l'identificazione. In questo modo è possibile conoscere facilmente il tipo di qualsiasi campo presente nel menu a tendina.

In questo caso, si dovrebbe vedere "(galleria)". Continuare selezionando una "Dimensione immagine" dal menu a tendina, noi abbiamo scelto "Pieno".

Se si utilizza la versione Pro del plugin, sono disponibili anche le opzioni Masonry e Lightbox. Vedere l'immagine di seguito.

Ogni vista supporta un numero illimitato di campi ACF, ma nel nostro caso assegneremo un solo campo.

Fare clic sul pulsante 'Pubblica' per salvare e pubblicare la vista . Quando la vista è pubblicata, si noterà che i codici brevi sono stati generati e sono disponibili in un blocco sul lato destro della schermata di modifica della vista. Ogni vista ha il proprio shortcode con un ID unico (la struttura dello shortcode è la stessa per tutte le viste, ma gli argomenti sono unici).

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

Premere il pulsante "Copia negli appunti" per il primo shortcode.

Ci siamo quasi, ora che tutto è pronto siamo pronti a visualizzare il campo Galleria ACF.

Visitate la pagina di destinazione con il campo Galleria ACF (assicuratevi di allegare qualche immagine), quindi incollate il codice breve copiato in qualsiasi punto del contenuto della pagina. È possibile incollare lo shortcode utilizzando l'editor di Gutenberg, facendo clic sul pulsante più e scegliendo il blocco "Shortcode" dall'elenco. Incollare lo shortcode nel blocco e fare clic sul pulsante "Aggiorna" per salvare il post/pagina.

Aprire la pagina per vedere il risultato, nel caso in cui tutto sia stato fatto correttamente si dovrebbero vedere visualizzate tutte le immagini allegate dal campo Galleria ACF.

Se non vedete la vostra galleria, dovete tornare indietro e modificare la pagina. Confermare di aver allegato alcune immagini al campo Galleria ACF, quindi ricaricare la pagina. Se per qualche motivo non si vede ancora nulla, tornare a modificare la vista e verificare di aver selezionato il campo corretto "Gruppo" dall'elenco.

Per visualizzare il campo Galleria dobbiamo trasformare le immagini selezionate dal campo in tag img.

Il codice sarà diverso a seconda del tipo di ritorno selezionato. Di seguito sono riportati degli esempi che vi aiuteranno a creare l'output. Ma tenete presente che per trasformarlo in una galleria interattiva dovrete scrivere il vostro codice CSS/JavaScript.

1. Codice PHP per visualizzare il campo Galleria con il formato "ID" di ritorno:

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

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

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

Con il formato di ritorno "URL" non possiamo controllare le dimensioni dell'immagine e non siamo in grado di ottenere altre informazioni oltre all'URL. È meglio evitare questa opzione e scegliere sempre il formato di ritorno "ID".

Per maggiori dettagli, potete guardare il video qui sotto e leggere l'articolo ufficiale dell'ACF.

Abbiamo mostrato come utilizzare il campo Galleria ACF, le sue opzioni e due modi per visualizzarlo. Ora è possibile utilizzare facilmente il campo ovunque.

Non dimenticate che una vista del plugin ACF Views supporta tutti i tipi di campo ed è possibile stilizzare l'output aggiungendo alcune regole CSS all'interno della vista (vedere il campo Codice CSS nella scheda "Avanzate"). L'aspetto positivo è che il CSS viene caricato solo nelle pagine in cui si utilizza lo shortcode.

Nella stessa scheda è possibile aggiungere codice JS, anch'esso molto utile come nel caso delle gallerie. Con la versione Basic, dovrete usare i vostri CSS (e probabilmente anche JavaScript) per trasformare l'aspetto predefinito in una galleria interattiva. Con la versione Pro, le opzioni Masonry e Lightbox saranno disponibili subito, cioè senza alcuna codifica.

Ci auguriamo che questo articolo vi sia stato utile. Per ulteriori informazioni sul plugin ACF Views, visitate il sito Web ufficiale .