WordPress Post Thumbnails: ghid de activare și afișare a imaginilor reprezentative

Începând cu versiunea WordPress 2.9, platforma a introdus suportul nativ pentru imagini reprezentative (cunoscute inițial sub denumirea de Post Thumbnails, iar ulterior ca Featured Images). Această funcționalitate elimină nevoia de a folosi câmpuri personalizate (custom fields) pentru a asocia o imagine fiecărui articol.

1. Activarea suportului în fișierul functions.php

Pentru a activa această opțiune în tema ta WordPress, trebuie să declari suportul pentru miniaturi în fișierul functions.php al temei active:

// Activăm suportul pentru imagini reprezentative în temă
add_theme_support( 'post-thumbnails' );

// Setăm dimensiunea implicită a miniaturii (lățime, înălțime, decupare)
set_post_thumbnail_size( 50, 50, true );

Cum funcționează decuparea (crop)

Al treilea parametru din funcția set_post_thumbnail_size() controlează decuparea imaginii:

• true (hard crop): imaginea este redimensionată și decupată exact la dimensiunile indicate (50×50 pixeli), eliminând marginile în exces;
• false (soft proportional crop): imaginea este redimensionată proporțional, încadrându-se în limitele specificate, fără a pierde porțiuni din imagine.

2. Cum adaugi imaginea din panoul de administrare

După salvarea modificărilor în functions.php, când editezi sau adaugi un articol nou în panoul de administrare WordPress, vei observa o nouă casetă în coloana laterală din dreapta: Imagine reprezentativă (Featured Image / Post Thumbnail). De acolo poți încărca sau selecta direct din galeria media imaginea dorită.

3. Afișarea miniaturii în fișierele temei

Pentru a afișa imaginea reprezentativă în bucla principală WordPress (în index.php, archive.php sau single.php), folosește funcția the_post_thumbnail():

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <?php the_post_thumbnail(); ?>
                </a>
            </div>
        <?php endif; ?>

        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div class="entry-content">
            <?php the_excerpt(); ?>
        </div>
    </article>
<?php endwhile; endif; ?>

Funcția has_post_thumbnail() verifică mai întâi dacă articolul are o imagine asociată, prevenind afișarea unor blocuri HTML goale în cazul în care nu ai setat nicio miniatură.