# Cum să vezi Imaginile Reprezentative în articolele temei tale Genesis

- Link: https://catalin.ro/cum-sa-vezi-imaginile-reprezentative-in-articolele-temei-tale-genesis/
- Published: 2017-04-17T11:23:00+03:00
- Author: Cătălin

În acest articol vă voi arăta cum să vedeți Imaginile Reprezentative în articolele
temelor ce folosesc Framework-ul Genesis pentru site-urile mele ce au la bază platforma
WordPress. Da, știu, cei care mă citiți ați văzut de-a lungul timpului opinii diferite
ale mele, referitoare la acest framework, însă, de această dată nu cred că se va
mai întâmpla să scot ceva negativ la adresa Genesis, fiindcă, înainte nu prea îmi
făceam timp să le „bibilesc”, acum, îmi fac, fiindcă am văzut potențial în acest
framework. Dar să trecem totuși la subiect..

**Pasul 1.**

Întotdeauna înainte de umbla la un site care este funcțional, faceți un backup al
fișierelor, chiar și al bazei de date, dacă stricați ceva, să știți sigur că aveți
cum să aduceți totul înapoi la normal. Da firma de hosting ține și ea un backup 
al site-urilor ce le găzduiesc, însă, pentru precauție mai bine țineți și voi un
backup, fiindcă niciodată nu se știe cum se poate întâmpla o eroare umană, iar exemple
avem destule.

**Pasul 2.**

Intrați fie folosind un client FTP, precum FileZilla (acesta îl folosesc eu cel 
puțin), intrați în folderul /wp-content/themes/tema-voastră-Genesis/ , acolo veți
găsi **functions.php** și **style.css**, aceste două fișiere sunt singurele de care
avem nevoie.

**Pasul 3.**

Deschideți **functions.php** și în josul acestei teme, adică unde nu mai există 
nici o linie de cod, dați **click**, și apoi **Enter** pentru a adăuga următoarele
linii:

`// Register a custom image size for Singular Featured images`
`add_image_size( '
singular-featured-thumb', 800, 500, true );`

`add_action( 'genesis_before_entry', 'sk_display_featured_image' );`
`function sk_display_featured_image(){``
if ( ! is_singular( array( 'post' ) ) ) {`` return;`` }`` if ( ! has_post_thumbnail()){``
return;`` }`` // Display featured image above content`` echo '<div class="singular-
featured-image">';`` genesis_image( array( 'size' => 'singular-featured-thumb' ));``
echo '</div>';``}`

**Pasul 4.**

Dacă vreți să modificați dimensiunile imaginii reprezentative, adică acele dimensiuni
care vor fi văzute pe site, modificați după cum urmează.. **800** reprezintă lățimea
maximă a imaginii pe care o aveți ca imagine reprezentativă, iar **500** reprezintă
înălțimea respectivei imagini. Puteți pune ce vreți voi, însă doar așa puneți, nu
cu %, sau alte forme de html code. Apoi după ce ați modificat respectivele opțiuni,
salvați fișierul.

**Pasul 5.**

După ce ați făcut pașii de mai sus, acum urmează pasul în care adăugați câteva linii
de cod în fișierul **style.css**, evident după ce ați deschis respectivul fișier,
mergeți la fel la ultima linie de cod, **click**, urmat de **Enter**, și adăugați
următorul cod:

`.singular-featured-image img {`
` vertical-align: top;`` display: block;`` margin:
auto;``}`

`@media only screen and (max-width: 800px) {`
` .singular-featured-image {`` margin-
bottom: 40px;`` }``}`

Și aici modificați acel **800** în lățimea maximă pe care ați pus-o și în **functions.
php**. Salvați, și cam asta este.

Acum dacă totul a fost făcut precum în pașii de mai sus, puteți merge pe blogul 
dumneavoastră, și accesați unul din articole. Totuși repet.. **aceste setări se 
aplică doar temelor WordPress din framework-ul Genesis, nu se aplică și altor teme.**