WPLake > Blog > Campo immagine ACF: Guida all’uso e alla visualizzazione
  • English
  • Deutsch
  • Español
  • Français

Campo immagine ACF: Guida all’uso e alla visualizzazione

Tempo di lettura: 7 minuti

-

ACF Plugin Tutorial

-

Aggiornato 06.10.23

Scoprite come funziona e si comporta il campo Immagine. Visualizzate il valore del campo manualmente o utilizzando modelli intelligenti e beneficiate della generazione automatica di markup.

Indice dei Contenuti

Informazioni sul campo immagine

#link copiato

Il tipo di campo Immagine è uno dei tanti possibili tipi di campo disponibili 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 può essere limitante. Utilizzando i campi immagine ACF, è possibile "allegare" più immagini al post/pagina o persino alla pagina delle opzioni .

È possibile aggiungere facilmente un campo immagine a qualsiasi gruppo ACF facendo clic sul pulsante "Aggiungi campo" e selezionando "Immagine" dal menu a tendina "Tipo di campo".

Nota: tenere presente che un singolo campo Immagine consente di selezionare una sola immagine. Se si desidera aggiungere una nuova immagine alla pagina, è necessario creare un nuovo campo per ogni immagine aggiuntiva. Se si desidera selezionare e memorizzare più immagini all'interno di un unico campo, si consiglia di utilizzare il campo Galleria ACF, progettato appositamente per questo scopo.

Estensioni

#link copiato

Per le immagini, le estensioni consentite sono .jpg, .jpeg, .png, .gif e .ico. È possibile trovare un elenco delle estensioni consentite per tutti i tipi di file nella pagina relativa a wordpress.org. Se si desidera consentire il caricamento di tipi di file come .svg, è necessario utilizzare dei ganci speciali.

Nota: non è possibile caricare file non di immagine nel campo Immagine ACF. Per i tipi di file come .doc o .pdf, anche con l'uso di ganci, si dovrebbe prendere in considerazione l'uso del campo ACF File, che è stato progettato per questo scopo.

Se siete interessati a conoscere i nomi dei ganci per aggiungere il supporto per altre estensioni di immagini oltre a quelle sopra elencate, vi forniamo uno snippet di codice che abilita il caricamento di .svg sul vostro sito web. È possibile personalizzarlo per l'estensione desiderata o utilizzarlo così com'è per .svg. Il codice può essere aggiunto al file functions.php. In alternativa, è possibile utilizzare il plugin Safe SVG.

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

Formati di ritorno

#link copiato

Il tipo di campo Immagine offre tre diversi formati di restituzione: Array di immagini, URL di immagini e ID di immagini. Queste scelte non influiscono sulla visualizzazione del campo o sulle opzioni disponibili per gli amministratori del sito. Tuttavia, il formato di restituzione dell'immagine selezionato determina i dati che si ricevono nel codice quando si richiede l'immagine dal database di WordPress utilizzando la funzione get_field.

Si consiglia di selezionare l'opzione 'ID immagine', in quanto offre le migliori prestazioni. È consigliabile evitare l'opzione "URL immagine", a meno che non si abbia una ragione specifica per averne bisogno, poiché fornisce solo l'URL dell'immagine senza ulteriori dettagli, il che potrebbe non essere sufficiente per le proprie esigenze.

Dopo aver aggiunto un campo immagine alla pagina di destinazione, gli amministratori possono "Aggiungere immagine" selezionando un'immagine esistente o caricandone una nuova.
Dopo aver assegnato l'immagine, è ancora possibile modificarla. Passare il cursore sull'immagine e fare clic sull'icona "Penna" per modificare i dettagli dell'immagine (come la didascalia), oppure fare clic sull'icona "Croce" per "disassegnarla" dal campo.

Dietro le quinte dell'ACF

#link copiato

Ecco il dietro le quinte di come funziona: Quando si seleziona un'immagine, l'ID dell'immagine scelta viene salvato nel Post Meta della pagina (o dell'elemento Post/CPT) corrente. Ciò significa che è possibile selezionare la stessa immagine su molte pagine diverse, senza che vengano create copie duplicate di quell'immagine.

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

