Add Snippet To Project
Are you interested in displaying images from your post or page attachments in WordPress? Using this feature doesn’t only enhance the visual appeal of your site but also helps to better engage your visitors. However, many WordPress users aren’t familiar with how to capably utilize this functionality. In this tutorial, we will provide a comprehensive guide on how to show images from post or page attachments in WordPress, allowing you to leverage this feature for improving your site’s engagement and aesthetic appeal.
function wpturbo_show_attachment_images() {
global $post;
$attachments = get_posts( array(
'post_type' => 'attachment',
'posts_per_page' => -1,
'post_parent' => $post->ID,
'exclude' => get_post_thumbnail_id()
) );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
$thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
}
}
}
add_action( 'the_post', 'wpturbo_show_attachment_images' );
The function wpturbo_show_attachment_images() is the where all the magic happens. This function when called, retrieves and outputs all the attached images from the post or a page.
This function first assigns the ‘global post’ object to the ‘$post’ variable to get access to WordPress’s built-in object that contains data of the current post or page.
The subsequent code is a call to the function get_posts(). This function is used for retrieving the posts in your WordPress website. The properties for retrieval are specified within the array parameter of get_posts():
'post_type' => 'attachment': This specifies that we are retrieving attachments.'posts_per_page' => -1': By setting this argument to -1, it retrieves all posts that match the criteria.'post_parent' => $post->ID': This specifies that we only want the attachments of the current post or page.'exclude' => get_post_thumbnail_id(): It excludes the featured image from the images to be retrieved.
The $attachments variable will now store an array of post objects for each attachment.
We then check if there are any attachments with the if ( $attachments ) statement. If there are, we iterate over each one using a foreach.
For each $attachment we create a $class variable that is equal to "post-attachment mime-" concatenated with the MIME type of the attachment. This could be "image/jpeg", "image/gif", etc. We sanitize the MIME type with sanitize_title() to ensure the class string is safe for output.
We subsequently use wp_get_attachment_link() function to get the HTML for the image and assign it to $thumbimg. This function needs the ID of the attachment, the size of the image (‘thumbnail-size’), and a boolean that specifies if we are retrieving an icon true.
Finally, we echo out an li element with the class we defined earlier and the link to the attachment image.
Lastly, we add an action to the_post hook, which runs during the operation of The Loop in WordPress. This action calls wpturbo_show_attachment_images function, causing it to run each time a post or page is loaded. Consequently, all the images that are attached to a post or page are displayed whenever that post or page is shown.