Forstå hvordan WordPress-bilder fungerer (For bedre responsivt design)

Hva du skal skape

En av de største utfordringene webutviklere i dag har, er å håndtere bilder for responsiv design. Vi står overfor problemer som størrelsen på bildet riktig for skjermen den blir vist på, med hensyn til brukerens nedlastingshastigheter, om enheten er netthinnen (eller generelt en super høyoppløselig skjerm) og mer. 

Heldigvis, elementet ble nylig en godkjent spesifikasjon som vil bli implementert av store nettlesere, men det er fortsatt noe arbeid å gjøre. Heldigvis, måten WordPress håndterer bilder gjør det mye enklere. 

Hvordan Media Uploader Fungerer

Først, la oss gå gjennom et raskt krasj kurs ved bruk av Media Uploader. Den er tilgjengelig i WordPress-administrasjonen fra flere områder, inkludert innlegg, sider, egendefinerte innleggstyper som støtter det (generelt sett redaktøren) og mediemenyen. 

De eneste forskjellene mellom mediemenyen og resten er at et bilde vil være direkte tilknyttet et innlegg eller en side hvis den lastes opp fra redigeringsprogrammet. 

Når et bilde blir lastet opp, vil WordPress som standard opprette opptil 4 størrelser: 

• miniatyrbilde (150x150)
• medium (300 maks x 300 maks)
• stor (640 maks x 640 max)
• full (den opprinnelige størrelsen på bildet). 

Du kan også legge til dine egne bildestørrelser ved hjelp av funksjonen add_image_size (). For eksempel, hvis vi ønsket å legge til et bilde for et produkt som er 700px bredt ved 450px høyt, ville vi gjøre det: 

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

Dette forteller WordPress for å lage et nytt bilde med navnet 'product-img' med våre spesifiserte dimensjoner. Det siste argumentet er om bildet skal beskjæres eller ikke. 

Når satt til falsk, Bildet vil bli forandret proporsjonalt uten beskjæring; Når den er satt til sann, vil bildet bli beskåret enten fra sidene eller toppen / bunnen. Vær forsiktig med dette skjønt, fordi resultatene vil variere fra bilde til bilde. 

Sette inn et bilde

Det er to måter å sette inn et bilde på i et innlegg eller en side: Den første måten er gjennom Media Uploader, som vist her: 

Den andre måten er å bruke et kjennetegnet bilde. Du kan aktivere fremhevede bilder ved å legge til denne koden til temaet ditt functions.php fil, eller et sted nær begynnelsen av pluginene dine: 

hvis (function_exists ('add_theme_support')) add_theme_support ('post-miniatyrer'); 

Dette vil legge til en "kjennetegnet bilde" boks til alle innlegg, sider og tilpassede innleggstyper som støtter den. Du kan også sende et annet argument, som er en rekke av hva som skal ha et utvalgt bilde. 

For eksempel, hvis du bare vil ha innlegg for å støtte uthevede bilder: 

