Utiliser les Images à la Une

(Article adapté depuis New in WordPress par Mark Jaquith – en anglais)

Il existe différentes extensions pour gérer des miniatures d’articles, comme par exemple Simple Post Thumbnail.
Mais depuis la version 2.9 de WordPress, cette fonctionnalité, appelée Image à la Une en français, peut être activée directement via le thème courant.

Tout d’abord, dans le fichier functions.php du thème utilisé dans votre installation WordPress, il suffit de déclarer cette option. Ce qui va l’activer dans l’administration du site dans la gestion des Articles et des Pages :

 add_theme_support( 'post-thumbnails'); 

Si vous souhaitez l’activer sur l’un ou l’autre uniquement utilisez la syntaxe suivante :

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Ajouter sur les articles uniquement
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Ajouter sur les pages uniquement

Ensuite, il sera utile de spécifier des tailles de redimensionnement pour vos miniatures. Il existe 2 options : le Box-resizing et le Hard-cropping.

Le Box-resizing réduit l’image de manière proportionnelle, pour coller au plus près de la largeur et de la hauteur spécifiée. Par exemple, si vous définissez le box-resizing à 50 x 50 pixels, une image faisant 100 x 50 pixels, sera réduite à la taille de 50 x 25 pixels.

 set_post_thumbnail_size( 50, 50 ); // 50 pixels en largeur par 50 pixels en hauteur, box resize

Cette technique permet de toujours obtenir un recadrement homothétique sans perdre un bout de l’image. Mais cela implique que la taille finale de la miniature varie.

Pour forcer la taille de la miniature, il faudra donc utiliser le Hard-cropping qui réduira l’image et au besoin la retaillera pour la faire coller avec les dimensions souhaitées.

set_post_thumbnail_size( 50, 50, true ); // 50 pixels en largeur par 50 pixels en hauteur, mode hard crop

Ensuite, il suffira d’appeler les fonctions propres à cette option directement dans les pages du thème, là où se placeront les miniatures :
La fonction has_post_thumbnail() retourne vrai ou faux et indique si l’article en cours contient une Image à la Une.

<?php
if ( has_post_thumbnail() ) {
 // si l'article à une miniature
} else {
 // s'il n'en a pas...
}

?>

La fonction the_post_thumbnail() affiche la miniature.

<?php the_post_thumbnail(); ?>

Voila pour les bases de cette fonctionnalité.

Maintenant, comment procéder si vous souhaitez afficher une miniature de 50 x 50 pixels sur l’accueil du site et  200 pixels de large avec une hauteur indéterminée sur la page des archives ? Très simplement, en déclarant différentes retailles dans le fichier functions.php !

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true ); // Miniatures de l'accueil
add_image_size( 'miniature-archives', 200, 9999 ); // Miniatures des archives

Pour afficher les miniatures sur l’accueil :

<?php the_post_thumbnail(); ?>

Et sur la page  des archives :

<?php the_post_thumbnail( 'miniature-archives' ); ?>

Chaque appel à  la fonction add_image_size( $handle, $width, $height, {$hard_crop_switch} );, permet  de définir une nouvelle taille de miniature.

Seul bémol de cette fonctionnalité, la génération de miniatures marche uniquement pour les nouvelles images.  Celles déjà présentes dans la bibliothèque de médias, devront être générées en installant l’extension Regenerate Thumbnails .

