De nombreux thèmes WordPress proposent, via un champ personnalisé, une gestion des miniatures à afficher sur la page d’accueil. Mais pourquoi contraindre ses rédacteurs à cette manipulation, qui, il faut le dire, est relativement lourde,surtout pour le néophyte1. Le plus simple serait de recourir dans son thème à une fonction qui automatiserait la recherche de l’image à afficher en tant que thumbnail.

Évidemment, nous pouvons trouver au détour du web des fonctions au code douteux2 qui vont se contenter de chercher la première image dans le contenu du billet.

Pourquoi ne pas étendre (et améliorer tant que nous y sommes =) ce type de fonction afin d’obtenir un outil de recherche d’images au sein d’un billet ? C’est ce que je vous propose ici.

Table des matières

  1. Code source
  2. Fonctionnement
  3. Exemples d’utilisation
  4. Liste des paramètres
  5. Historique des versions et changelog

Code source

Copiez le code qui suit dans le fichier functions.php de votre thème.

Fonctionnement

Petit retour sur ce code non commenté3, car, à la lecture aisée.

Recherche des images

La fonction get_post_images va effectuer une recherche d’image(s) dans les images jointes au billet cible si l’ordre de tri est différent à natural. En effet, cette option oblige à parser le contenu dans le sens de lecture de l’article, qui peut différer de l’ordre d’ajout des images dans sa bibliothèque de médias.
Notez que la recherche non naturelle prend directement en compte les ordres de tri.

Si la recherche échoue (ou si l’ordre de tri est défini à natural), le contenu du post est analysé. Seront considérées les images comportants une classe wp-image-(\d+). Si la recherche s’avère fructueuse, le tri est appliqué.

Finalement, get_post_images retournera le résultat de la recherche au format spécifié via le paramètre output. En cas d’échec, le booléen false est retourné.

Quid de la présentation ?

Le formatage et l’affichage des données est laissé à la discrétion du développeur. La présentation pourra ainsi évoluer indépendamment de la fonction.

Exemples d’utilisation

Récupérer les images triées par date (défaut)

Nous supposons ici que l’action se déroule dans la boucle puisque qu’aucun identifiant d’article n’a été fourni. Autrement, la valeur de retour sera FALSE.

<?php get_post_images(); ?>

Liste des images triées par date inverse

<?php get_post_images('order=DESC'); ?>

Liste des images triées par ordre d’arrivée dans le billet

<?php get_post_images('orderby=natural'); ?>

Récupération de la première image

<?php get_post_images('number=1'); ?>

Récupération de la première image (par contenu, forcé)

<?php get_post_images('number=1&orderby=natural'); ?>

Afficher la miniature de la première image d’un article

La fonction first_thumbnail qui suit affichera au format thumbnail la première image du billet ayant pour identifiant $post_id. Si ce dernier est omit, l’identifiant du billet en cours d’itération depuis la boucle sera utilisé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * Display thumb of the first image from a post.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @param  array $post_id Optional. Post ID.
 * @return bool False on failure.
 */
function first_thumbnail($post_id = null)
{
    $img = get_post_images("post_id=$post_id&number=1");
    if (false !== $img)
    {
        echo wp_get_attachment_link($img[0]->ID, 'thumbnail');
    }
    else
    {
        return false;
    }
}

Générer une miniature de la première image d’un article avec timthumb

La même fonction mais qui fait appel à timthumb pour générer une miniature aux dimensions arbitraires.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/**
 * Display a dynamic thumbnail of the first image from a post.
 *
 * The defaults are as follows:
 *     'post_id' - Default is null. Post ID.
 *     'h' - Default is null. Thumbnail height.
 *     'w' - Default is null. Thumbnail width.
 *     'q' - Default is null. Thumbnail quality.
 *     'zc' - Default is null. Zoom crop used for generates the thumbnail.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @link http://code.google.com/p/timthumb/ Timthumb
 *
 * @param  array $args Optional. Overrides defaults.
 * @return bool False on failure.
 */
