{"id":82753,"date":"2023-04-04T07:42:33","date_gmt":"2023-04-04T07:42:33","guid":{"rendered":"\/tutorials\/?p=82753"},"modified":"2026-03-09T19:18:02","modified_gmt":"2026-03-09T19:18:02","slug":"how-to-use-wp-get-attachment-image-wordpress-function","status":"publish","type":"post","link":"\/ng\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function","title":{"rendered":"How to Use the wp_get_attachment_image Function in WordPress + Useful Examples"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>The <strong>wp_get_attachment_image<\/strong> is a WordPress function that lets you easily retrieve and display image attachments based on their IDs.<\/p><p>Whether you&rsquo;re building a custom theme or a plugin, this function provides a flexible way to display images with custom sizes and attributes.<\/p><p>In this tutorial, we&rsquo;ll go over the <strong>wp_get_attachment_image()<\/strong> function and explain its parameters. We&rsquo;ll also provide a few popular use cases you can test on your WordPress website.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-EN.pdf\">Download all-in-one WordPress cheat sheet<\/a><\/p><p>\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-parameters-of-the-wp-get-attachment-image-function\">Parameters of the wp_get_attachment_image Function<\/h2><p>The <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image\/\">wp_get_attachment_image()<\/a> function lets users retrieve an HTML <strong>img<\/strong> element for an image attachment.<\/p><pre class=\"wp-block-preformatted\">wp_get_attachment_image( int $attachment_id, string|int[] $size = 'medium', bool $icon = false, string|array $attr = '' );<\/pre><p>By default, the <strong>wp_get_attachment_image() <\/strong>function requires at least one parameter, the attachment ID, which is the unique identifier for the image. The function then outputs the full-sized image without additional HTML attributes or customization.<\/p><p>Furthermore, you can add various additional parameters for customizing the image output, such as the image size, <a href=\"\/ng\/tutorials\/css-class\">CSS class<\/a>, or alt text:<\/p><p><strong>$attachment_id<\/strong><\/p><p>This is necessary to specify the attachment image ID that will be displayed. If the parameter is empty or set to <strong>false<\/strong>, the function won&rsquo;t return any image.<\/p><p><strong>$size<\/strong><\/p><p>An optional parameter that defines the <a href=\"\/ng\/tutorials\/wordpress-images-sizes\">WordPress image size<\/a> to display. You can specify any registered image size name, for example, <strong>thumbnail<\/strong>, <strong>medium<\/strong>, <strong>large<\/strong>,<strong> <\/strong>or a custom size in pixels.<\/p><p><strong>$icon<\/strong><\/p><p>Another optional parameter which determines whether the image should be treated as an icon. If set to <strong>true<\/strong>, the function will display the attachment icon instead of the actual image.<\/p><p><strong>$attr<\/strong><\/p><p>This parameter lets you add more attributes to the image tag, such as a class or a style. You can pass an array of key-value pairs to add the following attributes:<\/p><ul class=\"wp-block-list\">\n<li><strong>class<\/strong> &ndash; handles the CSS class of the image tag. You can add multiple classes by creating a space-separated list.<\/li>\n\n\n\n<li><strong>alt<\/strong> &ndash; sets the image&rsquo;s alt text. An alt attribute value is important for accessibility and <a href=\"\/ng\/tutorials\/wordpress-seo-tips\">WordPress SEO purposes<\/a>.<\/li>\n\n\n\n<li><strong>srcset <\/strong>&ndash; specifies multiple image sources with different resolutions, sizes, or aspect ratios. The browser will automatically choose the best source based on the device&rsquo;s screen resolution.<\/li>\n\n\n\n<li><strong>sizes <\/strong>&ndash;<strong> <\/strong>works together with the <strong>srcset<\/strong> attribute. It specifies the image size displayed on a page based on the available space.<\/li>\n\n\n\n<li><strong>loading<\/strong> &ndash; determines how the image loads. For example, the default value is <strong>lazy<\/strong> for <a href=\"\/ng\/tutorials\/wordpress-lazy-load\">lazy loading<\/a>.<\/li>\n\n\n\n<li><strong>decoding<\/strong> &ndash; lets you specify how the browser should interpret the image. Valid values are <strong>async<\/strong> to decode the image <strong>asynchronously<\/strong>, <strong>sync<\/strong> to decode the image <strong>synchronously<\/strong>, or <strong>auto<\/strong>.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-how-to-use-wp-get-attachment-image\">How to Use wp_get_attachment_image<\/h2><p>In this section, we&rsquo;ll explain how to use the <strong>wp_get_attachment_image()<\/strong> function effectively. Check the commented code below for more information:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\nif ( has_post_thumbnail() ) { \/\/ check if the post has a featured image\n    $thumbnail_id = get_post_thumbnail_id(); \/\/ get the ID of the post thumbnail image\n    $image = wp_get_attachment_image( $thumbnail_id, 'large' ); \/\/ get the HTML code for the post default thumbnail image\n    echo $image; \/\/ display the image\n}\n?&gt;<\/pre><p>Here is what we did:<\/p><ol class=\"wp-block-list\">\n<li>Used the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_post_thumbnail\/\">has_post_thumbnail()<\/a> function to check if the post has a featured image.<\/li>\n\n\n\n<li>Applied <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_thumbnail_id\/\">get_post_thumbnail_id()<\/a> to get the ID of the featured image.<\/li>\n\n\n\n<li>Used the <strong>wp_get_attachment_image()<\/strong> function to get the HTML code for the image.<\/li>\n\n\n\n<li>Passed the <strong>$thumbnail_id<\/strong> variable as the ID of the image and <strong>large<\/strong> as the specified size.<\/li>\n\n\n\n<li>Employed <strong>echo<\/strong> to output the image HTML code to the page.<\/li>\n<\/ol><p>Remember that you can replace the <strong>large<\/strong> parameter with any registered image size.<\/p><h2 class=\"wp-block-heading\" id=\"h-examples-of-the-wp-get-attachment-image-wordpress-function\">Examples of the wp_get_attachment_image WordPress Function<\/h2><p>Check out a few popular use cases for the <strong>wp_get_attachment_image()<\/strong> function to understand how it can help you with your WordPress projects.<\/p><h3 class=\"wp-block-heading\" id=\"h-outputting-a-ready-to-use-html-image\">Outputting a Ready-To-Use HTML Image<\/h3><p>The simplest way to test the <strong>wp_get_attachment_image()<\/strong> function is to pass an image attachment ID to it.<\/p><pre class=\"wp-block-preformatted\">&lt;?php echo wp_get_attachment_image( 37);?&gt;<\/pre><p>Remember that we didn&rsquo;t provide any specific image size in this example. Hence, the function retrieved the full-sized image with attachment ID 37.<\/p><p>In HTML, the output will look like this. The alt text will exist if it is already added:<\/p><pre class=\"wp-block-preformatted\">&lt;img width=\"500\" height=\"500\" src=\"http:\/\/example.com\/wp-content\/uploads\/2024\/03\/image.jpg\" class=\"attachment-full size-full\" alt=\"Alt Attribute\"&gt;<\/pre><p>By default, HTML sets the full-sized images to 500 pixels wide and 500 pixels in height. However, the actual width and height values in pixels may vary depending on their original dimensions.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-basicexample.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1304\" height=\"1254\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-basicexample.png\/public\" alt=\"A WordPress post with the default wp_get_attachment_image() function added\" class=\"wp-image-82754\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-basicexample.png\/w=1304,fit=scale-down 1304w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-basicexample.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-basicexample.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-basicexample.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-basicexample.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1304px) 100vw, 1304px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-using-a-custom-size\">Using a Custom Size<\/h3><p>Custom-sized images can improve website performance by reducing page load times and enhancing the overall look. They also ensure consistency across different devices and screens:<\/p><pre class=\"wp-block-preformatted\">&lt;?php echo wp_get_attachment_image( 37, [ 100,100 ], true); ?&gt;<\/pre><p>In HTML, the output will look like this:<\/p><pre class=\"wp-block-preformatted\">&lt;img width=\"40\" height=\"40\" src=\"http:\/\/example.com\/wp-content\/uploads\/2024\/03\/image.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Description for the alt text\"&gt;<\/pre><p>In this case, the second parameter of the <strong>wp_get_attachment_image()<\/strong> function is an array containing the width and height in pixels of the requested image size. The third parameter is set to <strong>true<\/strong>, meaning the function will crop the image to the exact dimensions specified in the array.<\/p><p>Here&rsquo;s how it looks on a live website:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-iconexample.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1358\" height=\"1034\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-iconexample.png\/public\" alt=\"A WordPress post with the wp_get_attachment_image() function added. Additional icon parameters were used\" class=\"wp-image-82755\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-iconexample.png\/w=1358,fit=scale-down 1358w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-iconexample.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-iconexample.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-iconexample.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/04\/wpgetattachmentimage-iconexample.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1358px) 100vw, 1358px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-displaying-all-images-associated-with-the-post\">Displaying All Images Associated With the Post<\/h3><p>You can display all images associated with a specific post ID. Doing so lets you view all the relevant pictures without navigating through the whole post.<\/p><pre class=\"wp-block-preformatted\">&lt;?php\n$attachments = get_attached_media('image', get_the_ID());\nif (!empty($attachments)) {\n    foreach ($attachments as $image) {\n        echo wp_get_attachment_image($image-&gt;ID, 'full');\n    }\n} \n?&gt;<\/pre><p>In this example, the code retrieves all the attached images of the current post using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_attached_media\/\">get_attached_media()<\/a> function and loops through them using a foreach loop.<\/p><p>For each image, it calls the <strong>wp_get_attachment_image()<\/strong> function to retrieve the full-sized version of the image with the attachment ID.<\/p><h3 class=\"wp-block-heading\" id=\"h-specifying-class-alt-and-title-attributes-of-an-image\">Specifying Class, Alt, and Title Attributes of an Image<\/h3><p>It&rsquo;s also possible to specify custom class, alt text, and title attributes for an image. All you need to do is set them to a variable. In our case, its <strong>$custom<\/strong>:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\n$custom = [ 'class' =&gt; 'my-class', 'alt' =&gt; 'alt text', 'title' =&gt; 'my title' ];\necho wp_get_attachment_image( 37, 'medium', false, $custom );\n?&gt;<\/pre><p>In this example, the fourth parameter is an array containing the additional attributes for the <strong>&lt;img&gt; <\/strong>tag.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-wordpress-hosting\" href=\"\/ng\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p><strong>wp_get_attachment_image()<\/strong> is a versatile WordPress function that enables you to easily display images attached to posts or pages.<\/p><p>In this tutorial, we&rsquo;ve covered the<strong> wp_get_attachment_image()<\/strong> function and its parameters. We&rsquo;ve also provided some use cases you can test on your WordPress website.<\/p><p>We hope that you found this tutorial useful. In case you have any questions, leave a comment below.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Discover More About WordPress<\/h4>\n                    <p><br>\n<a href=\"\/ng\/tutorials\/wordpress\">WordPress Tutorial<\/a><br>\n<a href=\"\/ng\/tutorials\/the-loop-wordpress\">What Is the WordPress Loop<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-featured-images\/\">What Is a WordPress Featured Image<\/a><br>\n<a href=\"\/ng\/tutorials\/optimize-images-wordpress\/\">How to Optimize Images for WordPress<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-use-wp_update_post\">How to Use wp_update_post Function<\/a><br>\n<a href=\"\/ng\/tutorials\/wordpress-get-post-meta\">How to Use WordPress get_post_meta Function<\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The wp_get_attachment_image is a WordPress function that lets you easily retrieve and display image attachments based on their IDs. Whether you&rsquo;re building a custom theme or a plugin, this function provides a flexible way to display images with custom sizes and attributes. In this tutorial, we&rsquo;ll go over the wp_get_attachment_image() function and explain its parameters. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":279,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Use wp_get_attachment_image in WordPress + Examples","rank_math_description":"The WordPress function wp_get_attachment_image gets an HTML IMG element representing an image attachment. Learn how to use it in this article.","rank_math_focus_keyword":"wp_get_attachment_image","footnotes":""},"categories":[22637],"tags":[],"class_list":["post-82753","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp_get_attachment_image","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp_get_attachment_image","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp_get_attachment_image","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-use-the-wp_get_attachment_image-function-in-wordpress-useful-examples","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-use-the-wp_get_attachment_image-function-in-wordpress-useful-examples","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp_get_attachment_image","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp_get_attachment_image","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp_get_attachment_image","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp_get_attachment_image","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wp_get_attachment_image","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/82753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/279"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=82753"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/82753\/revisions"}],"predecessor-version":[{"id":144125,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/82753\/revisions\/144125"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=82753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=82753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=82753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}