È importante notare che l'ID di un'immagine viene salvato nel database indipendentemente dall'opzione "Formato di ritorno". L'opzione 'Formato di ritorno' controlla solo i dati ricevuti nel codice. In ogni caso, solo l'ID dell'immagine (allegato) viene memorizzato nel database. Per questo motivo si consiglia di utilizzare il formato di ritorno 'ID', in quanto è in linea con il formato del database e non richiede un'elaborazione aggiuntiva da parte del plugin ACF per recuperarlo.

Evitare i duplicati

#link copiato

Ogni volta che si carica una nuova immagine, viene creato un nuovo allegato nella Libreria multimediale. WordPress non può confrontare automaticamente la nuova immagine con quelle già caricate, il che significa che creerà un altro allegato anche se state caricando di nuovo la stessa immagine. Per questo motivo è fondamentale dare alle immagini nomi chiari e cercare nella Media Library prima di caricare una nuova immagine. In caso contrario, si accumuleranno duplicati della stessa immagine, con conseguente aumento dell'utilizzo dello spazio di archiviazione sul proprio account di web hosting, per non parlare di potenziali complicazioni.

La disassegnazione di un'immagine da un campo immagine non rimuove l'immagine dall'installazione di WordPress. Il file dell'immagine rimane nella Libreria multimediale, anche se è stato rimosso da tutte le pagine/post in cui è utilizzato il campo immagine. In realtà, ci sono solo alcuni scenari specifici in cui potrebbe essere necessario rimuovere completamente un'immagine dalla libreria di WordPress, ma questi esulano dallo scopo dell'articolo di oggi.

Visualizzare il campo immagine utilizzando modelli intelligenti

#link copiato

Presentiamo il componente aggiuntivo Advanced Views.

Advanced Views fornisce modelli intelligenti per la visualizzazione dei contenuti senza sforzo. È dotato di query di post integrate e di generazione automatica di template, che consentono uno sviluppo rapido pur mantenendo la flessibilità.

Chiariamo innanzitutto cosa intendiamo per "modelli" nel contesto di questo plugin: I template di Advanced Views sono costruiti sul motore di Twig. Si potrebbe pensare: "Non male, ma richiede comunque il recupero dei campi tramite PHP e la scrittura di markup da zero, per non parlare della lettura della documentazione di Twig".

È qui che il plugin brilla: "Modelli intelligenti". Ciò significa che non dobbiamo recuperare campi o creare markup manualmente da zero. Il plugin fornisce una solida base che copre la maggior parte dei casi d'uso. Se abbiamo bisogno di qualcosa di specifico, possiamo personalizzarlo facilmente. Non è bello?

Fondamenti

#link copiato

Ora diamo un'occhiata di base al funzionamento.

Il plugin introduce due nuovi tipi di post personalizzati (CPT): ACF View e ACF Card.

  • Vista per i dati dei post e gli Advanced Custom Fields
    Creiamo una vista e assegniamo uno o più campi del post; il plugin genera quindi uno shortcode che useremo per mostrare i valori dei campi agli utenti. È possibile stilizzare l'output con il campo CSS incluso in ogni vista.
  • Scheda per la selezione dei post
    Creiamo una Scheda e assegniamo i post (o gli elementi CPT), scegliamo una Vista (che sarà usata per visualizzare ogni elemento) e il plugin genera uno shortcode che useremo per visualizzare l'insieme dei post. L'elenco dei post può essere assegnato manualmente o dinamicamente con dei filtri.

Il plugin ci offre la comodità di lavorare con i CPT di WordPress già noti, occupandosi di interrogare e generare automaticamente i modelli di markup di Twig. Potete trovare maggiori informazioni sui vantaggi del plugin qui.

Per seguirci, installate il plugin Advanced 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.

Passo 1. Creazione di una vista

#link copiato

Quando si attiva il plugin Advanced Views, si noterà una nuova voce nel menu di amministrazione intitolata "Advanced Views".

All'interno del sottomenu troverete diverse voci, ma quella che dovrete usare si chiama "Advanced Views".

ACF Views provides list management via the familiar interface.
L'elenco avrà lo stesso aspetto, ma non conterrà alcun elemento View.

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

