NB: Make sure you do a back up of your theme, files and database before attempting the tutorials

Intermediate

---- Last modified : Sep 03 2022

Estimated reading time : 4 minutes, 39 seconds - 251 words

With this tutorial, we will create a function that will display images linked to Post IDs.

Let’s say you have a form, you add a post and upload multiple images. These images are now known as get_attachment_image.

With this function we will use a query that will fetch the Post IDs’ get_attachment_image. We also want to display the image with the $size = medium;.

As reference, here are the image sizes that WordPress uses: thumbnail, medium, large, and full.

We also need to specify in our function that if there aren’t any images linked to the a post ID, to display noting. We configure our arguments and display nothing if empty.

Now we will loop our results with a foreach with custom HTML.

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-&gt;post_title; endif; $title = esc_html( $attachment-&gt;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; 
}

Please note that in the loop, we also want to store the image’s lat text in the $img_alt variable. Whether it’s a good or bad idea is up to you.

Now let’s display the results within a template::

<?php echo via_get_images_attachees(); ?>

We know that the Post Thumbnail is considered like an attached image. So the Post Thumbnail will be in the list of images. You can add an exclusion in your arguments with the $thumb_id variable.

Here’s an example of how to exclude the Post Thumbnail: Use the following argument after the $post;

$thumb_id = get_post_thumbnail_id($post->ID);

And then we add the excluded argument in the $attachments variable by using post__not_in inside the $thumb_id variable.

$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 )
) );

Final code snippet to display images attached to WordPress Post IDs by excluding 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-&gt;post_title; endif; $title = esc_html( $attachment-&gt;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; 
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>