Capire come funzionano le immagini WordPress (per una migliore progettazione reattiva)

Cosa starai creando

Una delle maggiori sfide che gli sviluppatori Web devono affrontare oggi è la corretta gestione delle immagini per la progettazione reattiva. Affrontiamo problemi come ridimensionare l'immagine correttamente per lo schermo su cui viene visualizzato, tenendo conto della velocità di download dell'utente, indipendentemente dal fatto che il dispositivo sia retina (o in generale uno schermo ad altissima risoluzione) e altro. 

Per fortuna, il l'elemento è diventato di recente una specifica accettata che verrà implementata dai principali browser, ma c'è ancora del lavoro da fare. Fortunatamente, il modo in cui WordPress gestisce le immagini rende le cose molto più semplici. 

Come funziona Media Uploader

Per prima cosa, seguiamo un corso accelerato rapido sull'utilizzo di Media Uploader. È accessibile nell'amministratore di WordPress da diverse aree, inclusi post, pagine, tipi di post personalizzati che lo supportano (in generale, l'editor) e il menu Media. 

Le uniche differenze tra il menu Media e il resto è che un'immagine sarà direttamente associata a un post o una pagina se è caricata dall'editor. 

Una volta caricata un'immagine, WordPress creerà automaticamente fino a 4 dimensioni: 

• miniatura (150x150)
• medio (300 max x 300 max)
• grande (640 max x 640 max)
• pieno (la dimensione originale dell'immagine). 

Puoi anche aggiungere le dimensioni della tua immagine utilizzando la funzione add_image_size (). Ad esempio, se volessimo aggiungere un'immagine per un prodotto con larghezza di 700 px di altezza pari a 450 px, faremmo: 

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

Questo sta dicendo a WordPress di creare una nuova immagine con il nome "product-img" con le nostre dimensioni specificate. L'ultimo argomento è se l'immagine debba essere ritagliata o meno. 

Quando impostato su falso, l'immagine verrà ridimensionata proporzionalmente senza ritaglio; se impostato su true, l'immagine verrà ritagliata dai lati o dall'alto / dal basso. Fai attenzione però, perché i risultati variano da un'immagine all'altra. 

Inserimento di un'immagine

Ci sono due modi per inserire un'immagine in un post o una pagina: il primo modo è attraverso l'Uploader multimediale, come illustrato qui: 

Il secondo modo è utilizzare un'immagine in primo piano. Puoi abilitare le immagini in primo piano aggiungendo questo codice ai tuoi temi functions.php file o da qualche parte vicino all'inizio dei tuoi plugin: 

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

Ciò aggiungerà una casella 'immagine in primo piano' a tutti i post, pagine e tipi di post personalizzati che lo supportano. Puoi anche inviare un secondo argomento, che è una matrice di ciò che dovrebbe avere un'immagine in primo piano. 

Ad esempio, se desideri che i post supportino solo le immagini in primo piano: 

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

L'ultimo passaggio consiste nel posizionare questo codice all'interno del Loop del tuo modello, ovunque tu voglia mostrare l'immagine: 

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

L'argomento accettato è il nome della dimensione dell'immagine che si desidera utilizzare. Di default, lo è post-miniature. Una volta ottenuto ciò, aggiungerai l'immagine in primo piano tramite questa casella: 

Infine, se carichi una serie di immagini nello stesso post o nella stessa pagina, puoi inserirle come galleria usando il [galleria] shortcode, di cui puoi leggere di più qui. 

Miglioramenti in 3.9

Con il lancio di WordPress 3.9, e con esso, alcuni miglioramenti davvero piacevoli alle immagini e alla galleria. A parte i miglioramenti apportati all'editor visivo, come la possibilità di trascinare e rilasciare le immagini, add_image_size () sta ottenendo un nuovo argomento per specificare se ritagliare sui lati o sopra / sotto. 

Che cosa ha a che fare tutto ciò con Responsive? Contento che tu abbia chiesto! 

Utilizzo del Media Uploader

La base del L'elemento è che noi, come sviluppatori web, forniamo più copie di un'immagine da visualizzare in particolari punti di interruzione, vale a dire. image-images_14 / comprensione-how-wordpress-immagini-lavoro-per-meglio-reattiva-design_2.jpg per smartphone e image-full.jpg per schermi più grandi. 

Al momento, questo elemento è accettato ma ancora a pochi mesi dall'essere integrato nei browser. C'è un'altra opzione, tuttavia. 

picturefill.js

C'è un file JavaScript creato da Filament Group chiamato picturefill.js, che emula la stessa funzione di elemento. 

La sintassi ha questo aspetto: 

Notare che c'è un Dati-src voce per ogni immagine che vogliamo utilizzare, nonché un punto di interruzione minimo associato per mostrare quell'immagine. Vale la pena notare che non esiste un limite al numero di immagini / punti di interruzione che si possono avere. 

Questo è attualmente un modo ampiamente accettato per ottenere lo stesso effetto del elemento. Immagino che mentre viene distribuito ai browser, il modo corretto per codificare le immagini reattive sarà: -> picturefill.js ->

Questo ci consentirà di utilizzare l'ultimo e più grande codice HTML nei browser moderni con i fallback corretti (aumenta progressivamente!). 

Con picturefill.js e le immagini multiple create da Media Uploader, possiamo creare un processo automatizzato per immagini reattive sui nostri siti basati su WordPress. 

Mettere tutto insieme

Al momento, non c'è modo che WordPress faccia questo in modo nativo; Immagino che cambierà quando il l'elemento viene estratto (si abbassa per inviarlo a Core :). Ciò non significa che possiamo fare un paio di cose noi stessi per automatizzare il processo. In questa sezione, stiamo per toccare alcune possibilità. 

Nota: Noterai che sto usando il prefisso jlc_ sulle mie funzioni. Ti consiglio di utilizzarti per evitare conflitti con altri temi e plug-in. 

Sostituzione di immagini in primo piano

Il primo pezzo di questo puzzle, e il più diretto, è quello di sostituire le immagini in primo piano con il picturefill.js markup. 

Questo può essere ottenuto con il filtro post_thumbnail_html, che sostituirà il markup predefinito per il nostro. La prima cosa che dobbiamo fare è accodare picturefill.js (che può essere fatto in functions.php o nel tuo plugin): 

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

Assicurati di modificare il percorso qui per creare la posizione del tuo picturefill.js file. Una volta che è a posto, è il momento di aggiungere la nostra funzione di sostituzione:

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

Ci sono diversi compiti che vengono eseguiti qui: 

1. Abbiamo una matrice di ogni dimensione dell'immagine che vogliamo essere inclusa (per nome). Puoi aggiungere o rimuovere qui come desideri
2. Abbiamo istituito il picturefill.js markup
3. Passiamo attraverso l'array, ottenendo l'URL per ogni dimensione e aggiungendolo come una voce al nostro elemento picturefill.js
4. Includiamo alcuni calcoli matematici per capire dove si dovrebbero verificare i punti di interruzione in base alle dimensioni dell'immagine
5. Per gli utenti senza javascript, eseguiamo il fallback sull'immagine di medie dimensioni

Il prossimo passo è aggiungere il nostro filtro, che puoi aggiungere direttamente sotto la funzione: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Ora la nostra funzione jlc_get_featured_image () verrà utilizzato per l'output post_thumbnail al posto del markup predefinito.

Ho avvolto tutto questo in un semplice plugin chiamato Responsive Featured Image. Puoi scaricarlo da Github.

Altri metodi

Come potete immaginare, la gestione delle immagini è una questione piuttosto complicata quando si tratta di design reattivo. La funzione su funzionerà solo con le immagini presentate, non tutte le immagini nel post. Mentre ci sono metodi per farlo, incluso questo plugin, i miei test hanno mostrato problemi di prestazioni e ridimensionamento. 

Puoi anche utilizzare uno shortcode, passare un URL o un ID immagine per generare il codice, in questo modo: [jlc_picturefill_image aid = x]. Sfortunatamente senza codifica estesa, ciò disabiliterà l'uso di Media Uploader per inserire immagini nel post. Con la funzionalità drag and drop in 3.9, potrebbe causare ancora più conflitti. 

Se sei interessato a questo metodo, nel mio libro, Design reattivo con WordPress, Vado molto più approfonditamente su questo e sulle immagini WordPress in generale.

Conclusione

In questo articolo, abbiamo analizzato in modo approfondito il modo in cui WordPress gestisce le immagini e abbiamo esplorato un modo per integrarle picturefill.js in un maniero facile da usare e più efficiente. 

È importante sapere che si tratta di un'area di interesse in costante evoluzione. Man mano che i metodi migliori iniziano a svilupparsi, sono entusiasta di vedere quale sia il futuro (auspicabilmente prossimo) valido sia per le immagini reattive che per WordPress.