Aggiunta e rimozione di immagini con WordPress Media Uploader

Nel post precedente di questa serie, abbiamo iniziato a lavorare con l'ultima iterazione di WordPress Media Uploader per ottenere una comprensione più chiara di come iniziare a incorporarlo nei nostri progetti.

La parte difficile di lavorare con questa nuova funzionalità (bene, nuova dal 3.5) è che non è ben documentato come altre funzionalità. Ovviamente questo lascia molti sviluppatori, specialmente i principianti, che si grattano la testa per iniziare. Accoppia questo con una revisione completa del sistema sottostante e hai molto da coprire.

Sulla base del feedback del primo articolo, esamineremo un po 'di più l'ambito di questa serie. In questo articolo, esamineremo praticamente l'applicazione della funzionalità che abbiamo introdotto nell'ultimo articolo. Quindi, in un articolo di follow-up (o forse più di un articolo di follow-up) vedremo alcuni dei punti più fini di come funziona Media Uploader.

Raccogliendo da dove eravamo partiti

Nell'ultimo post, abbiamo iniziato a lavorare su un plug-in che ha introdotto un'immagine "Footer in primo piano" nella parte inferiore di ciascun post, se è stata selezionata un'immagine. Questa meta-scatola è disponibile sia per i tipi di post che per quelli di pagine.

Fino a questo punto, abbiamo aggiunto con successo la meta-box, lanciato il WordPress Media Uploader e selezionato un'immagine da utilizzare come immagine in primo piano, ma non abbiamo effettivamente fatto nulla con le informazioni che ci vengono restituite da Media Uploader.

In questo post, continueremo a implementare la funzionalità in modo da disporre delle immagini nella parte inferiore dei nostri post. Dopodiché, rivolgeremo la nostra attenzione ad alcuni altri dettagli tecnici delle API che sono a nostra disposizione.

Per riprendere esattamente da dove eravamo rimasti, dobbiamo essere in grado di replicare la funzionalità offerta dalla meta box standard "Immagine in primo piano". Per fare questo:

1. Dobbiamo acquisire informazioni da Media Uploader
2. Mostra l'immagine che è stata selezionata
3. Dimensionare correttamente l'immagine selezionata
4. Imposta un'opzione per rimuovere l'immagine

Chiaramente, abbiamo il nostro lavoro tagliato fuori per noi.

Prima di noi nulla, assicurati di aggiornare la funzione renderMediaUploader per accettare $ come parametro in modo da poter utilizzare jQuery nei nostri esempi.

La dichiarazione della funzione dovrebbe assomigliare a questa:

function renderMediaUploader ($) ...

E la chiamata alla funzione dovrebbe ora apparire come questa:

renderMediaUploader ($);

Ora, iniziamo.

1. Cattura l'immagine

Dopo aver selezionato un'immagine da Media Uploader, i dati ti verranno restituiti in JavaScript. Nello specifico, i dati ci verranno restituiti in JSON. Questo ci permetterà di analizzare varie proprietà dell'immagine in modo che possiamo renderizzarla e salvarla insieme al nostro post.

Ma prima, aggiorniamo il nostro codice. Trova la riga di codice in admin.js che assomiglia a questo:

file_frame.on ('insert', function () / ** * Tratteremo questo nella prossima versione. * /);

E sostituirlo con questo:

