Förstå hur WordPress-bilder fungerar (för bättre responsiv design)

En av de största utmaningarna för webbutvecklare idag hanterar bilder på ett korrekt sätt. Vi möter problem som att dimensionera bilden ordentligt för den skärm den visas på, med hänsyn till användarens nedladdningshastigheter, oavsett om enheten är näthinnan (eller i allmänhet en super högupplösningsskärm) eller mer. 

Tack och lov, element blev nyligen en accepterad spec som kommer att implementeras av stora webbläsare men det finns fortfarande lite arbete att göra. Lyckligtvis, hur WordPress hanterar bilder gör sakerna mycket enklare. 

Hur Media Uploader fungerar

Låt oss först gå igenom en snabbkraschbana om du använder Media Uploader. Den är tillgänglig i WordPress-administratören från flera områden, inklusive inlägg, sidor, anpassade posttyper som stöder den (generellt sett redaktören) och mediemenyn. 

De enda skillnaderna mellan Media-menyn och resten är att en bild kommer att vara direkt kopplad till ett inlägg eller en sida om den laddas upp från redigeraren. 

När en bild har laddats upp skapar WordPress som standard upp till 4 storlekar: 

• miniatyrbild (150x150)
• medium (300 max x 300 max)
• stor (640 max x 640 max)
• full (bildens ursprungliga storlek). 

Du kan också lägga till egna bildstorlekar med funktionen add_image_size (). Om vi ​​till exempel vill lägga till en bild för en produkt som är 700x bred vid 450px, skulle vi göra: 

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

Detta säger WordPress att skapa en ny bild med namnet "product-img" med våra angivna dimensioner. Det sista argumentet är huruvida bilden ska beskäras. 

När den är inställd på falsk, bilden kommer att ändras proportionellt utan beskärning; När den är satt till sann, kommer bilden att beskäras antingen från sidorna eller överst / nedre. Var försiktig med det här, för resultatet kommer att variera från bild till bild. 

Infoga en bild

Det finns två sätt att infoga en bild i ett inlägg eller en sida: det första sättet är genom Media Uploader, som bilden här: 

Det andra sättet är att använda en utrustad bild. Du kan aktivera utvalda bilder genom att lägga till den här koden i ditt tema functions.php fil eller någonstans nära början av dina pluginprogram: 

om (function_exists ('add_theme_support')) add_theme_support ('post thumbnails'); 

Detta lägger till en "utrustad bild" rutan till alla inlägg, sidor och anpassade posttyper som stöder den. Du kan också skicka ett andra argument, vilket är en uppsättning av vad som ska ha en featured bild. 

Om du till exempel bara vill ha inlägg som stödjer utvalda bilder: 