hvis (function_exists ('add_theme_support')) add_theme_support ('post-miniatyrer', array ('innlegg');

Det siste trinnet er å plassere denne koden i Loop of your template, uansett hvor du vil at bildet skal vises: 

hvis (has_post_thumbnail ()) the_post_thumbnail ('large');  

Argumentet er godkjent, navnet på bildestørrelsen du vil bruke. Som standard er det post-thumbnail. Når du har det, vil du legge til ditt fremhevede bilde via denne boksen: 

Til slutt, hvis du laster opp et sett med bilder til samme innlegg eller side, kan du sette dem inn som et galleri ved hjelp av [galleri] shortcode, som du kan lese mer om her. 

Forbedringer i 3,9

Med WordPress 3.9 rulle ut, og med det, noen veldig fine forbedringer til bilder og galleriet. Bortsett fra forbedringer av visuell editor, som evnen til å dra og slippe bilder, add_image_size () får et nytt argument for å angi om det skal avleses på sidene eller øverst / nederst. 

Så hva har alt dette å gjøre med Responsive? Glad du spurte! 

Utnyttelse av Media Uploader

Grunnlaget for Elementet er at vi som webutviklere leverer flere kopier av et bilde som skal vises på bestemte brytepunkter, dvs.. image-images_14 / forståelse-how-wordpress-bilder-arbeid-for-bedre-responsive-design_2.jpg for smarttelefoner og image-full.jpg for større skjermer. 

For øyeblikket er dette elementet akseptert, men fortsatt noen få måneder fra å bli integrert i nettlesere. Det er imidlertid et annet alternativ. 

picturefill.js

Det er en JavaScript-fil opprettet av Filament-gruppen kalt picturefill.js, som emulerer samme funksjon som element. 

Syntaxen ser slik ut: 

Legg merke til at det er a data-src oppføring for hvert bilde vi vil bruke, samt et tilknyttet minimum brytepunkt for å vise det bildet. Det er verdt å merke seg at det ikke er noen grense for antall bilder / brytepunkter du kan ha. 

Dette er for tiden en stor akseptert måte å oppnå samme innflytelse som element. Jeg forestiller meg at når det blir rullet ut til nettlesere, vil den riktige måten å kode responsive bilder være: -> picturefill.js ->

Dette vil tillate oss å bruke den nyeste og beste HTML i moderne nettlesere med riktig fallbacks på plass (yay progressiv forbedring!). 

Med picturefill.js og de flere bildene som Media Uploader oppretter, kan vi lage en automatisert prosess for responsive bilder på våre WordPress-drevne nettsteder. 

Sette alt sammen

Akkurat nå er det ingen måte at WordPress gjør dette innfødt; Jeg forestiller meg at det vil endres når elementet blir rullet ut (dibs på å sende det til kjernen :). Det betyr ikke at vi selv kan gjøre et par ting for å automatisere prosessen. I denne delen skal vi ta på noen muligheter. 

Merk: Du vil legge merke til at jeg bruker prefikset jlc_ på mine funksjoner. Jeg anbefaler at du bruker deg for å hindre konflikter med andre temaer og plugins. 

Bytte utvalgte bilder

Det første stykket av dette puslespillet, og mest rett frem, er å erstatte de fremhevede bildene med picturefill.js markup. 

Dette kan oppnås med filteret post_thumbnail_html, som vil bytte ut standardoppdateringen for våre. Det første vi må gjøre er enqueue picturefill.js (som kan gjøres i functions.php eller i pluginet ditt): 

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

Pass på å endre banen her for å gjøre plasseringen av din picturefill.js fil. Når det er på plass, er det på tide å legge til vår erstatningsfunksjon:

funksjon jlc_get_featured_image ($ html, $ aid = false) $ sizes = array ('miniatyr', 'medium', 'stort', 'full'); $ img = ''; $ ct = 0; $ aid = (! $ hjelp)? get_post_thumbnail_id (): $ aid; foreach ($ størrelser som $ størrelse) $ 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 bredde:'. $ width. 'px)">':'>'; $ Ct ++;  $ url = wp_get_attachment_image_src ($ hjelp, $ størrelser [1]); $ img. = ' '; returner $ img; 

Det utføres flere oppgaver her: 

1. Vi har et utvalg av hver bildestørrelse vi vil bli med (ved navn). Du kan legge til eller fjerne her som du ønsker
2. Vi satte opp picturefill.js markup
3. Vi slår gjennom arrayet, får nettadressen for hver størrelse og legger den til som en oppføring til elementet picturefill.js
4. Vi inkluderer litt matematikk for å finne ut hvor brytepunktene skal skje, basert på bildestørrelsene
5. For brukere uten javascript, faller vi tilbake til det mellomstore bildet

Det neste trinnet er å legge til filteret vårt, som du kan legge til rett under funksjonen: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Nå vår funksjon jlc_get_featured_image () vil bli brukt til post_thumbnail-utgangen i stedet for standardoppretting.

Jeg har pakket alt dette inn i en enkel plugin som heter Responsive Featured Image. Du kan laste den ned fra Github.

Andre metoder

Som du kan forestille deg, er håndtering av bilder en ganske komplisert sak når det gjelder responsiv design. Funksjonen om vil kun fungere med kjente bilder, ikke alle bilder i innlegget. Selv om det finnes metoder for å gjøre dette, inkludert dette pluginet, har testen vist resultatene og skaleringsproblemer. 

Du kan også bruke en kortkode, bestå en URL eller en bilde-ID for å generere koden, slik som: [jlc_picturefill_image hjelp = x]. Dessverre uten omfattende koding, vil dette deaktivere bruk av Media Uploader for å sette inn bilder i innlegget. Med dra og slipp-funksjonaliteten i 3.9, kan det føre til enda mer konflikt. 

Hvis du er interessert i denne metoden, i boken min, Responsive Design med WordPress, Jeg går mye mer grundig på dette og WordPress-bildene generelt.

Konklusjon

I denne artikkelen så vi ganske mye på hvordan WordPress håndterer bilder, og utforsket en måte å integrere picturefill.js i en lett å bruke og enda viktigere effektiv herregård. 

Det er viktig å vite at dette er et stadig utviklende område av interesse. Etter hvert som bedre metoder begynner å utvikle, er jeg glade for å se hva (forhåpentligvis nær) fremtiden holder for både responsive bilder og WordPress.