Afbeeldingen toevoegen en verwijderen met de WordPress Media Uploader

In de vorige post in deze serie zijn we begonnen met de nieuwste versie van de WordPress Media Uploader om een beter begrip te krijgen van hoe we deze in onze projecten kunnen integreren..

Het moeilijke deel van het werken met deze nieuwe (nou ja, nieuwe sinds 3.5) functie is dat het niet zo goed gedocumenteerd is als andere functies. Dit laat uiteraard veel ontwikkelaars - vooral beginners - hun hoofd krabben over hoe ermee aan de slag te gaan. Koppel dat met een complete herziening van het onderliggende systeem, en je hebt veel te dekken.

Op basis van de feedback van het eerste artikel gaan we kijken naar het uitbreiden van het bereik van deze serie een beetje meer. In dit artikel gaan we kijken naar het praktisch toepassen van de functionaliteit die we hebben geïntroduceerd in het laatste artikel. Vervolgens zullen we in een vervolgartikel (of misschien meer dan één vervolgartikel) enkele van de fijnere punten bekijken van hoe de Media Uploader werkt.

Oppakken waar we gebleven waren

In het laatste bericht zijn we begonnen met het werken aan een plug-in die een "Featured Footer Image" aan de onderkant van elk bericht heeft geïntroduceerd, als er een afbeelding is geselecteerd. Deze metabox is beschikbaar voor zowel typen berichten als pagina's.

Tot nu toe hebben we de metabox met succes toegevoegd, de WordPress Media Uploader gelanceerd en een afbeelding geselecteerd voor gebruik als onze aanbevolen afbeelding, maar we hebben niets gedaan met de informatie die door de Media Uploader aan ons is geretourneerd.

In dit bericht gaan we door met het implementeren van de functionaliteit, zodat we afbeeldingen onderaan onze berichten bevatten. Daarna zullen we onze aandacht richten op enkele meer technische details van de API's die voor ons beschikbaar zijn.

Om op te pikken waar we waren gebleven, moeten we de functionaliteit die de standaard meta-box "Featured Image" biedt, kunnen repliceren. Om dit te doen:

We moeten informatie van de Media Uploader vastleggen
Toon de afbeelding die is geselecteerd
Corrigeer de afbeelding die is geselecteerd
Stel een optie in om de afbeelding te verwijderen

Het is duidelijk dat we ons werk voor ons opknappen.

Voordat we het doen iets, zorg ervoor dat je de renderMediaUploader-functie bijwerkt om $ als een parameter te accepteren, zodat we jQuery kunnen gebruiken in al onze voorbeelden.

De functieverklaring zou er als volgt uit moeten zien:

function renderMediaUploader ($) ...

En de oproep naar de functie zou er nu als volgt uit moeten zien:

renderMediaUploader ($);

Laten we beginnen.

1. Leg de afbeelding vast

Zodra u een afbeelding uit de Media Uploader hebt geselecteerd, worden de gegevens aan u geretourneerd in JavaScript. De gegevens worden met name in JSON aan ons geretourneerd. Hierdoor kunnen we verschillende eigenschappen van de afbeelding analyseren, zodat we deze samen met onze post kunnen renderen en opslaan.

Maar laten we eerst onze code bijwerken. Zoek de regel code in admin.js dat ziet er zo uit:

file_frame.on ('insert', function () / ** * We behandelen dit in de volgende versie. * /);

En vervang het door dit:

