Suggerimento rapido utilizzo di BFI Thumb per immagini in formato personalizzato

Come sviluppatori di temi WordPress, potremmo creare un tema - o temi - che richiede immagini di una certa dimensione specifica (dimensioni). Allo stesso tempo, non possiamo attribuire la responsabilità di creare tali immagini dimensionali sugli utenti finali dei nostri temi.

Quindi qual è la soluzione? Il modo migliore per affrontare questo problema è incorporare nei nostri temi la funzionalità per generare al volo immagini di dimensioni personalizzate.

In questo tutorial, ti mostrerò come utilizzare la libreria BFI Thumb PHP per ottenere ciò.

Immagini in primo piano

Cosa sono le immagini in primo piano

Secondo il codice WordPress:

Un'immagine in primo piano è un'immagine scelta come immagine rappresentativa per post, pagine o tipi di messaggi personalizzati. La visualizzazione di questa immagine dipende dal tema. Ciò è particolarmente utile per i temi "stile rivista" in cui ogni post ha un'immagine.

Le immagini in primo piano sono state chiamate Miniature prima che il nome fosse cambiato. Quindi troverai questi due termini usati in modo intercambiabile.

Abilitazione del supporto per le immagini in primo piano

I temi devono dichiarare il loro supporto per le miniature dei post prima che l'interfaccia per l'assegnazione di queste immagini venga visualizzata nelle schermate Aggiungi post / Modifica post.

Per abilitare il supporto per le miniature delle post nel tuo tema, aggiungi la seguente riga al tuo functions.php file:

 

Visualizzazione di miniature di post nel tuo tema

Per visualizzare le miniature dei post nel tema, incollare il codice seguente in un punto appropriato nel file modello specifico:

 

Il codice sopra controlla se il post ha una miniatura prima di chiamare la funzione per visualizzarla.

La funzione add_image_size ()

Il add_image_size () funzione consente di registrare nuove dimensioni di immagine per le miniature dei post.

Per impostazione predefinita, WordPress crea le seguenti dimensioni di immagine quando un utente aggiunge un'immagine al Catalogo multimediale:

  • miniatura - (150px x 150px max)  
  • medio - (300 px x 300 px)
  • grande - (640 px x 640 px)
  • pieno - dimensioni originali caricate 

Registrazione di nuove dimensioni dell'immagine

Per registrare nuove dimensioni di immagine, usiamo il add_image_size () funzione come questa:


 

parametri:

  • nome $ - (stringa) (necessario) Il nuovo nome della dimensione dell'immagine. Predefinito: Nessuna
  • $ larghezza - (int) (opzionale) La larghezza della miniatura del post in pixel. Predefinito: 0 
  • $ altezza - (int) (opzionale) L'altezza della miniatura del post in pixel. Predefinito: 0 
  • $ raccolto - (boolean / array) (facoltativo)

Esempio di utilizzo

 

Per visualizzare le dimensioni delle immagini appena registrate nel tema, basta passare il nome della dimensione dell'immagine del pollice del post personalizzato al the_post_thumbnail () funzione, come questa:


 

Presentazione di BFI Thumb

BFI Thumb è una classe o libreria PHP che funge da resizer immagine / cropper / grayscaler / colorizer / opacitor per WordPress sviluppato da Benjamin Intal

Installazione e integrazione

1. Scarica BFI thumb da GitHub e salvalo nella directory principale del tuo tema.

2. Includi nel tuo tema aggiungendo la seguente riga al tuo functions.php file:

 

3. Utilizzare la seguente funzione ovunque si desideri visualizzare l'immagine di dimensioni personalizzate:

 400, 'altezza' => 300); bfi_thumb ("URL-to-image.jpg", $ params); ?> 

Se si guarda la funzione di cui sopra ( bfi_thumb () ), noterete che prende l'URL dell'immagine da ridimensionare come primo parametro, seguito dagli altri parametri (dimensioni dell'immagine). Quindi devi chiedertelo, come possiamo determinare l'URL della nostra miniatura del post?

Per determinare l'URL di una miniatura del post, usiamo una funzione chiamata wp_get_attachment_image_src () che prende come parametri l'ID allegato, la dimensione e un'icona opzionale.

Quindi passiamo get_post_thumbnail_id () funzione come primo parametro. Ci vuole il Post ID come parametro e restituisce il ID dell'immagine in primo piano allegata al post.

Il secondo parametro è taglia che può essere una stringa di parole chiave (miniatura, medio, grande o pieno), qualsiasi dimensione di immagine personalizzata che hai aggiunto usando il add_image_size () funzione o una matrice di due elementi che rappresenta la larghezza e l'altezza in pixel. Ma per garantire che la nostra immagine di dimensioni personalizzate abbia la massima qualità, useremo la dimensione originale - pieno.

 Ormai il nostro codice dovrebbe assomigliare a questo:

 400, 'altezza' => 300); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); bfi_thumb ($ imgsrc [0], $ params);?> 

wp_get_attachment_image_src () restituisce un array ordinato con valori corrispondenti a (0) url, (1) larghezza, (2) altezza e (3) scala di un allegato immagine (o un'icona che rappresenta qualsiasi allegato).

Ma ci interessa solo il primo parametro restituito - il URL. Lo passiamo al bfi_thumb () funzione, insieme con i nostri altri parametri (larghezza e altezza) per ottenere la nostra immagine di dimensioni personalizzate.

Avvolgendolo in una funzione

Perché è probabile che utilizzeremo questo codice più e più volte nel nostro tema - o temi - racchiudiamolo in una funzione.


 $ image_width, 'height' => $ image_height); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); $ custom_img_src = bfi_thumb ($ imgsrc [0], $ params); return $ custom_img_src;?>

Salva questo file sul tuo functions.php file.

uso

Per le immagini:

O per le immagini di sfondo:

...

Vantaggi delle immagini personalizzate rispetto alle miniature

Le immagini di dimensioni personalizzate create al volo utilizzando una libreria come BFI Thumb presentano i seguenti vantaggi rispetto alle miniature personalizzate create / aggiunte utilizzando il add_image_size () funzione:

  •  the_post_thumbail () le funzioni echeggiano un tag immagine. A volte quello che vuoi è l'url dell'immagine. Un esempio potrebbe essere il punto in cui si desidera utilizzare l'immagine come sfondo.
  • Dimensioni dell'immagine personalizzate registrate utilizzando add_image_size () non si applica alle immagini più vecchie che sono state caricate prima della registrazione della dimensione dell'immagine
  • BFI Thumb ha la capacità di ridimensionare le immagini sia verso l'alto che verso il basso
  • BFI Thumb ha anche funzioni aggiuntive come: scala di grigi, colore (colorazione), opacità, negazione

Conclusione

In questo suggerimento rapido, abbiamo esaminato le immagini in primo piano - cosa sono e come possiamo utilizzarle nei nostri temi. Abbiamo anche guardato il add_image_size () funzione per vedere come possiamo usarlo per aggiungere dimensioni di immagine personalizzate quando un'immagine viene caricata nella libreria multimediale.

Abbiamo introdotto la libreria BFI THumb PHP e illustrato come possiamo utilizzarla per creare un'immagine di dimensioni personalizzate da una miniatura post o un'immagine in primo piano.

Abbiamo quindi esaminato i limiti dell'utilizzo add_image_size () per creare dimensioni di immagine personalizzate e i vantaggi che BFI Thumb ha su di esso.

Aggiungi questa funzione al tuo functions.php file e usarlo ogni volta che è necessario per creare un'immagine di dimensioni personalizzate da una miniatura.