NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.
Publié le : 28 janvier 2017 - Modifié le : 17 janvier 2022
Temps de lecture : 4 minutes, 59 seconds - 286 mots
Partager la publication "Afficher les images attachées Post ID WordPress"
Afficher les images attachées Post ID WordPress : Nous allons dans ce tutoriel se construire une fonction requête qui va permettre d’afficher les images attachées au Post ID.
Imaginons par un formulaire, vous insérez un article et que vous téléchargez plusieurs images, ces images téléchargées deviennent en objet get_attachment_image.
Et c’est dans cette fonction que nous allons effectuer la requête allant chercher les get_attachment_image du POST ID. Nous souhaitons aussi dans notre requête afficher les images en format $size = ‘medium’;
Voici les tailles images WordPress par défaut : ‘thumbnail’, ‘medium’, ‘large’, ‘full’. Ou utiliser des thumbnails images que vous avez personnalisées.
On dit aussi dans notre fonction que s’il n’y a pas d’images attachées au POST ID, n’affiche rien. Donc on prépare nos arguments et on n’affiche rien si vide.
Ensuite nous bouclons nos résultats en foreach avec comme vous le constatez du html personnalisé qui pourra être changé par le vôtre.
function via_get_images_attachees() {
global $post;
$thumb_id = get_post_thumbnail_id($post->ID);
$id = intval( $post->ID );
$size = 'medium';
$attachments = get_children( array(
'post_parent' => $id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order',
'post__not_in' => array( $thumb_id )
) );
if ( empty( $attachments ) )
return '';
$output = "\n";
$output .= '<div id="grid">';
/*** Loop through each attachment ***/
foreach ( $attachments as $id => $attachment ) : $img_cap = $attachment->post_excerpt;
// New line to get the caption
$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
//alt
if ($img_alt == '') :
$img_alt = $attachment->post_title; endif; $title = esc_html( $attachment->post_title, 1 );
$img = wp_get_attachment_image_src( $id, $size );
$output .= '<div class="box">';
$output .= '<div data-thumbnail="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div data-image="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div class="thumbnail-caption">';
$output .= '<h3>'. $img_alt .'</h3>';
$output .= '</div>';
$output .= '<div class="lightbox-text">';
$output .= '" '. $img_alt .' " ';
$output .= '</div>';
$output .= '</div>';
endforeach;
$output .= '</div>';
return $output;
}Remarquez aussi que dans la boucle nous voulons comme texte le alt de l’image qui est stocké dans une variable $img_alt. Bonne ou mauvaise idée, à vous de juger !
Maintenant prenons l’occasion d’afficher les résultats dans un template :
<?php echo via_get_images_attachees(); ?>
On sait pertinemment que le Post Thumbnail va être considéré comme une image attachée. Donc le Post Thumbnail va se retrouver dans la liste d’images. On peut dans nos arguments, mettre une exclusion du Post Thumbnail dans une variable $thumb_id.
Voici un exemple d’exclusion du Post Thumbnail : Donnons l’argument suivant après le global $post;
$thumb_id = get_post_thumbnail_id($post->ID);
Ensuite, vous ajouter l’argument exclusion dans la variable $attachments en déclarant un post__not_in de la variable $thumb_id.
$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order', 'post__not_in' => array( $thumb_id ) ) );
Le code final pour afficher les images attachées Post ID WordPress en excluant le Post Thumbnail
function via_get_images_attachees() {
global $post;
$thumb_id = get_post_thumbnail_id($post->ID);
$id = intval( $post->ID );
$size = 'medium';
$attachments = get_children( array(
'post_parent' => $id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order',
'post__not_in' => array( $thumb_id )
) );
if ( empty( $attachments ) )
return '';
$output = "\n";
$output .= '<div id="grid">';
/*** Loop through each attachment ***/
foreach ( $attachments as $id => $attachment ) : $img_cap = $attachment->post_excerpt;
// New line to get the caption
$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
//alt
if ($img_alt == '') :
$img_alt = $attachment->post_title; endif; $title = esc_html( $attachment->post_title, 1 );
$img = wp_get_attachment_image_src( $id, $size );
$output .= '<div class="box">';
$output .= '<div data-thumbnail="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div data-image="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div class="thumbnail-caption">';
$output .= '<h3>'. $img_alt .'</h3>';
$output .= '</div>';
$output .= '<div class="lightbox-text">';
$output .= '" '. $img_alt .' " ';
$output .= '</div>';
$output .= '</div>';
endforeach;
$output .= '</div>';
return $output;
}