function first_thumbnail($args = array())
{
    $defaults = array(
        'post_id' => null,
        'h'  => null,
        'q'  => null,
        'w'  => null,
        'zc' => null,
    );
    $args    = wp_parse_args($args, $defaults);
    $post_id = $args['post_id'];
    $img     = get_post_images("post_id=$post_id&number=1");
    unset($args['post_id']);
 
    if (false !== $img)
    {
        $img = $img[0];
 
        if (null === $post_id)
        {
            if (in_the_loop())
            {
                global $post;
                $post_id = $post->ID;
            }
            else
            {
                if (isset($img->post_parent))
                {
                    $post_id = $img->post_parent;
                }
                else
                {
                    return false;
                }
            }
        }
        $query     = http_build_query($args, '', '&amp;');
        $thumbnail = sprintf('<img src="%s?src=%s%s" rel="attachment"%s%s/>',
            get_bloginfo('template_url', 'display') . '/timthumb.php', // customize timthumb url
            $img->guid,
            ($query) ? '&amp;' . $query : '',
            (isset($args['w'])) ? " width=\"{$args['w']}\"" : '',
            (isset($args['h'])) ? " height=\"{$args['h']}\"" : ''
        );
 
        printf('<a href="%s" title="%s">%s</a>',
            get_permalink($post_id),
            esc_attr(get_the_title($post_id)),
            $thumbnail
        );
    }
    else
    {
        return false;
    }
}

Ainsi, pour afficher une miniature de 260x120 pixels de la première image de l’article courant nous utiliserons :

<?php first_thumbnail('w=260&h=120'); ?>

Liste des paramètres

Voici la liste des paramètres acceptés par l’argument $args de la fonction get_post_images :

number
(integer) (optionnel) Le nombre maximal d’images à retourner. Par défaut à -1, retourne toutes les images.

order
(string) (optionnel) Ordre de tri. Les valeurs valides sont :

  • 'ASC' - Croissant (du plus petit au plus grand). (Par défaut)
  • 'DESC' - Décroissant (du plus grand au plus petit).

orderby
(string) (optionnel) Ordonner les images par l’une des valeurs qui suivent :

  • 'date' - Trier selon la date de création. (Par Défaut)
  • 'post_id' - Trier numériquement par l’ID des articles.
  • 'natural' - Trier selon l’affichage des images dans le contenu de l’article.

output
(string) (optionnel) Le format de sortie.

  • OBJECT - Retourne un tableau d’objets instances de la classe stdClass. (Par défaut)
  • ARRAY_A - Retourne un tableau associatif (nom des champs => valeurs).
  • ARRAY_N - Retourne un tableau indexé numériquement de la valeur des champs.

post_id
(integer) (optionnel) L’identifiant de l’article à analyser. Par défaut à NULL, utilise celui du billet courant dans la boucle.

preserve_keys
(boolean) (optionnel) Préserver les clés retournées par l’API de WordPress, c.-à-d les identifiants des images. Par défaut à FALSE, le tableau résultat est indexé numériquement à partir de 0.

Historique des versions et changelog

1.0.0

  • Version initiale.

Notes

  1. uploader l’image, récupérer son URL relative donc en supprimer la racine du site, ajouter un champ personnalisé pour y renseigner l’URL précédemment copiée. 

  2. franchement, que d’erreurs dans cette fonction qui a pourtant fait du bruit : la temporisation n’est d’aucune utilité, la globale $posts ne sert à rien, une Notice est générée lorsque l’article ne contient pas d’image, l’auteur de la fonction sait qu’il recherche 1 image alors pourquoi recourir à preg_match_all au lieu d’un simple preg_match ? C’est court donc c’est cool, c’est ça ? (‘o_o) 

  3. vous pouvez me flageller :-P  

publicité (chargement)