file_frame.on ('insert', function () // Legge i dati JSON restituiti da Media Uploader json = file_frame.state (). get ('selection') .first (). toJSON (););

Ovviamente, questo non è niente di particolarmente complicato; tuttavia, ricorda di aggiungere jSON come una variabile definita nella parte superiore del file insieme a file_frame e image_data.

Se sei curioso di sapere cosa viene restituito, sentiti libero di scaricare il contenuto di jSON nel tuo debugger della console preferito. Non lo faremo in questo particolare articolo, ma potremmo fare di più in futuro in articoli di approfondimento.

2. Visualizza l'immagine selezionata

Per consentirci di visualizzare l'immagine selezionata, dobbiamo assicurarci di avere un elemento immagine nella nostra meta-box accessibile tramite JavaScript, in modo che possiamo aggiornare i suoi attributi ogni volta che un'immagine viene selezionata.

Nel views / admin.php, aggiungiamo il seguente codice al nostro modello. Questo contiene l'elemento immagine vuoto che useremo per rendere l'immagine.

 Imposta l'immagine in primo piano 
 
  

Nota che stiamo sfruttando la classe CSS di WordPress nascosto per nascondere il contenitore. Usando JavaScript, rimuoveremo questa classe per visualizzare l'immagine (e fondamentalmente faremo il contrario per nascondere l'immagine e visualizzare l'ancora per selezionare di nuovo un'immagine).

Ora, possiamo rivisitare il codice JavaScript e rendere l'immagine ogni volta che è stata selezionata. Dobbiamo fare due cose:

1. Nascondi l'ancora per consentire all'utente di selezionare l'immagine
2. Mostra l'immagine in primo piano nel contenitore

Per fare questo, rivisitiamo il codice JavaScript che abbiamo visto in precedenza nell'articolo. Dopo aver recuperato i dati JSON, assicuriamoci di avere un URL di un'immagine e poi procederemo.

