Begrijpen hoe WordPress-afbeeldingen werken (voor een beter responsief ontwerp)

Wat je gaat creëren

Een van de grootste uitdagingen voor webontwikkelaars van vandaag is het correct verwerken van afbeeldingen voor responsief ontwerp. We hebben te maken met problemen zoals het verkleinen van de afbeelding voor het scherm waarop het wordt bekeken, rekening houdend met de downloadsnelheden van de gebruiker, ongeacht of het apparaat een netvlies is (of in het algemeen een scherm met een superhoge resolutie), en meer. 

Gelukkig, de element is sinds kort een geaccepteerde spec die door grote browsers zal worden geïmplementeerd, maar er is nog steeds werk aan de winkel. Gelukkig maakt de manier waarop WordPress afbeeldingen verwerkt, het een stuk eenvoudiger. 

Hoe de Media Uploader werkt

Laten we eerst een snelle spoedcursus volgen over het gebruik van de Media Uploader. Het is toegankelijk in de WordPress-beheerder vanuit verschillende gebieden, waaronder berichten, pagina's, aangepaste berichttypen die dit ondersteunen (in het algemeen de editor) en het menu Media. 

Het enige verschil tussen het menu Media en de rest is dat een afbeelding direct aan een bericht of pagina wordt gekoppeld als deze is geüpload vanuit de editor. 

Zodra een afbeelding is geüpload, maakt WordPress standaard maximaal 4 formaten: 

• miniatuur (150x150)
• medium (300 max x 300 max)
• groot (640 max x 640 max)
• volledig (de oorspronkelijke grootte van de afbeelding). 

U kunt ook uw eigen afbeeldingformaten toevoegen met behulp van de functie add_image_size (). Als we bijvoorbeeld een afbeelding willen toevoegen voor een product met 700 px breed en 450 px hoog, doen we het volgende: 

add_image_size ('product-img', 700, 450, false);

Dit vertelt WordPress om een ​​nieuwe afbeelding te maken met de naam 'product-img' met onze opgegeven dimensies. Het laatste argument is of de afbeelding wel of niet moet worden bijgesneden. 

Indien ingesteld op vals, de afbeelding wordt proportioneel verkleind zonder bij te snijden; Wanneer ingesteld op true, wordt de afbeelding bijgesneden vanaf de zijkant of de boven- / onderkant. Wees hier echter voorzichtig mee, want de resultaten zullen van afbeelding tot afbeelding verschillen. 

Een afbeelding invoegen

Er zijn twee manieren om een ​​afbeelding in een bericht of pagina in te voegen: de eerste manier is via de Media Uploader, zoals hier afgebeeld: 

De tweede manier is door een uitgelichte afbeelding te gebruiken. U kunt aanbevolen afbeeldingen inschakelen door deze code aan uw thema's toe te voegen functions.php bestand, of ergens in de buurt van het begin van uw plug-ins: 

if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); 

Hiermee wordt een 'uitgelichte afbeelding' toegevoegd aan alle berichten, pagina's en aangepaste berichttypen die dit ondersteunen. Je kunt ook een tweede argument verzenden, wat een array is van wat een uitgelichte afbeelding zou moeten hebben. 

Als u bijvoorbeeld wilt dat berichten alleen aanbevolen afbeeldingen ondersteunen: 

if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails', array ('post');

De laatste stap is om deze code in de Loop van je template te plaatsen, waar je de afbeelding ook wilt laten verschijnen: 

if (has_post_thumbnail ()) the_post_thumbnail ('large');  

Het geaccepteerde argument is de naam van de afbeeldingsgrootte die u wilt gebruiken. Standaard is dat het post-thumbnail. Zodra je dat hebt, voeg je je aanbevolen afbeelding toe via deze box: 

Als u ten slotte een reeks afbeeldingen naar dezelfde post of pagina uploadt, kunt u deze als een galerij invoegen met behulp van de [galerij] shortcode, waar u hier meer over kunt lezen. 

Verbeteringen in 3.9

Met de uitrol van WordPress 3.9, en daarmee ook enkele heel mooie verbeteringen aan afbeeldingen en de galerij. Afgezien van verbeteringen aan de visuele editor, zoals de mogelijkheid om afbeeldingen te slepen en neer te zetten, add_image_size () krijgt een nieuw argument om aan te geven of er aan de zijkanten moet worden bijgesneden of bovenaan / onderaan. 

Wat heeft dit allemaal te maken met Responsive? Blij dat je het vroeg! 

Gebruikmaken van de Media Uploader

De basis van de element is dat wij als webontwikkelaars meerdere kopieën leveren van een afbeelding die op bepaalde breekpunten moet worden weergegeven, d.w.z.. image-images_14 / begrip-how-wordpress-images-work-for-beter-responsieve-design_2.jpg voor smartphones en image-FULL.jpg voor grotere schermen. 

Op dit moment wordt dit element geaccepteerd, maar nog steeds enkele maanden na integratie in browsers. Er is echter nog een andere optie. 

picturefill.js

Er is een JavaScript-bestand gemaakt door de Filament Group genaamd picturefill.js, die dezelfde functie emuleert als de element. 

De syntaxis ziet er als volgt uit: 

Merk op dat er een is data-src invoer voor elke afbeelding die we willen gebruiken, evenals een bijbehorend minimaal breekpunt om die afbeelding te tonen. Het is vermeldenswaard dat er geen limiet is voor het aantal afbeeldingen / breekpunten dat u kunt hebben. 