21 réponses pour WordPress : récupération avancée des images d’un article

  1. bruno bichet dit :

    Salut Mehdi, toutes mes félicitations pour cette initiative qui va rendre service à toute la communauté Wordpress \o/

  2. bruno bichet dit :

    Resalut,

    Quelques retours vite fait après avoir mis en place ta fonction. Bêtement, j’ai cru qu’en collant la première partie de la fonction dans functions.php et qu’en appelant dans la boucle, ça marcherait. J’ai du relire plusieurs fois le tuto pour m’apercevoir que j’avais oublié la fonction first_thumbnail() ^_^v Y a encore d’autres trucs importants qui m’ont échappés ?

  3. piouPiouM dit :

    La fonction first_thumbnail() est ici pour illustrer un usage de get_post_images() ;-) La fonction retourne en cas de succès un tableau (d’objets, associatif ou indexé). C’est au développeur / intégrateur d’adapter ce résultat selon ses besoins.

    Par exemple, j’avais besoin d’afficher à l’aide de timthumb les images ajoutées par l’interface de rédaction (exit les smiley et autres images hotlinkées) contenues dans un billet. D’apparence simple à faire, il arrive dans de rares situations (et c’était mon cas, bugman \o/) qu’une image insérée dans un article ne remonte pas via la fonction get_children(). D’où l’ajout de la recherche de type naturel pour forcer les choses. Je devais également pouvoir récupérer un nombre limité d’images triées dans un ordre précis mais pour en exploiter le résultat sans affichage.

    Bref, un peu de code est nécessaire derrière. Je peux en revanche, d’après la liste que vous me dresserez, créer un petit plugin plus complet :)

  4. audi dit :

    excellent code, j’utilise encore les champs personalisés :s car je bloque pour afficher le thumbnail à une taille personalisée … Quelqu’un a t’il une idée à me soumettre pour que je puisse avoir des thumbnails de tailles différentes en utilisant la fonction first_thumbnail ? Merci d’avance

  5. piouPiouM dit :

    Merci :)

    J’ai mis à jour l’article pour y ajouter une deuxième version de la fonction first_thumbnail() qui exploite timthumb (présent dans de nombreux thèmes). Tu pourras ainsi générer dynamiquement les miniatures de ton choix ;-)

  6. Carine Nethik dit :

    Une superbe contribution à wordpress pour pallier aux lacunes des champs personnalisés … qui deviennent vite complexes lorsque l’on souhaite un peu plus de sophistication ! A peine lu, et je sens que notre blog va bientôt avoir droit à ce nouvel outil !

    Merci pour ce beau travail !!

  7. kReEsTaL dit :

    Mehdi, tu déchires!

    Pour le moment, j’utilise Post-Thumb, dont je suis assez satisfaite même si ça prend vite des proportions - notamment le fait qu’il s’agisse d’un plugin de plus à mettre à jour et à surveiller.

    Je suis impatiente de tester ta solution, qui me semble bien plus propre !

    Nous autres jeunes Padawans sommes chanceux de t’avoir pour nous montrer la Voie :)

  8. FRK dit :

    Bonjour,

    interessant tout cela, sur mon futur photoblog, j’ai un theme qui utilise aussi timthumb pour generé les vignettes, qui sont presentées par categorie ou de façon aleatoire en page d’accueil.

    Dans l’administration et champs personnalisés je met thumbnail et le chemin de l’image. Ma question est-ce que timthumb serait susceptible de faire le lien aussi avec les infos exifs stockés dans l’image originale, via modification de script ?

    :-)

    Frk

  9. Kriffin dit :

    Merci beaucoup, très intéressant et beau développement !

  10. piouPiouM dit :

    Moyennement bidouille, il est effectivement possible de jouer avec les en-têtes EXIF des images. Pour cela il faut vous tourner vers la fonction exif_read_data().

  11. piouPiouM dit :

    @Carine Nethik, @kReEsTaL, @Kriffin merci :)

  12. fred G dit :

    Bonjour,

    Superbe travail :) ..

    j’imagine qu’il n’est pas possible de faire fonctionner cette fonction sur des images liées (images externes) ?

  13. bruno bichet dit :

    Je crois que je vais m’abonner à Quiche Magazine : j’ai installé tes fonctions avec timthumb non sans mal et grâce à ton aide la dernière fois, et là, je refais exactement (enfin, de mon point de vue) la même chose et patatras ! Ça marche plus.

    Pourtant, la fonction, renvoi bien 1, timthumb.php est bien accessible depuis la racine du thème, j’ai mis des images dans mon billet, j’ai bien recopié tout ce qu’il faut dans functions.php…

    Bref, je voulais juste me plaindre un peu, ça soulage ^_^v

    A++

  14. […] de la miniature qui flotte au début des résumés des articles est confié à l’excellent get_post_images() proposé par Mehdi Kabab. Ce script est composé d’un jeu de fonctions à mettre dans […]

  15. sam dit :

    Merci pour cette fonction. J’ai une question concernant l’utilisation hors de la boucle. Sur ma home j’utilise WP_Query car ayant besoin de multiple loop. Pourrais tu m’éclairer sur comment récupérer l’id du post.

    POur récupérer un id hors de la loop je crois que c’est ca :

    global $post;
    $post->ID;

    J’espère que ca ne te dérange pas si je pose une partie du code :

    1
    2
    3
    4
    5
    6
    
    $diaporama = new WP_Query('category_in=1&amp;showposts=5'); 
    while ($diaporama->have_posts()) : $diaporama->the_post();
     
    get_post_images('number=1');
     
    endwhile;

    et bien sur la fonction me retourne false false et donc pas d’image. Aurait un indice pour moi

    Merci

  16. fab dit :

    Hey super script,

    Je l’ai installé sur mon wordpress sans soucis… Ensuite j’ai modifié l’url pour que Wordpress n’affiche plus le dossier du site mais qu’il ré-écrit l’URL pour afficher que la racine. Et depuis Timthumb ne fonctionne plus…

    il m’affiche cette erreur : Unable to open image : /var/www/vhosts/monsite.com/httpdocs/ TimThumb version : 1.14

    Une solution ?

  17. manu dit :

    Bonsoir !

    Votre script est absolument génial :D félicitation Mehdi !

    J’ai tout de même une question : l’image généré dans le loops comporte un lien vers elle même. Est-il possible de faire automatiquement un lien vers l’article plutôt que vers l’image s’il vous plait ?

    Merci d’avance ;)

    (désolé, je pense bien que ce n’est pas agréable les lecteurs qui joue les rapaces sur les commentaires :( )

  18. Sh3fla dit :

    Juste pour dire merci ! Cela répond parfaitement à mon besoin.

  19. Merci pour ces explications je comprend beaucoup mieux la gestion des images avec cet article

  20. rigamarole dit :

    Bonjour,

    Bravo Mehdi pour ce travail. Étant encore une bille en PHP, j’aimerai savoir comment afficher l’image et non un thumbnail pointant vers l’URL de l’article à laquelle elle est attachée.

    Un grand Merci d’avance !

  21. Wiki Travaux dit :

    Salut Mehdi, cela fait un moment que j’essaie de placer mes derniers articles en page d’accueil et je n’avais trouvé que des bouts de codes impossible à rassembler…

    Le tiens à l’air complet mais j’ai besoin de ton aide stp pour le faire fonctionner dans ma boucle.

    J’ai insérer la 1ère et la 3ème fonction dans ma page function.php car j’ai besoin de gérer les dimensions.

    Voici le contenu (en partie) de page d’accueil:

           <?php first_thumbnail('w=260&h=120'); ?>
           <h1> <a href="<?php the_permalink(); ?>" title="<?php the_title();    ?>">
           <?php the_title(); ?><br /></a></h1>
           <?php the_content_limit('110'); ?>
    

    As tu une idée ?

    Merci d’avance

Ajouter un commentaire


Syndication

Réseaux sociaux