file_frame.on ('insert', function () // Legge i dati JSON restituiti da Media Uploader json = file_frame.state (). get ('selection') .first (). toJSON (); // Primo, assicurati di avere l'URL di un'immagine da visualizzare se (0> $ .trim (json.url.length)) return; // Dopo di ciò, imposta le proprietà dell'immagine e mostrale $ ('#funzionata -footer-image-container ') .children (' img ') .attr (' src ', json.url) .attr (' alt ', json.caption) .attr (' title ', json.title) .show () .parent () .removeClass ('hidden'); // Successivamente, nasconde l'ancora responsabile per consentire all'utente di selezionare un'immagine $ ('# featured-footer-image-container') .prev () .hide ( ););

Chiaramente, il codice è commentato per spiegare cosa sta succedendo, ma ci stiamo affidando a jQuery un po 'per assicurarci di mostrare e nascondere correttamente gli elementi.

Innanzitutto, stiamo controllando la proprietà URL di jSON per assicurarsi che la sua lunghezza sia maggiore di zero. Mi piace usare $ .trim per fare ciò come una pratica di codifica difensiva. Se è uguale a zero, allora torneremo perché non abbiamo alcuna immagine da visualizzare.

Dopo ciò, sfruttiamo il nuovo div elemento che abbiamo creato nel passaggio precedente. Prendiamo l'elemento dell'immagine tramite il bambini() funzione e quindi abbiamo impostato il suo src, alt, e titolo attribuisce tutto basato su proprietà accessibili tramite jSON oggetto.

Da lì, selezioniamo il contenitore principale dell'immagine e quindi rimuoviamo la classe nascosta.

Dopo tutto, usiamo il In primo piano-footer-image-container elemento come punto da cui possiamo accedere all'ancora - in questo caso, è l'elemento precedente - e poi lo nascondiamo.

A questo punto, l'immagine dovrebbe apparire nella casella dei meta-termini.

Ma abbiamo un ovvio problema: l'immagine è troppo grande per il contenitore. Ciò significa che dobbiamo introdurre un po 'di CSS.

3. Styling La nostra immagine in primo piano

Per fare questo, avremo bisogno di aggiungere un file CSS e aggiornare il file del plugin principale in modo che accoda il foglio di stile.

Innanzitutto, crea un css directory nella cartella del tuo plugin, quindi aggiungi admin.css nella directory. In quel file, aggiungi il seguente codice:

# featured-footer-image-container img width: 100%; altezza: auto; 

Quindi aggiungere il seguente hook nel file correre() funzione del tuo plugin:

add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_styles'));

Infine, aggiungi la seguente funzione:

/ ** * Registra i fogli di stile per gestire la meta box * * @since 0.2.0 * / public function enqueue_styles () wp_enqueue_style ($ this-> nome, plugin_dir_url (__FILE__). 'Css / admin.css', array ( )); 

Se hai impostato correttamente i selettori e hai correttamente registrato e accodato il tuo foglio di stile, dovresti vedere qualcosa del genere:

Molto meglio, non è vero?? 

4. Come rimuoviamo l'immagine?

Proprio come abbiamo aggiunto un elemento per visualizzare l'immagine, abbiamo bisogno di aggiungere un elemento che ci consenta di rimuovere anche l'immagine.

Per farlo, rivisitare views / admin.php e aggiungi il seguente codice:

 Rimuovi l'immagine in primo piano 

Successivamente, abbiamo bisogno di scrivere qualche JavaScript aggiuntivo in modo che quando viene visualizzata l'immagine, viene visualizzata l'ancora sopra. Per realizzare ciò, rivisitare il admin.js e aggiungiamo questo sotto il codice che abbiamo aggiunto in precedenza nell'articolo:

// Visualizza l'ancora per la rimozione dell'immagine in primo piano $ ('# featured-footer-image-container') .next () .show ();

E proprio come abbiamo fatto con l'ancora iniziale, abbiamo bisogno di impostare un gestore di eventi in modo che quando si fa clic sull'ancora "rimuovi", l'immagine venga rimossa e l'ancoraggio "Imposta immagine in primo piano" venga ripristinato.

Per fare ciò, prima rivisita la funzione che viene attivata non appena il DOM viene caricato e aggiungi il seguente codice:

$ ('# remove-footer-thumbnail') .on ('click', function (evt) // Interrompe il comportamento predefinito dell'ancora evt.preventDefault (); // Rimuovi l'immagine, attiva / disattiva resetUploadForm ($); );

Ora dobbiamo definire il resetUploadForm funzione, quindi facciamolo ora. Ricorda che questo deve rimuovere l'immagine, nascondere il contenitore "rimuovi link" e ripristinare l'ancoraggio del link "set image".

/ ** * Funzione di callback per l'evento 'click' dell'ancora 'Remove Footer Image' * nella sua meta-box. * * Reimposta la meta-box nascondendo l'immagine e nascondendo il contenitore 'Rimuovi * Immagine a piè di pagina'. * * @param object $ Un riferimento all'oggetto jQuery * @since 0.2.0 * / function resetUploadForm ($) 'use strict'; // Primo, nascondiamo l'immagine $ ('# featured-footer-image-container'). .Children ('img') .hide (); // Quindi visualizza il contenitore precedente $ ('# featured-footer-image-container') .prev () .show (); // Infine, aggiungiamo la classe 'nascosta' al padre $ di quest'ancora $ ('# featured-footer-image-container'). .Next () .hide () .addClass ('hidden'); 

A questo punto, abbiamo tutto ciò di cui abbiamo bisogno per selezionare un'immagine, rimuovere un'immagine e continuare a farlo.

C'è ancora del lavoro da fare, ma lo tratteremo nel prossimo articolo. Nel frattempo, non dimenticare di eseguire il checkout del repository associato su GitHub per la versione corrente del codice sorgente di questo progetto.

In arrivo…

Ovviamente, ci siamo occupati di gran parte del lavoro di back-end in relazione alla selezione di un'immagine, alla visualizzazione di un'immagine e alla rimozione di un'immagine, ma ci manca ancora una funzionalità cruciale: Salvare l'immagine in modo che è associato al post.

Per collegare ciò che i visitatori del sito vedono con ciò che abbiamo specificato nel back-end, dobbiamo lavorare con il salvataggio dei dati JSON nel database, sanitizzarlo, recuperarlo e visualizzarlo sul lato anteriore.

.