Cum mi-am pus ca thumbnail prima imagine din articol

Cristian Florea 9 mai 2011 Life hacks, WordPress

Ieri mi-am dat seama că deşi ştiu cât îi de grav pentru Google să ai mai multe pagini cu acelaşi conţinut, eu nu m-am chinuit să fac nimic în acest sens, motiv pentru care mi-am băgat pe index doar excerpt-ul din articol (doar primele câteva cuvinte), nu întregul text (asta pentru că întregul text se afla şi în pagina articolului, nu numai pe index). Tot ieri am făcut în aşa fel încât arhiva mea să-mi arate doar titlurile articolelor, nu şi excerpt-ul (ca să fie ceva diferit de index şi în acelaşi timp diferit şi de pagina articolelor), dar la asta mai lucrez, că parcă nu arată bine doar titlurile acolo. Toate astea după ce am citit câteva chestii la zoso.

Astăzi mi-am dat seama că excerpt-ul, aşa cum era el pe index, era urât tare, motiv pentru care am zis să afişez şi un thumbnail în stânga, pentru a încânta mai bine ochii. Aveam pusă la dispoziţie opţiunea Featured Image, introdusă foarte bine în template-ul twentyten (de la care am plecat eu când am construit ce vedeţi aici), eu fiind nevoit să mai adaug doar o simplă linie de cod pentru a afişa imaginea aferentă. Pentru că nu-mi plăcea să stau mereu să setez un Featured Image şi pentru că şi-aşa fiecare imagine care voiam eu să apară în thumbnail trebuia să fie şi în articol, am zis să afişez prima imagine care apare în text, undeva în stângă.

Am luat reţeta de aici şi am să vă explic imediat ce-am făcut de se vede aşa.

Definirea funcţiei

În primul rând, aşa cum ne îndeamnă şi acolo, am copiat în functions.php următoarele:

function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = „wp-content/themes/yourtheme/images/default.jpg”;
}
return $first_img;
}

* nu uitaţi să modificaţi calea imaginii care apare în cazul în care articolul nu conţine nicio poză

Afişarea funcţiei

Apoi am deschis loop.php (la voi poate fi index.php, depinde pentru ce versiune de WordPress a fost făcută tema) şi am adăugat înainte de locul unde se cheamă funcţia the_excerpt, următoarele:

<div id="thumb"><a href="<?php the_permalink(); ?>"><img src="<?php echo catch_that_image() ?>"></a></div>

Iar acum să explicăm:

„<div id="thumb">” reprezintă un div pe care l-am creat chiar acum şi care mă lasă să mă joc cum vreau cu imaginea. O să vedeţi în paşii următori despre ce vorbesc.

„<a href="<?php the_permalink(); ?>">” face ca pe imagine să se poată da click şi în urma click-ului să ajungi pe pagina articolului.

„<img src="<?php echo catch_that_image() ?>">” face ca funcţia ce tocmai am definit-o în functions.php să preia link-ul primei imagini din articol şi să-l afişeze ca un thumbnail.

Stilizarea

Revenind la div, eu am adăugat în style.css următoarele:

#thumb img{
width:100px;
height:100px;
float:left;
margin-right: 5px;
border:1px solid #EDEDED;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
border-radius: 5px;
-moz-box-shadow: 0 0 5px #88c2dc;
-webkit-box-shadow: 0 0 5px #EDEDED;
box-shadow: 0 0 5px #88c2dc;}

Am setat ca imaginea să se micşoreze automat la 100x100px, să zboare spre stânga şi să aibă un border exact la fel cu cel pe care-l am eu acum în sidebar.

Alt lucru pe care l-am făcut a fost să copiez în folderul „images” din cadrul template-ului meu, imaginea care să apară în momentul în care în articol n-am pus niciun fel de poză.

Tags:WordPress

Despre autor

Cristian Florea

Antreprenor ∙ Creator de conținut ∙ 14+ ani de experiență în mediul digital

22 Comments

Razna 9 mai 2011
Îmi plăcea mai mult cum era înainte…
Nu-mi place cu thumbnail :)
Răspunde
- Cristian Florea 9 mai 2011
  dar nu-i placea lui google cum era inainte si el e şăfu oarecum :D
  Răspunde
