Afficher automatiquement toutes les images attachées à un article

wordpress galerie image automatique

WordPress considère que toute image ajoutée à la médiathèque via la page d'édition d'un article est attachée à cet article.

Pour faciliter la gestion d'une galerie d'images (pour un portfolio ou une fiche produit par exemple) et avoir plus de souplesse quant à son rendu en front, il peut être judicieux d'automatiser son affichage.

Je vous propose donc quelques codes vous permettant de lister les images attachées à un article, avec une ouverture en lightbox lorsqu'on clique dessus (avec le plugin WP Lightbox 2). Ces codes doivent être insérés dans la loop (à l'intérieur de "if (have_post)…"), dans votre fichier single.php par exemple.

Ensuite, il vous suffira d'ajouter les images à la médiathèque via l'article pour qu'elles soient automatiquement prises en compte, sans nécessiter de mise à jour de l'article d'ailleurs.

Lister simplement tous les fichiers attachés à un article

<?php    
// on récupère tout d'abord tous les fichiers liés à l'article en cours
$attachments = get_children( array( 
     'post_type' => 'attachment',
     'posts_per_page' => -1,
     'post_parent' => get_the_ID()
) );
// puis on les affiche avec un lien vers l'image originale en lightbox
if ( $attachments ) {
     foreach ( $attachments as $attachment ) { ?>
          <a href="<?php echo wp_get_attachment_url( $attachment->ID ); ?>" rel="lightbox" title="<?php echo get_the_title($attachment->ID) ?>">
         <?php echo wp_get_attachment_image( $attachment->ID, 'taille-de-votre-thumbnail' ); ?></a><?php
     }
}
?>

Lister tous les fichiers attachés à un article sauf l'image à la Une

Si, sur une fiche produit par exemple, vous affichez déjà l'image à la une en grand et ne souhaitez pas la retrouver dans la liste :

<?php    
$attachments = get_children( array( 
     'post_type' => 'attachment',
     'posts_per_page' => -1,
     'post_parent' => get_the_ID(),
     'exclude' => get_post_thumbnail_id() // sauf l'image à la Une
) );
if ( $attachments ) {
     foreach ( $attachments as $attachment ) { ?>
          <a href="<?php echo wp_get_attachment_url( $attachment->ID ); ?>" rel="lightbox" title="<?php echo get_the_title($attachment->ID) ?>">
          <?php echo wp_get_attachment_image( $attachment->ID, 'taille-de-votre-thumbnail' ); ?></a><?php
     }
}
?>

Choisir précisément les images que vous souhaitez lister ou non

Si vous utilisez des images dans votre article que vous ne souhaitez pas retrouver dans cette galerie, vous pouvez vous servir du champs "Description " de l'image pour exclure ou inclure des images.

Dans cet exemple, toutes les images qui auront "No" dans leur champs description ne s’afficheront pas.

<?php            
$attachments = get_children( array(
     'post_type' => 'attachment',
     'posts_per_page' => -1,
     'post_parent' => get_the_ID(),
) );
if ( $attachments ) {
     foreach ( $attachments as $attachment ) { 
          if ($attachment->post_excerpt!='No') { // on n'affiche que si la description n'est pas "No"
               ?>
               <a href="<?php echo wp_get_attachment_url( $attachment->ID ); ?>" rel="lightbox" title="<?php echo get_the_title($attachment->ID) ?>">
               <?php echo wp_get_attachment_image( $attachment->ID, 'taille-de-votre-thumbnail' ); ?></a><?php
          }
     }
}
?>

Ne lister que les fichiers pdf attachés à l'article et gérer l'ordre d'affichage

Enfin, si vous souhaitez filtrer les éléments liés par leur format, pour ne lister que des fiches techniques au format pdf par exemple, le tout en les ordonnant par ordre alphabétique :

<?php    
$attachments = get_children( array( 
     'post_type' => 'attachment',
     'posts_per_page' => -1,
     'post_mime_type' => 'application/pdf',
     'orderby'          => 'title',
     'order'            => 'ASC',
     'post_parent' => get_the_ID()
) );
if ( $attachments ) {
     foreach ( $attachments as $attachment ) { ?>
          <a href="<?php echo wp_get_attachment_url( $attachment->ID ); ?>" title="<?php echo apply_filters('the_title', $attachment->post_title); ?>" target="_blank">
          <?php echo $attachment->post_excerpt; ?> // Là, on affiche le champs description du fichier
          </a><?php
     }
}
?>