Dit is momenteel een grotendeels geaccepteerde manier om hetzelfde effect te bereiken als het element. Ik stel me voor dat als het wordt uitgerold naar browsers, de juiste manier om responsieve afbeeldingen te coderen, is: -> picturefill.js ->

Hierdoor kunnen we de nieuwste en beste HTML gebruiken in moderne browsers met de juiste fallbacks op hun plaats (yay progressive enhancement!). 

Met picturefill.js en de meerdere afbeeldingen die de Media Uploader maakt, kunnen we een geautomatiseerd proces maken voor responsieve afbeeldingen op onze door WordPress aangedreven sites. 

Alles samenvoegen

Op dit moment kan WordPress dit op geen enkele manier doen; Ik veronderstel dat dat zal veranderen als het element wordt uitgerold (afgekapt bij het verzenden naar Core :). Dat betekent niet dat we zelf een aantal dingen kunnen doen om het proces te automatiseren. In dit gedeelte gaan we enkele mogelijkheden bespreken. 

Notitie: U zult merken dat ik het voorvoegsel gebruik jlc_ op mijn functies. Ik raad u aan om conflicten met andere thema's en plug-ins te voorkomen. 

Uitgelichte afbeeldingen vervangen

Het eerste deel van deze puzzel, en het meest rechttoe rechtaan, is om de aanbevolen afbeeldingen te vervangen door de picturefill.js markup. 

Dit kan worden bereikt met het filter post_thumbnail_html, die de standaardmarkering voor die van ons zal omwisselen. Het eerste dat we moeten doen is wacht houden picturefill.js (wat kan worden gedaan in functions.php of in uw plug-in): 

functie jlc_script () wp_register_script ('picturefill', get_stylesheet_directory_uri (). '/js/picturefill.js'); wp_enqueue_script ('picturefill');  add_action ('wp_enqueue_scripts', 'jlc_script');

Zorg ervoor dat u hier het pad wijzigt om de locatie van uw te maken picturefill.js het dossier. Als dat eenmaal is gebeurd, is het tijd om onze vervangende functie toe te voegen:

functie jlc_get_featured_image ($ html, $ aid = false) $ sizes = array ('thumbnail', 'medium', 'large', 'full'); $ img = ''; $ ct = 0; $ steun = (! $ steun)? get_post_thumbnail_id (): $ steun; foreach ($ sizes as $ size) $ url = wp_get_attachment_image_src ($ aid, $ size); $ width = ($ ct < sizeof( $sizes ) - 1 ) ? ( $url[1] * 0.66 ) : ( $width / 0.66 ) + 25; $img .= ' 0)? 'data-media = "(min-width:'. $ width .'px)">':'>'; $ Ct ++;  $ url = wp_get_attachment_image_src ($ steun, $ maten [1]); $ img. = ' '; return $ img; 

Hier worden verschillende taken uitgevoerd: 

1. We hebben een array van elke afbeeldingsgrootte die we willen opnemen (op naam). U kunt hier toevoegen of verwijderen zoals u wilt
2. We hebben de picturefill.js markup
3. We doorlopen de array, krijgen de URL voor elke grootte en voegen deze toe als een invoer voor ons element picturefill.js
4. We nemen wat wiskunde op om erachter te komen waar de breekpunten moeten voorkomen op basis van de beeldformaten
5. Voor gebruikers zonder javascript vallen we terug op de middelgrote afbeelding

De volgende stap is om ons filter toe te voegen, dat u direct onder de functie kunt toevoegen: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Nu onze functie jlc_get_featured_image () wordt gebruikt voor de uitvoer post_thumbnail in plaats van de standaardmarkering.

Ik heb dit allemaal verpakt in een eenvoudige plug-in genaamd Responsive Featured Image. Je kunt het downloaden van Github.

Andere methodes

Zoals je je wel kunt voorstellen, is het verwerken van afbeeldingen een behoorlijk ingewikkelde kwestie als het gaat om responsief ontwerp. De functie over werkt alleen met uitgelichte afbeeldingen, niet alle afbeeldingen in de post. Hoewel er methoden zijn om dit te doen, inclusief deze plug-in, heeft mijn testen prestatie- en schalingsproblemen opgeleverd. 

U kunt ook een shortcode gebruiken, een URL of een afbeeldings-ID doorgeven om de code te genereren, zoals: [jlc_picturefill_image aid = x]. Helaas zal dit zonder uitgebreide codering het gebruik van de Media Uploader om afbeeldingen in het bericht in te voegen uitschakelen. Met de functionaliteit voor slepen en neerzetten in 3.9 kan dit nog meer conflicten veroorzaken. 

Als je geïnteresseerd bent in deze methode, in mijn boek, Responsive Design met WordPress, Ik ga veel dieper in op deze en WordPress-afbeeldingen in het algemeen.

Conclusie

In dit artikel hebben we behoorlijk uitgebreid gekeken naar hoe WordPress omgaat met afbeeldingen en een manier onderzocht om te integreren picturefill.js in een eenvoudig te gebruiken en vooral efficiënt landhuis. 

Het is belangrijk om te weten dat dit een constant evoluerend interessegebied is. Naarmate betere methoden zich gaan ontwikkelen, ben ik enthousiast om te zien wat de (hopelijk nabije) toekomst inhoudt voor zowel responsieve afbeeldingen als WordPress.