Bogdan Anghelina 9 mai 2011
Până la urmă am modificat și eu tema iar acum folosesc și eu prima imagine din articol, până acum aveam „Featured image” însă trebuia să le încarc pe host la fiecare articol și cu timpul se umple. După un timp mi-am propus să fac un set de imagini pe care să le urc pe host și să le folosesc (Imagini gen „Online”, „IT”…) pe care să le folosesc în cadrul fiecărui articol în funcție de categoria din care face parte dar așa prima pagină devenea toată într-o culoare, monotonă și urâtă astfel am trecut și eu la metoda asta pe care o știam de mult din sursa de acolo dar n-am avut inițiativă. Din greșeli înveți.
Răspunde
- Cristian Florea 9 mai 2011
  la tine au o marime ciudata pozele alea. unele se lungesc si se fac urate. ar trebui sa le introduci tu in articol direct cu un width mai mare decat height, ca atunci cand se micsoreaza pt thumbnail sa nu se schimbe prea mult aspectul
  Răspunde
  - Bogdan Anghelina 9 mai 2011
    M-am gândit și la asta însa așa e tema, voi face efortul de a alege niște imagini mai wide :-). Acum am de schimbat coduri și la „Articole recomandate” și în sidebar la „Cele mai recente articole”.
Alexander 10 mai 2011
google s-a tampit, ce sef? am facut o analiza de continut si nea goagal considera ca am cuvinte obscene pt ca folosesc cuvantul „cum” Deci lui goagal nu prea ii place romana.
Răspunde
- Cristian Florea 10 mai 2011
  depinde ce fel de analiza ai facut tu. daca era un tool romanesc, n-avea cum sa spuna asemenea aberatii.
  de ce e sef? pentru ca un blog care nu apare in google nu prea e blog. cati vizitatori crezi ca poti castiga fara google?
  Răspunde
  - Alexander 10 mai 2011
    regulile prin google.com s-au schimbat putin si atunci am testat evident cu un tool general valabil ca in google.ro nu vad sa am probleme.
- vlad gidea 15 mai 2011
  cum[en]=slobozi[ro] … De asta ar impresia ca esti bloggerul porno
  Răspunde
  - Cristian Florea 15 mai 2011
    da, eu stiam asta, de-aia am intrebat daca era vorba de un tool in lb. romana.
Zoly 10 mai 2011
Arata mult mai bine tema ta cu thumbnail. Ai facut o alegere inspirata.
Răspunde
- Cristian Florea 10 mai 2011
  ma bucur ca-ti place. multumesc!
  Răspunde
Danniel 10 mai 2011
Foarte bine arată așa, poate voi băga și eu, să văd!
Răspunde
- Cristian Florea 10 mai 2011
  daca iti bagi si tu, treci apoi pe-aici si dai de stire. sunt curios cu va arata si cat de usor ai reusit sa faci asta :D
  Răspunde
  - Danniel 10 mai 2011
    Nu am reușit :)) adică îmi afișează imaginea, dar nu corect, fără redimensionare și fără border și shadow :D
  - Cristian Florea 11 mai 2011
    inseamna ca ceva nu-i bine din css. poti pune aici ceea ce ai scris acolo si vedem daca-i bine sau nu :D
Danniel 11 mai 2011
Păi am copiat exact de la tine, dar văd că nu merge :)) Las așa cum e ;)
Răspunde
- Cristian Florea 11 mai 2011
  io sunt dispus sa te ajut. depinde si cat de mult vrei tu thumbnail :))
  Răspunde
Danniel 11 mai 2011
Păi, aș vrea :)) dar nu reușesc m-am luat la bătaie cu stresul dar nu am reușit nicicum!
Răspunde
- Cristian Florea 11 mai 2011
  trimite pe fc@floreacristian.ro un mail cu ce eroare iti apare. trebuie sa-i dam de cap :D si un print screen ar fi de ajutor :)
  Răspunde
Florin 16 mai 2011
Eu după ce am copiat acea funcție în functions.php nu se mai încărca pagina, primeam 500 Internal Server Error. A trebuit să intru prin ftp și să șterg funcția. Poate reușesc să îi dau de capăt până la urmă :)
Răspunde
- Cristian Florea 17 mai 2011
  daca n-ai reusit, da-mi de stire pe mail (eventual un print screen, sau chiar fisierul functions.php) si vedem noi cum facem
  Răspunde