Înțelegerea modului în care funcționează WordPress Images (pentru un design mai receptiv)

Una dintre cele mai mari provocări cu care se confruntă dezvoltatorii de astăzi este manipularea corectă a imaginilor pentru un design receptiv. Ne confruntăm cu probleme cum ar fi dimensionarea corectă a imaginii pentru ecranul pe care este vizionat, ținând cont de viteza de descărcare a utilizatorului, indiferent dacă aparatul are retina (sau, în general, ecrane cu rezoluție superioară) și altele. 

Din fericire, elementul recent a devenit un spec. acceptat, care va fi implementat de browserele majore, însă mai sunt încă unele de făcut. Din fericire, modul în care WordPress se ocupă de imagini face lucrurile mult mai ușor. 

Modul în care funcția de încărcare media funcționează

În primul rând, hai să mergem printr-un curs rapid de prăbușire cu privire la utilizarea Media Uploader. Este accesibilă în administratorul WordPress din mai multe domenii, inclusiv postări, pagini, tipuri personalizate de posturi care îl suportă (în general, editorul) și meniul Media. 

Singurele diferențe dintre meniul Media și restul sunt că o imagine va fi asociată direct cu o postare sau o pagină dacă este încărcată de editor. 

Odată ce o imagine este încărcată, WordPress va crea în mod implicit până la 4 dimensiuni: 

• miniatură (150x150)
• mediu (300 max x 300 max)
• mare (640 max x 640 max)
• plin (dimensiunea originală a imaginii). 

De asemenea, puteți adăuga propriile dimensiuni de imagine utilizând funcția add_image_size (). De exemplu, dacă vrem să adăugăm o imagine pentru un produs cu înălțimea de 700px la 450 de pixeli, am face: 

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

Acest lucru îi spune lui WordPress să creeze o nouă imagine cu numele "product-img" cu dimensiunile specificate. Ultimul argument este dacă imaginea trebuie tăiată sau nu. 

Când este setat la fals, imaginea va fi redimensionată proporțional fără decupare; când este setat la true, imaginea va fi tăiată fie din laturi, fie din partea de sus / de jos. Fiți atenți la acest lucru, totuși, deoarece rezultatele vor varia de la imagine la imagine. 

Introducerea unei imagini

Există două moduri de a insera o imagine într-un post sau într-o pagină: prima modalitate este prin Media Uploader, așa cum este prezentat aici: 

Cea de-a doua cale este prin utilizarea unei imagini prezentate. Puteți să activați imaginile prezentate prin adăugarea acestui cod la temele dvs. functions.php fișier sau undeva în apropierea primelor pluginuri: 

dacă (funcția_există ('add_theme_support')) add_theme_support ('post-thumbnails'); 

Aceasta va adăuga o casetă "Imagine recomandată" tuturor postărilor, paginilor și tipurilor personalizate de postări care o acceptă. De asemenea, puteți trimite un al doilea argument, care este o matrice a ceea ce ar trebui să aibă o imagine prezentată. 

De exemplu, dacă doriți doar postări pentru a susține imaginile recomandate: 