file_frame.on ('insert', function () // Lees de JSON-gegevens geretourneerd door de Media Uploader json = file_frame.state (). get ('selection') .first (). toJSON (););

Vanzelfsprekend is dit niets erg ingewikkelds; vergeet echter niet om toe te voegen json als een variabele gedefinieerd aan de bovenkant van het bestand, samen met file_frame en image_data.

Als je nieuwsgierig bent naar wat er wordt teruggestuurd, voel je vrij om de inhoud van te dumpen json naar je favoriete consoledebugger. In dit specifieke artikel zullen we dat niet doen, maar in toekomstige, diepgaande artikelen zullen we daar misschien meer van doen.

2. Geef Geselecteerde afbeelding weer

Om ervoor te zorgen dat we de geselecteerde afbeelding kunnen weergeven, moeten we ervoor zorgen dat we een afbeeldingselement in onze metabox hebben dat toegankelijk is via JavaScript, zodat we de kenmerken ervan kunnen bijwerken wanneer een afbeelding is geselecteerd.

In views / admin.php, laten we de volgende code toevoegen aan onze sjabloon. Dit bevat het lege afbeeldingselement dat we gebruiken om de afbeelding weer te geven.

Stel aanbevolen afbeelding in

Merk op dat we gebruik maken van de WordPress CSS-klasse verborgen om de container te verbergen. Met behulp van JavaScript verwijderen we deze klasse om de afbeelding weer te geven (en doen we in feite het tegenovergestelde om de afbeelding te verbergen en het anker weer te geven voor het opnieuw selecteren van een afbeelding).

Nu kunnen we de JavaScript opnieuw bekijken en de afbeelding weergeven wanneer deze is geselecteerd. We moeten twee dingen doen:

Verberg het anker zodat de gebruiker de afbeelding kan selecteren
Toon de afgebeelde afbeelding in de container

Om dit te doen, laten we de JavaScript-code opnieuw bekijken die we eerder in het artikel hebben bekeken. Nadat we de JSON-gegevens hebben opgehaald, laten we ervoor zorgen dat we een URL van een afbeelding hebben en dan gaan we verder.

file_frame.on ('insert', function () // Lees de JSON-gegevens geretourneerd door de Media Uploader json = file_frame.state (). get ('selection') .first (). toJSON (); // Allereerst zorg ervoor dat we de URL van een afbeelding moeten weergeven als (0> $ .trim (json.url.length)) return; // Stel daarna de eigenschappen van de afbeelding in en toon deze $ ('#featured -footer-image-container ') .children (' img ') .attr (' src ', json.url) .attr (' alt ', json.caption) .attr (' title ', json.title) .show () .parent () .removeClass ('hidden'); // Verberg vervolgens het anker dat verantwoordelijk is voor het selecteren van de afbeelding $ ('# featured-footer-image-container') .prev () .hide ( ););

Het is duidelijk dat de code is becommentarieerd om uit te leggen wat er aan de hand is, maar we vertrouwen nogal op jQuery om ervoor te zorgen dat we elementen correct weergeven en verbergen.

Eerst controleren we de URL-eigenschap van json om er zeker van te zijn dat de lengte groter is dan nul. Ik gebruik graag $ .trim om dit te doen als een defensieve codeerpraktijk. Als deze gelijk is aan nul, keren we terug omdat we geen afbeelding hebben om weer te geven.

Daarna maken we gebruik van het nieuwe div element dat we in de vorige stap hebben gemaakt. We pakken het beeldelement via de kinderen() functie en dan stellen we zijn src, alt, en titel attributen alles op basis van eigenschappen die toegankelijk zijn via de json voorwerp.

Vanaf daar selecteren we de bovenliggende container van de afbeelding en verwijderen we de verborgen klasse.

We gebruiken tenslotte de gekenmerkte-footer-image-container element als een punt van waaruit we toegang hebben tot het anker - in dit geval is dit het vorige element - en dan verbergen we het.

Op dit punt zou de afbeelding moeten verschijnen in de post meta-box.

Maar we hebben één duidelijk probleem: het beeld is veel te groot voor de container. Dit betekent dat we een beetje CSS moeten introduceren.

3. Onze aanbevolen afbeelding stylen

Om dit te doen, moeten we een CSS-bestand toevoegen en het kerninvoegbestand bijwerken zodat het de stylesheet ophaalt.

Maak eerst een css map in de map van uw plug-in en voeg vervolgens toe admin.css naar de map. Voeg in dat bestand de volgende code toe:

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

Voeg vervolgens de volgende haak toe in de rennen() functie van uw plug-in:

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

Voeg ten slotte de volgende functie toe:

/ ** * Registreert de stylesheets voor het verwerken van de metabox * * @since 0.2.0 * / public function enqueue_styles () wp_enqueue_style ($ this-> name, plugin_dir_url (__FILE__). 'Css / admin.css', array ( ));

Als u toestaat dat u uw selectors op de juiste manier hebt ingesteld en u uw stylesheet correct hebt geregistreerd en in de wachtrij hebt geplaatst, ziet u ongeveer zoiets als dit:

Veel beter, is het niet?

4. Hoe verwijderen we de afbeelding??

Net zoals we een element hebben toegevoegd om de afbeelding weer te geven, moeten we een element toevoegen waarmee we de afbeelding ook kunnen verwijderen.

Om dat te doen, opnieuw bezoeken views / admin.php en voeg de volgende code toe:

Verwijder de aanbevolen afbeelding

Vervolgens moeten we wat extra JavaScript schrijven, zodat wanneer het beeld wordt weergegeven, het bovenstaande anker wordt weergegeven. Om dit te bereiken, bezoekt u opnieuw admin.js en laten we dit toevoegen onder de code die we eerder in het artikel hebben toegevoegd:

// Geef het anker weer voor het verwijderen van de aanbevolen afbeelding $ ('# featured-footer-image-container') .next () .show ();

En net als bij het oorspronkelijke anker, moeten we een gebeurtenishandler instellen, zodat wanneer het "verwijder" -anker wordt geklikt, de afbeelding wordt verwijderd en het anker "Set Featured Image" wordt hersteld.

Om dat te doen, gaat u eerst terug naar de functie die is afgevuurd zodra de DOM is geladen en voegt u de volgende code toe:

$ ('# remove-footer-thumbnail') .on ('klik', functie (evt) // stop het standaardgedrag van het anker evt.preventDefault (); // Verwijder de afbeelding, schakel de ankers resetUploadForm ($); );

Nu moeten we het definiëren resetUploadForm functie, dus laten we dat nu doen. Vergeet niet dat dit de afbeelding moet verwijderen, de container "remove link" moet verbergen en het anker van de link "set image" moet worden hersteld.

/ ** * Callback-functie voor de 'klik'-gebeurtenis van het' Remove Footer Image '* -anker in zijn metabox. * * Herstelt de metabox door de afbeelding te verbergen en de container 'Remove * Footer Image' te verbergen. * * @param-object $ Een verwijzing naar het jQuery-object * @sinds 0.2.0 * / function resetUploadForm ($) 'gebruik strict'; // Eerst verbergen we de afbeelding $ ('# featured-footer-image-container') .kildren ('img') .hide (); // Geef vervolgens de vorige container $ ('# featured-footer-image-container') .prev () .show (); // Tot slot voegen we de 'verborgen' klasse weer toe aan het bovenliggende $ van dit anker ('# featured-footer-image-container') .next () .hide () .addClass ('hidden');

Op dit moment hebben we alles wat we nodig hebben om een afbeelding te selecteren, een afbeelding te verwijderen en dit te blijven doen.

Er is nog steeds werk aan de winkel, maar we zullen dat in het volgende artikel behandelen. Vergeet in de tussentijd niet om de bijbehorende repository op GitHub te downloaden voor de huidige versie van de broncode van dit project.

Komende volgende ...

Uiteraard hebben we veel back-end werk voor ons gedaan met betrekking tot het selecteren van een afbeelding, het weergeven van een afbeelding en het verwijderen van een afbeelding, maar we missen nog steeds een cruciaal stuk functionaliteit: de afbeelding opslaan zodat het is gekoppeld aan het bericht.

Om aan te sluiten wat de bezoeker van de site te zien krijgt met wat we aan de achterkant hebben gespecificeerd, moeten we wat werk doen met het opslaan van de JSON-gegevens in de database, het opschonen, ophalen en vervolgens weergeven op de voorkant.

Code