om (function_exists ('add_theme_support')) add_theme_support ('post-miniatyrer', array ('post');

Det sista steget är att placera den här koden i Loop of your template, var du vill att bilden ska visas: 

om (has_post_thumbnail ()) the_post_thumbnail ('large');  

Argumentet accepteras är namnet på den bildstorlek du vill använda. Som standard är det post-thumbnail. När du har det, lägger du till din utvalda bild via den här rutan: 

Slutligen, om du laddar upp en uppsättning bilder till samma post eller sida, kan du lägga dem in som ett galleri med hjälp av [Galleri] kortnummer, som du kan läsa mer om här. 

Förbättringar i 3,9

Med WordPress 3.9 rullar ut, och med det, några riktigt fina förbättringar av bilder och galleriet. Bortsett från förbättringar av den visuella redigeraren, som möjligheten att dra och släppa bilder, add_image_size () får ett nytt argument för att ange huruvida man ska beskära på sidorna eller överst eller underifrån. 

Så vad har allt detta att göra med Responsive? Glad att du frågade! 

Utnyttja Media Uploader

Grunden för element är att vi som webbutvecklare tillhandahåller flera kopior av en bild som ska visas vid särskilda brytpunkter, dvs. bild images_14 / förståelse-how-wordpress-bilder-work-for-bättre-känslig-design_2.jpg för smartphones och bild-full.jpg för större skärmar. 

För tillfället accepteras detta element men fortfarande några månader från integreringen i webbläsare. Det finns dock ett annat alternativ. 

picturefill.js

Det finns en JavaScript-fil skapad av filamentgruppen som heter picturefill.js, som emulerar samma funktion som element. 

Syntaxen ser ut så här: 

Observera att det finns a uppgifter-src post för varje bild vi vill använda, samt en tillhörande minsta brytpunkt för att visa den bilden. Det är värt att notera att det inte finns någon gräns för antalet bilder / brytpunkter du kan ha. 

Detta är för närvarande ett stort accepterat sätt att uppnå samma inverkan som element. Jag föreställer mig att eftersom det blir rullat ut till webbläsare är det rätt sätt att koda lyhörda bilder: -> picturefill.js ->

Detta gör det möjligt för oss att använda den senaste och bästa HTML i moderna webbläsare med rätt fallbacks på plats (yay progressiv förbättring!). 

Med picturefill.js och de flera bilder som Media Uploader skapar kan vi skapa en automatiserad process för responsiva bilder på våra WordPress-drivna webbplatser. 

Få alltid att falla på plats

Just nu finns det inget sätt som WordPress gör det här indianskt; Jag föreställer mig att det kommer att förändras när elementet rullas ut (dibs på att skicka in det till Core :). Det betyder inte att vi kan göra några saker själv för att automatisera processen. I det här avsnittet kommer vi att beröra några möjligheter. 

Notera: Du kommer märka att jag använder prefixet jlc_ på mina funktioner. Jag rekommenderar att du använder dig för att förhindra konflikter med andra teman och plugins. 

Byta utvalda bilder

Den första delen av detta pussel, och mest rakt framåt, är att ersätta de presenterade bilderna med picturefill.js markup. 

Detta kan uppnås med filtret post_thumbnail_html, som kommer att byta ut standardmarkeringen för vårt. Det första vi behöver göra är enqueue picturefill.js (som kan göras i functions.php eller i ditt plugin): 

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

Var noga med att ändra sökvägen här för att göra platsen för din picturefill.js fil. När det är på plats är det dags att lägga till vår ersättningsfunktion:

funktion jlc_get_featured_image ($ html, $ aid = false) $ size = array ('thumbnail', 'medium', 'large', 'full'); $ img = ''; $ ct = 0; $ aid = (! $ aid)? get_post_thumbnail_id (): $ aid; foreach ($ storlekar som $ 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-bredd:'. $ bredd. 'px)">':'>'; $ Ct ++;  $ url = wp_get_attachment_image_src ($ hjälp, $ storlekar [1]); $ img. = ' '; returnera $ img; 

Det finns flera uppgifter som utförs här: 

1. Vi har en rad olika bildstorlekar som vi vill inkludera (med namn). Du kan lägga till eller ta bort det här som du önskar
2. Vi satte upp picturefill.js markup
3. Vi går igenom arrayen, får URL-adressen för varje storlek och lägger till den som en post till vårt element picturefill.js
4. Vi inkluderar lite matte för att ta reda på var brytpunkterna ska ske baserat på bildstorleken
5. För användare utan javascript faller vi tillbaka till den medelstora bilden

Nästa steg är att lägga till vårt filter, vilket du kan lägga till direkt under funktionen: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Nu är vår funktion jlc_get_featured_image () kommer att användas för post_thumbnail-utmatningen istället för standardmarkeringen.

Jag har förpackat allt detta till ett enkelt plugin som heter Responsive Featured Image. Du kan ladda ner den från Github.

Andra metoder

Som du kan tänka dig är hantering av bilder en ganska komplicerad sak när det gäller responsiv design. Funktionen om kommer bara att fungera med utvalda bilder, inte alla bilder i posten. Medan det finns metoder för att göra detta, inklusive det här pluginet, har testningen visat prestanda och skaleringsproblem. 

Du kan också använda en kortnummer, som skickar en URL eller ett bild-ID för att generera koden, som så: [jlc_picturefill_image aid = x]. Tyvärr utan omfattande kodning kommer detta att inaktivera användningen av Media Uploader för att infoga bilder i posten. Med drag och släppfunktionen i 3.9 kan det orsaka ännu mer konflikt. 

Om du är intresserad av den här metoden, i min bok, Responsive Design med WordPress, Jag går mycket djupare på detta och WordPress-bilder i allmänhet.

Slutsats

I den här artikeln såg vi ganska utförligt på hur WordPress hanterar bilder och utforskade ett sätt att integrera picturefill.js i en lättanvänd och viktigare effektiv herrgård. 

Det är viktigt att veta att detta är ett ständigt utvecklande intresseområde. När bättre metoder börjar utvecklas, är jag glad att se vad (förhoppningsvis nära) framtiden rymmer för både lyhörda bilder och WordPress.