WordPress : afficher toutes les miniatures liées à un article sur les pages média
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.
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.fr/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
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 :
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.
-----
iTypo: thème Wordpress gratuit
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
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).
@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 ^^
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
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 biensingle.phpqui prend le relais. Pour intégrer des pubs juste sur les pièces jointes, soit tu dupliques tonsingle.phpen le renommantattachement.phpet tu t’en donne à coeur joie, soit tu utilises la fonction PHP de wordpress :if(is_attachment()){//ton code ici }@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
@★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
@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 ?
@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.
@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.
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
@★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
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 !
@★Nuzz
Voilà une affaire qui roule ! Bonne journée à toi également
A quand le retour du blogueur au web inventif ?
Sinon merci pour le code.
you can show this on the attachment.php page ?
sorry lol i fail, i didnt read before asking, sorry for that
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.
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.