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

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

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.

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>

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 !