Add Snippet To Project
Are you looking for a way to display the thumbnail of an attachment along with its image metadata on your WordPress site? By default, WordPress only displays the thumbnail without any additional information. However, with a few simple steps, you can customize the way attachments are displayed and include metadata such as image dimensions, file size, and more. In this article, we will guide you through the process of displaying the attachment thumbnail along with its image metadata, allowing you to provide more context and information to your site visitors.
function wpturbo_display_attachment_thumbnail_with_metadata($attachment_id) {
$image = wp_get_attachment_image_src($attachment_id, 'thumbnail');
$metadata = wp_get_attachment_metadata($attachment_id);
$output = '<div class="attachment-thumbnail">';
$output .= '<img src="' . $image[0] . '" alt="' . get_the_title($attachment_id) . '">';
if ($metadata) {
$output .= '<ul class="attachment-metadata">';
$output .= '<li>' . __('File Type:', 'wpturbo') . ' ' . $metadata['fileformat'] . '</li>';
$output .= '<li>' . __('File Size:', 'wpturbo') . ' ' . size_format(filesize(get_attached_file($attachment_id))) . '</li>';
$output .= '<li>' . __('Dimensions:', 'wpturbo') . ' ' . $metadata['width'] . ' x ' . $metadata['height'] . '</li>';
$output .= '</ul>';
}
$output .= '</div>';
return $output;
}
echo wpturbo_display_attachment_thumbnail_with_metadata(123);
The wpturbo_display_attachment_thumbnail_with_metadata() function is designed to display an attachment’s thumbnail along with its image metadata. It takes in an $attachment_id parameter, which is the ID of the attachment we want to display.
In the first line of the function, we use the wp_get_attachment_image_src() function to retrieve the URL of the attachment’s thumbnail. We pass in the $attachment_id and specify the size as 'thumbnail'.
Next, we use the wp_get_attachment_metadata() function to retrieve the metadata for the attachment. This includes information such as the file format, dimensions, and file size. We pass in the $attachment_id as the parameter.
We start building the output by opening a <div> element with a class of "attachment-thumbnail".
Inside the <div>, we append an <img> element with the src attribute set to the URL of the attachment’s thumbnail. We also set the alt attribute to the attachment’s title using the get_the_title() function.
The next step is to check if there is any metadata available. If there is, we create a <ul> element with a class of "attachment-metadata" and append <li> elements for each piece of metadata. Inside each <li>, we use the __() function to translate the labels for each piece of metadata.
For example, we display the file type by accessing the fileformat property of the $metadata array. We display the file size by using the filesize() function on the attachment file path retrieved with get_attached_file(). Finally, we display the dimensions by accessing the width and height properties of the $metadata array.
Finally, we close the <ul> element and the containing <div>, and return the entire output.
To actually display the attachment thumbnail with metadata, we call the wpturbo_display_attachment_thumbnail_with_metadata() function and pass in the desired $attachment_id. In this example, we use 123 as a placeholder.