Je trouve cet ajout très pratique dans la réalisation de sites sous WordPress, au niveau de sa mise en place mais également à l’utilisation. Je l’utilise pour différents projets dont celui-ci :
http://www.agrobio-bretagne.org

  • http://affiliation-systeme.com David

    Bonjour

    Merci pour cet article, je suis bien content d’être tombé ici :)

    Une petite précision, donc on met la fonction the_post_thumbnail() qui affiche la miniature, entre if ( has_post_thumbnail() ) { et le commentaire c’est ça ?

  • admin

    Salut David,

    oui effectivement, la syntaxe complète est :

    < ?php
    if ( has_post_thumbnail() ) {
    the_post_thumbnail();
    } else {
    // s'il n'en a pas...
    }

    ?>

  • http://www.techbrunch.fr/ TechBrunch

    Merci beaucoup cet article m’a bien servi.

  • http://www.christopheseutin.be Arobase

    Bonjour et merci beaucoup, ça fonctionne nikel avec des articles MAIS comment faire pareil pour les pages ? j’ai bien tenté ceci:

    Mais il ne reconnait pas la fonction has_page_thumnail …
    Si quelqu’un a la solution je suis toute ouïe ;-)

  • admin

    Hello Arobase,

    en fait il faut utiliser la même fonction d’appel que pour les articles :

    < ?php has_post_thumbnail($post_id) ?>

    ou encore dans la boucle principal (the loop en langage WP) :

    < ?php the_post_thumbnail( ); ?>

  • http://www.lezard-rouge.fr mariek

    Merci, ça m’a bien aidé !

  • darknote

    peut-on avoir un exemple d’un code pour image de taille 50×50 aligner à gauche ou à droite ?
    Merci

  • admin

    Bonjour darknote,

    la méthode est celle indiquée dans l’article :
    add_image_size( 'miniature-archives', 50, 50, true ); // 50 pixels en largeur par 50 pixels en hauteur, mode hard crop
    mais pour l’alignement, il faut modifier la CSS de ton thème pour la classe de ta miniature, par exemple :

    .attachment-miniature-archives{
    float:right; // ou bien left
    }

  • http://christus-web.com/ Olivier C

    Vraiment génial,

    On m’avait conseillé votre page sur le forum de WordPress et je ne suis pas déçus : ça marche nickel pour mon thème. Par contre, y-a-t’il moyen de changer le dossier par défaut où sont stockées les images ?

    Merci de votre éventuelle réponse.

  • admin

    Bonjour Olivier,

    merci pour les compliments !

    Les fichiers sont gérés par la bibliothèque de médias WordPress et par conséquent le dossier est le même pour tous.
    Sinon, il faut utiliser un plugin comme NextGen Gallery par exemple, qui permet de classer des photos par albums et par galeries. De cette manière, ces images seront disponibles pour l’Image à la une des articles.

    Bonne continuation,

  • Joseph

    Merci pour le partage
    je cherche un moyen de pouvoir agrandir ces miniatures générées façon lightbox ou autres au survol ou au clic, connaissez vous un moyen ?

  • admin

    Bonjour Joseph,

    c’est possible en ajoutant un lien lightbox autour de la fonction the_post_thumbnail() :

    <?php
     if ( has_post_thumbnail()) {
       $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
       echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" rel="lightbox" rel="nofollow">';
       the_post_thumbnail('thumbnail');
       echo '</a>';
     }
     ?>
    

    il faut biensûr installer lightbox avec ce plugin par exemple :
    http://wordpress.org/extend/plugins/lightbox-2/

    ou un autre plus paramétrable…

  • combo

    Bonjour,

    j ai testé votre astuces assez sympa qui fonctionne très bien pou rles articles et les pages, mais…il y a toujours un mais ….je souhaiterais que ses images à la une soit afficher sur ma page home.php et je n’y arrive pas y aurait il une astuce a ce niveau la ?

  • admin

    Hello,

    les images à la une fonctionnent sur toutes les pages de thème WP à condition d’être au sein d’une boucle appelée par la fonction the_loop()

  • darknote

    http://wpengineer.com/1930/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/

    // left align
    the_post_thumbnail(array(100,100), array(‘class’ => ‘alignleft’));
    // right align
    the_post_thumbnail(array(100,100), array(‘class’ => ‘alignright’));

  • admin

    pas mal! ça peut être plus pratique de cette manière en effet. On peut aussi ajouter d’autres attributs si besoin :
    http://codex.wordpress.org/Function_Reference/the_post_thumbnail#Parameters
    comme le title et le alt des images…

  • Ekortal_xp

    Bonjour, Voila quand les personnes upload des photos je les recois que dans le dossier uploads/2011/tmp au lieu de uploads/2011/11

  • admin

    peux-tu préciser ta demande ? je ne comprends pas ton message. Qui sont les personnes ? Dans quel cadre « reçois-tu » les photos ?

  • Fanfarlo

    Vraiment merci pour cet article très clair! Il m’a aidé et fonctionne à merveille.

  • Dimitri Bocquet

    Merci pour ton partage, l’article convient exactement a ce que je voulais faire!

  • ekortal

    Bonjour cela fait pas loin de 6 mois que jessaye de resoudre mon probleme jai cherche meme demande mon hebergeur internet, wordpress,(les droits fichier ? ) et aussi les createur de mon template sans succes. si je peux vous demande de m’aider je suis sur msn messenger ekortal@hotmail.fr

    - voila le site http://www.homeforisrael.com quand une personne desire deposer une annonce avec une photo, je recois l’annonce mais sans la photo meme dans images a la une.
    Elle se place dans wp-content/uploads/tmp.

    si une lumiere a code php ou programation peut me resoudre se probleme cela m’eviterai de perdre espoir a tel point. :-(