Source image : audiodescriptionfrance

Poursuivre votre lecture

14 commentaires : Afficher automatiquement toutes les images attachées à un article

  1. Franck - Papa Blogueur

    28 avril 2014

    Bonjour et merci pour ton article.

    J'ai un soucis, plusieurs de mes images sont référencées par BING et GOOGLE, le soucis c'est que le visiteur arrive sur l'image et non pas sur mon blog. Il la visualise, peut la télécharger mais n'a aucun moyen d'atterrir sur l'article où l'image est attachée.

    Y a-t-il une possibilité pour une image soit automatiquement redirigé vers l'article en question ou une pop-up avec l'article en fond ou autre solution afin qu'il puisse accéder à mon blog ? Sinon je perd des visites.

  2. Laurent

    28 avril 2014

    Bonjour Franck,

    Oui, il est possible de faire sauter l'iframe de Google, et des autres, avec un script JS :

    <script type="text/javascript"> 
    if(window.parent.length!=0) {window.top.location.replace(document.location.href);}
    </script>
    
  3. deli julien

    17 juillet 2014

    Bonjour,

    Merci pour ce script.
    Question, je cherche à exporter via un fichier php par exemple toutes les images d'un article en particulier (via le parametre ?ID=123456 directement dans l'url pour l'id du post par exemple), et les afficher dans un html tout simplement un a coté des autres (sur une page blanche)

    Une idée?

    Merci !

  4. Laurent

    27 juillet 2014

    Bonjour Julien,

    je ne suis pas sûr de comprendre, tu souhaites exporter toutes tes images vers quoi ?
    En passant l'ID de l'article en POST à une autre page, il est assez simple ensuite de récupérer les images liées à ce post. Il faut sur cette nouvelle page récupérer ta variable avec un

    $monid = $_POST['idpost'];

    puis de remplacer

    'post_parent' => get_the_ID()

    dans mon exemple ci-dessus par

    'post_parent' => $monid

    Et hop, le tour est joué !

  5. Guillaume

    12 septembre 2014

    Bonjour Laurent,

    Je vous remercie de ce partager de connaissances.
    Lorsque j'utilise le code pour lister tous les fichiers attachés à un article sauf l'image à la Une, j'ai une erreur de syntaxe que je peux corriger en fermant la balise PHP avant la création du lien avec l'effet lightbox. Est-ce que je ne casse pas le code avec cette balise ?
    De plus je ne comprends pas l'argument 'nom-de-votre-thumbnail' à la fin du code, ni comment l'utiliser. Pouvez-vous m'expliquer ?

    Merci

  6. Laurent

    13 septembre 2014

    Bonjour Guillaume,
    Mince oui, vous avez raison pour le fermeture de balise, je viens de mettre à jour le code, merci.
    L'argument 'nom-de-votre-thunbnail' est la taille de l'image à la une que vous souhaitez appeler (comme medium, large... cf the_post_thumbnail). C'est vrai que j'ai pour habitude le leur donner des petits noms, mais 'taille' serait effectivement plus explicite. Je mets à jour mon post.
    Bonne journée

  7. Lucrèce Cinna

    23 novembre 2014

    Bonjour Laurent,

    Je viens d'ouvrir un site sur wordpress .org et j'ai acheté un thème. Il semblerait que ce thème ne me permette pas d'afficher toutes les photos incluses dans un article sur la page d'accueil. Il faut cliquer sur l'article pour pouvoir voir le reste des photos. Hors, j'aimerais qu'on puisse toutes les voir défiler sur la page d'accueil, que l'article soit présenté entièrement.
    Sauriez-vous s'il y a une possibilité d'y remédier avec les codes?
    Merci d'avance pour votre réponse

  8. [...] Thèmes. Afficher automatiquement toutes les images attachées à un article. [...]

  9. Polack45

    26 septembre 2016

    Bonjour,

    Suite à votre sujet très intéressant en lien ci-dessous :
    http://comogene.com/wordpress/themes-tips-wordpress/afficher-automatiquement-galerie-images-attachees-article/

    J'aimerai en faite ne faire remonter que la première image jointe à mon article sur ma page d'accueil et en revanche les afficher toutes dans ma lightbox.
    De façon a générer plusieurs albums photos sur ma page d'accueil.
    J'espère avoir été assez explicite.
    Je vous remercie pour votre aide.

    Bien cordialement,

    Stéphanie

  10. Laurent

    27 septembre 2016

    Bonjour Polack45,
    vous pouvez récupérer toutes les images attachées et n’afficher que la première du array ($attachments[0]), ou plutôt vous servir de l'image à la une pour ça, et ensuite vous reporter à la doc de votre lightbox pour voir comment lui transmettre la galerie.
    Mais il serait peut-être plus judicieux de regarder du coté des plugins de galerie qui vous offriraient une solution toute prête. Le net regorge d'info à ce sujet, le tout étant de choisir celui qui correspond le mieux à votre besoin.
    Bonne journée

  11. Polack45

    29 septembre 2016

    Bonsoir Laurent,
    Merci pour ta réponse. Cela fonctionne maintenant mais je n'arrive pas à récupérer les bons arguments.
    Je fais remonter les images de ma bibliothèque et non les images de mes articles..
    Si je précise le nom de ma catégorie dans mes arguments à savoir 'category_name' => 'album' cela ne me remonte rien...:-( Peut-être aurais tu une idée...
    Par avance merci.
    Bonne soirée
    Cdt,

    Ci-dessous mon code :

     'attachment',
        'post_status' => 'inherit',
        'post_mime_type' => 'image',
        'order' => 'ASC'
        )); 
       while ( $the_query->have_posts() ) : 
       $the_query->the_post() {     
          echo'<a href="'.$attachment_data['url'].'" rel="nofollow">';
          echo'';
          echo'';
          echo''.$attachment_data['title'].'</a>';
    }
    
  12. Laurent

    3 octobre 2016

    Bonjour Polack45, pour restreindre ta requête à l'article en cours, il faut ajouter ceci :

    'post_parent' => get_the_ID()

    Ensuite tu parles de catégorie, mais les images ne sont pas liées directement aux catégories d'article. Si c'est ce que tu souhaites faire, je pense qu'il faut récupérer tous les articles de la catégorie, puis toutes les images de chacun des articles.

    Bonne journée

  13. polack45

    24 octobre 2016

    Bonjour Laurent et merci pour ton aide.
    Finalement pour ma galerie photo, j'utilise un custom post type sans plugin.
    Mais je n'arrive toujours pas à récupérer toute mes photos de mon articles en cours sachant qu'au départ j'affiche juste la première photo attachée avec un lien lightbox qui m'affiche les suivantes. Si tu as une idée ?
    Voici mon nouveau code :

    
      <?php
    
    
    $future_posts_query = new WP_Query('post_type=galerie&post_status=publish&showposts=30&order=ASC');                   
    	if ($future_posts_query->have_posts()) : while ($future_posts_query->have_posts()) : $future_posts_query->the_post(); 
    
    				$attachments = get_posts( array(
    				'post_type' => 'attachment',
    				//'posts_per_page' => -1,
    				'post_parent' => $post->ID,
    				'numberposts'    => 1,
    				'post_mime_type' => 'image',
    				'exclude'     => get_post_thumbnail_id()
    				));
    
    				if ( $attachments ) {
    					foreach ( $attachments as $attachment_id => $attachment ) {
    					
    						//echo $count = count($attachments);						
    						//echo wp_get_attachment_link( $attachment->ID);
    						
    						wp_get_attachment_url( $attachment->ID); 
    						
    					 }
    					
    				}
    				
    ?>
    
    <a rel="nofollow" href="<?php echo wp_get_attachment_url( $attachment->ID);?>" class="fancybox" title=""><img width="200" height="180" src="<?php echo wp_get_attachment_url( $attachment->ID, 'small');?>">
    				
    		
          <?php endwhile;?>
          <?php endif; ?>
    
    
  14. Laurent

    8 novembre 2016

    Bonjour Polack45,
    difficile à dire comme ça, regarde dans la doc de ton plugin de lightbox comment tu peux lui passer une galerie. Si c'est easy fancybox (cf ta class), ils détaillent le sujet sur leur FAQ : https://fr.wordpress.org/plugins/easy-fancybox/faq/

Laisser un commentaire

Si vous insérez du code, merci d'utiliser les balises [php] en début et [/php] en fin, ou [html] et [/html]...