Sfat rapid Folosind BFI Thumb pentru imaginile recomandate la dimensiunea particularizată

Ca dezvoltatori temă WordPress, am putea crea o temă - sau teme - care necesită ca imaginile să aibă o anumită dimensiune (dimensiuni) specifice. În același timp, nu putem plasa responsabilitatea creării unor astfel de imagini specifice dimensiunilor utilizatorilor finali ai temelor noastre.

Deci, care este soluția? Cea mai bună modalitate de a rezolva această problemă este de a încorpora în tema (ele) noastre funcționalitatea de generare a imaginilor de dimensiuni personalizate în zbor.

În acest tutorial, vă voi arăta cum să folosiți biblioteca BFI Thumb PHP pentru a obține acest lucru.

Imagini recomandate

Ce sunt Imagini recomandate

Conform Codului WordPress:

O Imagine recomandată este o imagine care este aleasă ca imagine reprezentativă pentru postări, pagini sau tipuri personalizate de postări. Afișarea acestei imagini este în funcție de temă. Acest lucru este util în special pentru temele "în stilul revistei", în care fiecare post are o imagine.

Imaginile recomandate au fost numite Thumbnails înainte ca numele să fie schimbat. Deci, veți găsi acești doi termeni folosiți interschimbabil.

Activarea suportului pentru imaginile recomandate

Temele trebuie să declare sprijinul pentru miniaturi post înainte ca interfața pentru atribuirea acestor imagini să apară în ecranele Adăugați postare / editare post.

Pentru a activa suportul pentru miniaturi postate în tema dvs., adăugați următoarea linie la dvs. functions.php fişier:

Afișarea miniaturilor post în tema dvs.

Pentru a afișa miniaturile postate în tema dvs., inserați următorul cod într-un loc potrivit în fișierul dvs. șablon specific:

Codul de mai sus verifică dacă postul are o miniatură înainte de a apela funcția pentru ao afișa.

Funcția add_image_size ()

add_image_size () vă permite să înregistrați dimensiuni noi de imagini pentru miniaturi postate.

Implicit, WordPress creează următoarele dimensiuni de imagini atunci când un utilizator adaugă o imagine la Biblioteca media:

• miniatură - (maxim 150px x 150px)  
• mediu - (300px x 300px)
• mare - (640px x 640px)
• dimensiunea originală încărcată 

Înregistrarea unui nou dimensiune a imaginii

Pentru a înregistra noi dimensiuni de imagine, folosim add_image_size () funcționează astfel:

 

parametri:

• numele $ - (şir) (necesar) Numele noului dimensiune a imaginii. Mod implicit: Nici unul
• $ lățime - (int) (opțional) Lățimea miniaturilor postului în pixeli. Implicit: 0 
• $ înălțime - (int) (opțional) Înălțimea miniaturilor postului în pixeli. Implicit: 0 
• culturi $ - (boolean / matrice) (opțional)

Exemplu de utilizare

Pentru a afișa dimensiunile imaginilor înregistrate nou în temă, pur și simplu treci numele dimensiunii imaginii degetului personalizat la imagine the_post_thumbnail () funcționează astfel:

Introducerea BFI Thumb

BFI Thumb este o clasă sau o bibliotecă care acționează ca un resizer / cropper / grayscaler / colorizer / opacitor pentru WordPress, dezvoltat de Benjamin Intal. 

Instalare și integrare

1. Descărcați degetul BFI de la GitHub și salvați-l în directorul rădăcină al temei.

2. Includeți în temă adăugând următoarea linie la dvs. functions.php fişier:

3. Utilizați următoarea funcție ori de câte ori doriți să afișați imaginea de dimensiune particularizată:

 400, "înălțime" => 300); bfi_thumb ("URL-to-image.jpg", param $); ?> 

Dacă priviți la funcția de mai sus ( bfi_thumb () ), veți observa că este necesar ca URL-ul imaginii să fie redimensionat ca prim parametru, urmat de ceilalți parametri (dimensiunile imaginii). Deci, trebuie să vă întrebați, cum determinăm URL-ul miniaturii noastre postare?

Pentru a determina adresa URL a unei miniaturi postare, folosim o funcție numită wp_get_attachment_image_src () care ia parametrii de atașament, mărimea și o pictogramă opțională.

Așa că trecem get_post_thumbnail_id () funcția ca primul parametru. Este nevoie de ID-ul postului ca parametru și returnează ID-ul din imaginea recomandată atașată postului.

Al doilea parametru este mărimea care poate fi fie un cuvânt cheie șir (miniatură, mediu, mare sau plin), orice dimensiune personalizată a imaginii pe care ați adăugat-o utilizând add_image_size () funcție sau o matrice de două elemente care reprezintă lățimea și înălțimea în pixeli. Dar pentru a ne asigura că imaginea noastră de dimensiuni personalizate are cea mai înaltă calitate, vom folosi dimensiunea originală - deplin.

 Până acum codul nostru ar trebui să arate cam așa:

 400, "înălțime" => 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 () returnează o matrice ordonată cu valori corespunzătoare urlului (0), (1) lățimea, (2) înălțimea și (3) scara unui atasament de imagine (sau o pictogramă care reprezintă orice atașament).

Dar suntem interesați doar de primul parametru returnat - URL-. Noi îl transmitem către bfi_thumb () împreună cu ceilalți parametri (lățime și înălțime) pentru a obține imaginea noastră personalizată.

Înfășurarea în funcție

Pentru că este foarte probabil să folosim acest cod din nou în tema - sau pe teme - să îl înfășurăm într-o funcție.

 $ image_width, 'înălțime' => $ 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ți acest fișier la dvs. functions.php fişier.

folosire

Pentru imagini:

Sau pentru imaginile de fundal:

... 
 

Avantajele imaginilor personalizate prin miniaturi

Imaginile cu dimensiuni personalizate create pe o bordă folosind o bibliotecă ca BFI Thumb au următoarele avantaje în raport cu miniaturile personalizate create / adăugate utilizând add_image_size () funcţie:

•  the_post_thumbail () funcțiile ecou dintr-o etichetă imagine. Uneori, ceea ce doriți este adresa URL a imaginii. Un exemplu ar fi locul în care doriți să utilizați imaginea ca fundal.
• Dimensiunile imaginilor personalizate înregistrate folosind add_image_size () nu se va aplica imaginilor mai vechi care au fost încărcate înainte ca dimensiunea imaginii să fie înregistrată
• BFI Thumb are capacitatea de a redimensiona imaginile atât sus cât și în jos
• BFI Thumb are, de asemenea, funcții suplimentare, cum ar fi: tonuri de gri, culoare (colorize), opacitate, negate

Concluzie

În acest sfat rapid, ne-am uitat la imaginile prezentate - ce sunt și cum le putem folosi în temele noastre. De asemenea, ne-am uitat la add_image_size () pentru a vedea cum o putem folosi pentru a adăuga dimensiuni personalizate ale imaginilor atunci când o imagine este încărcată în biblioteca media.

Am introdus biblioteca BFI Thumb PHP și am ilustrat modul în care o putem folosi pentru a crea o imagine de dimensiune particularizată dintr-o miniatură post sau o imagine recomandată.

Apoi am analizat limitele de utilizare add_image_size () pentru a crea dimensiuni personalizate ale imaginilor și avantajele pe care le are BFI Thumb.

Adăugați această funcție la dvs. functions.php fișier și utilizați-l ori de câte ori aveți nevoie pentru a crea o imagine de dimensiuni personalizate dintr-o miniatură.