WordPress : afficher toutes les miniatures liées à un article sur les pages média

25/08/2009
Wordpress Allez aux commentaires

Bon le titre de mon billet est un peu long mais c'est le seul moyen d'être clair (et encore) ^^. Comme j'ai déjà eu plusieurs demandes à ce sujet dont une tout récemment, je vous propose donc une fonction qui va vous permettre d'afficher toutes les miniatures des images liées à un article directement sur les pages médias (les pages où s'affichent les pièces jointes donc). L'intérêt est donc de permettre à vos visiteurs de naviguer plus facilement dans la galerie d'un article en ayant accès à l'ensemble des images sur chaque page d'image.

wordpress-afficher-toutes-les-miniatures-liees-a-un-article-sur-les-pages-media-574-300x132

Je sens que ce n'est pas clair pour tout le monde, alors voici un exemple en image :

Vous voyez, ici on se trouve sur un page d'image et sur la droite on a l'ensemble de la galerie, avec en bonus une classe spécifique pour différencier la miniature qui correspond à l'image que l'on est en train de regarder.

Le script

Les portions de code suivantes sont à ajouter dans le fichier functions.php de votre thème.

########################################################
#      Fonction wall thumb (http://www.webinventif.com/wordpress-afficher-toutes-miniatures-liees-article-pages-media/)
########################################################
function wallthumb($id=false,$beforelist='<ul class="gallerythumb">',$afterlist='</ul>',$beforeitem='<li>',$afteritem='</li>'){
        global $wp_query;
        $goquery = $wp_query->post;//contenu de la requète
        if(is_attachment()){
                $ptitre = $goquery->post_title;//le titre de l'image
                $idparent = $goquery->post_parent;//l'id de la page parente
                if(!$id){//si pas d'id en argument, on tente de la recuperer
                        $id = $goquery->ID;
                }
                if($idparent == null || $idparent == '' || $idparent == 0){
                        return;//si l'image est orpheline (sans page parente) on stop la fonction
                }
                //$twice = get_posts('post_type=attachment&post_mime_type=image&numberposts=-1&order=ASC&post_status=null&post_parent='.$idparent);//recup des infos des pièces jointes a la page parente
                $twice = get_children('post_type=attachment&post_mime_type=image&order=ASC&post_parent='.$idparent);//recup des infos des pièces jointes a la page parente
                $stocklienimage = array();//pour stocker les liens images
                if($twice){//si pièces jointes
                        foreach ($twice as $value) {//boucle
                                $classthumbactu = '';
                                if($value->ID == $id){//detection de l'image courante dans la boucle pour ajout d'une classe pour la differencier
                                        $classthumbactu=' thumbactu';
                                }
                                $stocklienimage[$value->ID] = $beforeitem.'<a class="wallthumb'.$classthumbactu.'" href="'.get_attachment_link($value->ID).'" title="'.wp_specialchars( get_the_title($value->ID), 1 ).'" rel="attachment">'.wp_get_attachment_image( $value->ID, 'thumbnail' ).'</a>'.$afteritem;
                        }
                }else{
                        return;
                }
                echo $beforelist.implode('', $stocklienimage).$afterlist;//affichage de la liste
        }
}

Utilisation

Il vous suffit de placer ce bout de code dans votre thème à l'endroit ou vous souhaitez voir apparaitre le lien, en général dans attachment.php ou parfois dans image.php

<?php wallthumb() ?>

Vous pouvez également personnaliser le type de liste en modifiant les attributs $beforelist, $afterlist, $beforeitem, $afteritem. Par exemple si vous vouliez un simple enchainement de miniatures contenu dans une DIV :

<?php wallthumb(false,'<div class="magalerie">',$afterlist='</div>',$beforeitem='',$afteritem='') ?>

A noter que par défaut la liste comporte un ID "gallerythumb", que les images comportent la classe "attachment-thumbnail", que les liens des miniatures comportent la classe "wallthumb" et que le lien vers la miniature actuelle comporte en plus la classe "thumbactu"

Edit: j'ai inspiré Mehdi qui nous a pondu un code plus propre que le mien, voici le résultat (merci à lui, et du coup on se rend compte que je suis une quiche en PHP ^^ )

Au final

Je vous conseille d'éviter d'utiliser cette fonction si vos galeries comportent des centaines d'images car ça alourdirait considérablement la navigation, aussi bien visuellement qu'au niveau charge serveur. Penser bien évidement à utiliser un plugin du style wp-super-cache pour ménager les appels vers votre base de données.

Préférez l'utilisation d'une liste html plutôt qu'un simple suite d'images, quitte à utiliser un bout de CSS pour obtenir le visuel voulu.

-----

Articles relatifs

  • ★Nuzz

    Super astuce.
    Bizarrement, avec mon thème, j’ai du rajouter: dans le fichier single.php ! Sa marche correctement, mais j’ai pas de fichier attachment.php ni images.php…
    Une idée pour rajouter une publicité du style adsense seulement sur la page de fichier joint ?

    Merci à toi

  • ★Nuzz

    @Julien
    Il serait clairement plus simple si je pouvais dupliquer mon fichier single.php en le renommant en attachment.php mais ensuite que devrais je modifier pour que ce soit le fichier attachment qui soit prit en compte à la place du fichier single.php dans le cadre des pièces jointes ?

    Désolé je suis pas très clair et pas doué non plus 😉
    En bref que dois je modifier suite à la duplication et au renommage du fichier single.php en attachment.php pour que ce soit ce dernier qui soit prit en compte ?

    Merci à toi

  • C’est cool ! Par contre mélanger la présentation c’est moins cool car le moindre changement impliquera de flinguer la fonction.

    Le mieux est d’avoir une fonction get_wallthumbs($id_du_post = null) qui, si aucun argument est fourni, utilise le $post courrant.

    Et une seconde fonction pour faire de la mise en page (pour ceux qui ne manient pas assez bien le PHP).

  • Julien

    @Oncle Tom
    En fait tu voudrais une fonction qui récupère juste les infos des miniatures (via un tableau ou un objet) et une autre qui met en forme ?

    Je sais j’ai fait ça un peu à l’arrache mais bon ^^

  • Julien

    @★Nuzz
    Ah effectivement il peut arriver que sur certains thèmes il n’y ai pas de attachment.php (rare mais ça arrive). Dans ce cas là c’est bel et bien single.php qui prend le relais. Pour intégrer des pubs juste sur les pièces jointes, soit tu dupliques ton single.php en le renommant attachement.php et tu t’en donne à coeur joie, soit tu utilises la fonction PHP de wordpress :

    if(is_attachment()){//ton code ici }

  • Julien

    @★Nuzz
    Tu n’as rien d’autre à faire ! C’est la magie de wordpress ça ^^

    En gros wordpress scan ton dossier thème à la recherche du du fichier attachment.php, si il ne le trouve pas il utilise single.php. De même, si tu as un fichier image.php, c’est lui qui sera utilisé pour les images plutôt que attachment.php ou single.php.

    Ensuite pour le code à l’intérieur le fonctionnement ne change pas car une page de pièce jointe peut être construite exactement comme si c’était single.php. Fait quelques tests et tu verras 🙂

  • je me permet posé une question, simple pour vous mais pas simple pour moi, je viens d’installer WP sur un site hotte et je ne peut pas récupéré mes anciens articles de mon ancien blog, un message comme quoi je ne peut déplacé un fichier sur l’emplacement sélectionné.
    une autre question qui va dans le sens de votre discutions, j’ai voulu installé un thème Arthemia mais j’arrive pas a avoir les photo comme des lettrine sur mes article es que c’est du a un code php ou autre.
    merci

  • ★Nuzz

    @Julien
    Efectivement, je viens de tester et le fichier attachment.php est belle et bien automatiquement prit en compte. Cependant, l’image principale ne s’affiche plus en pièce jointe, la page est correct sauf qu’il manque l’image que l’on souhaite affichée…
    Une petite idée ?

  • Julien

    @hnawelhik
    Peut-être un problème de droit sur les fichiers. Enfin je ne suis pas sur d’avoir réellement saisi ton soucis. (Et n’oublie pas qu’un forum de support existe) 🙂

    @★Nuzz
    Hum, ça doit se jouer à pas grand chose, peut-être un $id pas bon ou une condition is_attachment ou is_single mal placée. Copie/colle le code source de ton fichier php ici et donne le lien.

  • Pingback: Mes favoris du 25-08-09 au 26-08-09()

  • ★Nuzz

    @Julien
    C’est tout de même bizarre que avec un fichier exatement pareil l’un affiche le fichier joint et l’autre non… surement la magie de wordpress 🙂
    Voici l’url: http://tinypaste.com/ca6ce88

    Grand merci à toi Julien de ‘accorder un peu de ton temps.

  • ★Nuzz

    @Julien
    Merci Julien, avec le bout de code que tu m’as donné, le fichier joint s’affiche correctement. Bonne journée et à très bientôt !

  • Salut !
    Bizarrement chez moi le code ne fonctionne pas. Rien ne s’affiche sur ma page :/

    En tout cas, merci de partager le code :p

  • Julien

    @★Nuzz
    Hum c’est louche effectivement, ça devrait fonctionner comme ça ! Ce ne serait pas juste un soucis de CSS ? Au pire tente la manip suivante pour voir si ça fonctionne : http://tinypaste.com/607559e (attention j’ai pas testé)

    @Valentin
    Tu utilises bien une version à jour de wordpress ? Sinon colle moi le code html généré par la page pour voir …

  • Julien

    @★Nuzz
    Voilà une affaire qui roule ! Bonne journée à toi également 😉

  • Pingback: Afficher les images de vos articles WordPress ! sur Geekeries.fr | Découvrir WordPress()

  • A quand le retour du blogueur au web inventif ?

    Sinon merci pour le code.

  • Pingback: Display all thumbs related to a specific page on a media page in WordPress()

  • Pingback: KRUZ-GRAPHIX | メディアにある画像のサムネールを表示するWordpressハック()

  • Pingback: Ver miniaturas relacionas en una página específica Wordpress | T CREA()

  • carlitos

    you can show this on the attachment.php page ?

  • carlitos

    sorry lol i fail, i didnt read before asking, sorry for that

  • Franck

    avec WP 2.9 on peut utiliser des attributs include/exclude pour créer une galerie personnalisée.
    Comment faire pour que les images sélectionnées « suivent » dans le wallthumb ? Avec le code toutes les images de la galerie apparaissent 😉
    Merci de ton aide.

  • Pingback: Experts Developers()

  • Très beau script. En ce qui me concerne, je cherche un script qui affiche la miniature correspondant à l’image ajouté dans le custum field « Image » sans avoir à ajouter une image dans « Mettre une image à la une ». Un script qui permette de choisir directement la taille précisée dans l’index.php

    Mon explication est compliquée mais j’espère avoir été compris.

    Merci encore pour les infos.

  • Pingback: Muriel Daumerie()