Fornire un nome alla vista . Può essere qualsiasi cosa che descriva la vista , poiché questo nome verrà visualizzato nell'elenco delle viste , rendendone più facile l'identificazione. Ad esempio, abbiamo chiamato la nostra vista "Immagine lato pagina".

ACF Views allow to assign multiple fields within your View.

Assegnazione dei campi

#link copiato

Ora è necessario assegnare un nuovo campo alla vista . Fare clic sul pulsante 'Aggiungi campo' e selezionare il 'Gruppo' dal menu a tendina. Nel nostro caso, il gruppo si chiama "Campi pagina". Quindi, selezionare il campo di destinazione dall'elenco. Nel nostro caso, il campo è denominato "Immagine laterale" (nota: il tipo di campo è indicato tra parentesi per facilitare l'identificazione). In questo caso, si dovrebbe vedere che il tipo è "immagine". Continuare scegliendo una "Dimensione immagine" dall'elenco delle dimensioni disponibili. Nel nostro caso, abbiamo selezionato "Full".

Mentre ogni vista supporta un numero illimitato di campi ACF, 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 gli shortcode sono stati generati in un blocco sul lato destro della schermata di modifica della vista . Ogni vista ha il suo shortcode con un ID unico. Pertanto, 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.

Passo 2. Incollare il codice breve al suo posto

#link copiato

Bene, ora tutto dovrebbe essere impostato per visualizzare il campo immagine. Andare alla pagina di destinazione con il campo immagine. Assicurarsi che il campo abbia un'immagine allegata e incollare lo shortcode dove si desidera nel contenuto della pagina. Per inserire il codice breve nell'editor di Gutenberg, fare clic sul pulsante più e selezionare il blocco "Shortcode" dall'elenco. Incollate il vostro shortcode nel blocco e fate clic sul pulsante "Aggiorna" per salvare il post/pagina.

Blocco Gutenberg contenente uno shortcode Advanced Views.

Visitare la pagina per visualizzare il risultato. Se si sono seguiti tutti i passaggi correttamente, si dovrebbe vedere l'immagine ACF visualizzata all'interno del contenuto.

Il campo immagine ACF viene ora visualizzato tramite uno shortcode nella pagina.

Se non si vede l'immagine, tornare indietro e modificare la pagina. Assicurarsi di aver allegato un'immagine al campo immagine ACF, poiché un campo vuoto non visualizzerà nulla.

Visualizzazione del campo immagine tramite codice PHP

#link copiato

Per visualizzare il campo immagine, dobbiamo convertire l'immagine selezionata in un tag img.

Il codice varia 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 "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));
}

Quando si usa il formato di ritorno "URL", è importante notare che non si può controllare la dimensione dell'immagine e non si ha accesso ad altre informazioni oltre all'URL stesso. Pertanto, si consiglia di evitare questa opzione e di scegliere invece il formato di restituzione "ID" per avere maggiore flessibilità e controllo.

Per ulteriori informazioni, potete guardare il video qui sotto e consultare l'articolo ufficiale dell'ACF.

ACF Image field video cover

Riflessioni finali

#link copiato

Avete imparato a utilizzare il campo Immagine ACF, le sue varie opzioni e due metodi per visualizzarlo. Grazie a queste conoscenze, è possibile incorporare facilmente questo campo nei propri contenuti.

Ricordate che potete includere più campi di tipo diverso nella vostra vista . Ad esempio, se si desidera mostrare diverse immagini con titoli in una pagina. Inoltre, è possibile stilizzare i valori dei campi utilizzando il campo del codice CSS, accessibile nella scheda Avanzate della Vista. Il CSS verrà applicato solo alle pagine in cui è stato inserito lo shortcode.

Spero che questo articolo sia stato informativo. Per ulteriori informazioni sul plugin Advanced Views, visitare il sito Web ufficiale . Lì troverete i link al canale YouTube per le esercitazioni video e l'accesso alla documentazione del plugin, che può aiutarvi a risolvere qualsiasi dubbio.

Sull'autore
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 Commenti

    Lascia un commento

    Rispondi a 

    Siate premurosi quando lasciate un commento.

    Non mostrato pubblicamente

    Got it