dacă function_exists ('add_theme_support')) add_theme_support ('post-thumbnails', array ('post');

Ultimul pas este să plasați acest cod în buclă de șablon, oriunde doriți să apară imaginea: 

dacă (has_post_thumbnail ()) the_post_thumbnail ('mare');  

Argumentul acceptat este numele dimensiunii imaginii pe care doriți să o utilizați. Implicit, este post-miniatură. Odată ce ați obținut acest lucru, veți adăuga imaginea dvs. recomandată prin această casetă: 

În cele din urmă, dacă încărcați un set de imagini în același post sau pe aceeași pagină, le puteți insera ca o galerie folosind [Galerie] shortcode, pe care puteți citi mai multe despre aici. 

Îmbunătățiri în 3.9

Cu lansarea WordPress 3.9, și cu ea, unele îmbunătățiri foarte frumos la imagini și galerie. În afară de îmbunătățirile aduse editorului vizual, cum ar fi abilitatea de a glisa și plasa imagini, add_image_size () primește un nou argument pentru a specifica dacă se recoltează pe laturi sau pe partea superioară / inferioară. 

Deci ce are de-a face cu Responsive? Mă bucur că ai întrebat! 

Folosiți media Uploader

Bazele elementul este că noi, ca dezvoltatori web, furnizăm mai multe copii ale unei imagini care trebuie afișate la anumite puncte de întrerupere, adică. image-images_14 / înțelegere-how-WordPress-images-work-pentru-o mai bună-receptiv-design_2.jpg pentru smartphone-uri și image-full.jpg pentru ecrane mai mari. 

În prezent, acest element este acceptat, dar încă câteva luni de la integrarea în browsere. Există totuși o altă opțiune. 

picturefill.js

Există un fișier JavaScript creat de grupul Filament numit picturefill.js, care emula aceeași funcție ca și element. 

Sintaxa arată astfel: 

Observați că există a date-src pentru fiecare imagine pe care dorim să o folosim, precum și o valoare minimă asociată pentru a afișa acea imagine. Merită menționat faptul că nu există nici o limită a numărului de imagini / puncte de întrerupere pe care le puteți avea. 

Aceasta este în prezent o modalitate larg acceptată de a obține același efect ca și element. Îmi imaginez că, pe măsură ce se va lansa în browsere, modul corect de a codifica imaginile receptive va fi: -> imaginefill.js ->

Acest lucru ne va permite să folosim cele mai recente și cele mai bune coduri HTML în browserele moderne, cu locurile de rezervă corespunzătoare (îmbunătățirea progresivă yay!). 

Cu picturefill.js și imaginile multiple pe care le creează Media Uploader, putem crea un proces automatizat pentru imagini receptive pe site-urile noastre bazate pe WordPress. 

Punându-le pe toți împreună

Chiar acum, WordPress nu are nici un fel de a face acest lucru nativ; Îmi imaginez că se va schimba atunci când elementul devine rulat (dibs la trimiterea lui la Core :). Asta nu înseamnă că putem face câteva lucruri pentru a automatiza procesul. În această secțiune, vom aborda câteva posibilități. 

Notă: Veți observa că folosesc prefixul jlc_ cu privire la funcțiile mele. Vă recomandăm să vă folosiți pentru a preveni conflictele cu alte teme și pluginuri. 

Înlocuirea imaginilor recomandate

Prima piesă a acestui puzzle și cea mai dreaptă este înlocuirea imaginilor prezentate cu picturefill.js marcare. 

Acest lucru se poate realiza cu filtrul post_thumbnail_html, care va schimba marcajul implicit pentru al nostru. Primul lucru pe care trebuie să-l facem este enqueue picturefill.js (care se poate face în functions.php sau în plugin-ul dvs.): 

funcția jlc_script () wp_register_script ('picturefill', get_stylesheet_directory_uri () ./js/picturefill.js '); wp_enqueue_script ('imaginefill');  add_action ('wp_enqueue_scripts', 'jlc_script');

Asigurați-vă că modificați calea aici pentru a vă face locația picturefill.js fişier. Odată ce este în vigoare, este timpul să adăugăm funcția noastră de înlocuire:

funcția jlc_get_featured_image ($ html, $ aid = false) $ sizes = array ("miniatură", "mediu", "mare", "plin"); $ img = '„; $ ct = 0; $ ajutor = (! $ ajutor)? get_post_thumbnail_id (): $ ajutor; foreach ($ dimensiuni ca dimensiune $) $ 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-lățime: '. $ lățime.' ') ">':'>„; $ CT ++;  $ url = wp_get_attachment_image_src ($ ajutor, $ dimensiuni [1]); $ img = ' „; retur $ img; 

Există mai multe sarcini care se desfășoară aici: 

1. Avem o matrice de fiecare dimensiune a imaginii pe care dorim să o includem (după nume). Puteți adăuga sau elimina aici, după cum doriți
2. Am creat picturefill.js marcare
3. Se leagă prin matrice, obținând adresa URL pentru fiecare dimensiune și adăugând-o ca intrare elementului nostru picturefill.js
4. Includem câteva matematice pentru a determina unde ar trebui să aibă loc întreruperile pe baza dimensiunilor imaginilor
5. Pentru utilizatorii fără javascript, am revenit la imaginea de dimensiuni medii

Următorul pas este să adăugați filtrul nostru, pe care îl puteți adăuga chiar sub această funcție: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Acum, funcția noastră jlc_get_featured_image () va fi utilizat pentru ieșirea post_umumă în loc de marcajul implicit.

Am înfășurat toate acestea într-un simplu plugin numit Imagine recomandată responsabilă. Îl poți descărca de la Github.

Alte metode

După cum vă puteți imagina, manipularea imaginilor este o chestiune destul de complicată atunci când vine vorba de un design receptiv. Funcția despre va funcționa numai cu imaginile prezentate, nu cu toate imaginile din post. Deși există metode pentru a face acest lucru, inclusiv acest plugin, testarea mea a arătat probleme de performanță și de scalare. 

De asemenea, puteți utiliza un scurtcod, transmiteți un URL sau un ID de imagine pentru a genera codul, cum ar fi: [jlc_picturefill_image aid = x]. Din păcate, fără extensie de codificare, aceasta va dezactiva utilizarea aplicației Media Uploader pentru a insera imagini în post. Cu funcția de drag and drop în 3.9, ar putea provoca și mai multe conflicte. 

Dacă sunteți interesat de această metodă, în cartea mea, Design Responsabil cu WordPress, Mă duc mult mai profund în această privință și în imaginile WordPress în general.

Concluzie

În acest articol, am arătat destul de mult despre modul în care WordPress gestionează imaginile și a explorat o modalitate de integrare picturefill.js într-un conac ușor de utilizat și mai eficient. 

Este important să știți că aceasta este o zonă în continuă evoluție de interes. Pe masura ce metode mai bune incep sa se dezvolte, sunt incantata sa vad ce pastreaza viitorul (sperand aproape) pentru ambele imagini receptive si WordPress.