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

Î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. 

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *