{"id":6209,"date":"2017-01-28T16:53:44","date_gmt":"2017-01-28T21:53:44","guid":{"rendered":"https:\/\/themespress.ca\/?p=6209"},"modified":"2022-09-03T13:58:21","modified_gmt":"2022-09-03T17:58:21","slug":"display-images-linked-to-wordpress-post-id","status":"publish","type":"post","link":"https:\/\/themespress.ca\/en\/display-images-linked-to-wordpress-post-id\/","title":{"rendered":"Display Images linked to WordPress Post ID"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

With this tutorial, we will create a function that will display images linked to Post IDs.<\/p>\n

Let’s say you have a form, you add a post and upload multiple images. These images are now known as get_attachment_image.<\/p>\n

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;.<\/p>\n

As reference, here are the image sizes that WordPress uses: thumbnail, medium, large, and full.<\/p>\n

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.<\/p>\n

Now we will loop our results with a foreach with custom HTML.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n

function via_get_images_attachees() {\n\tglobal $post;\n    $thumb_id = get_post_thumbnail_id($post->ID);\n\t$id = intval( $post->ID );\n\t$size = 'medium';\n\t$attachments = get_children( array(\n\t\t\t'post_parent'     => $id,\n\t\t\t'post_status'     => 'inherit',\n\t\t\t'post_type'       => 'attachment',\n\t\t\t'post_mime_type'  => 'image',\n\t\t\t'order'           => 'ASC',\n\t\t\t'orderby'         => 'menu_order',\n            'post__not_in'    => array( $thumb_id )\n\t\t) );\n\tif ( empty( $attachments ) )\n\treturn '';\n\t$output = "\\n";\n\t$output .= '<div id="grid">'; \n    \n\t\/*** Loop through each attachment ***\/ \n\tforeach ( $attachments as $id => $attachment ) : $img_cap = $attachment->post_excerpt; \n\t\t\/\/ New line to get the caption \n\t\t$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); \n\t\t\/\/alt \n\t\tif ($img_alt == '') : \n\t\t$img_alt = $attachment-&gt;post_title; endif; $title = esc_html( $attachment-&gt;post_title, 1 ); \n\t\t$img = wp_get_attachment_image_src( $id, $size ); \n\t\t$output .= '<div class="box">'; \n\t\t$output .= '<div data-thumbnail="' . esc_url( wp_get_attachment_url( $id ) ) . '"><\/div>'; \n\t\t$output .= '<div data-image="' . esc_url( wp_get_attachment_url( $id ) ) . '"><\/div>'; \n\t\t$output .= '<div class="thumbnail-caption">'; \n\t\t$output .= '<h3>'. $img_alt .'<\/h3>'; \n\t\t$output .= '<\/div>'; \n\t\t$output .= '<div class="lightbox-text">'; \n\t\t$output .= '" '. $img_alt .' " '; \n\t\t$output .= '<\/div>'; \n\t\t$output .= '<\/div>'; \n\tendforeach; \n\t$output .= '<\/div>'; \n\t\n\treturn $output; \n}<\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
Please note that in the loop, we also want to store the image’s lat text in the $img_alt<\/strong> variable. Whether it’s a good or bad idea is up to you.<\/p>\n
Now let’s display the results within a template::<\/p>\n\n\t\t<\/div>\n\t<\/div>\n
<?php echo via_get_images_attachees(); ?><\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
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<\/strong> variable.<\/p>\n
Here’s an example of how to exclude the Post Thumbnail: Use the following argument after the $post;<\/p>\n\n\t\t<\/div>\n\t<\/div>\n
$thumb_id = get_post_thumbnail_id($post->ID);<\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
And then we add the excluded argument in the $attachments variable by using post__not_in  inside the $thumb_id<\/strong> variable.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n
$attachments = get_children( array(\n\t'post_parent'    => $id,\n\t'post_status'    => 'inherit',\n\t'post_type'      => 'attachment',\n\t'post_mime_type' => 'image',\n\t'order'          => 'ASC',\n\t'orderby'        => 'menu_order',\n\t'post__not_in'   => array( $thumb_id )\n) );<\/pre><\/div>
Final code snippet to display images attached to WordPress Post IDs by excluding Post Thumbnail<\/h2>
function via_get_images_attachees() {\n\tglobal $post;\n    $thumb_id = get_post_thumbnail_id($post->ID);\n\t$id = intval( $post->ID );\n\t$size = 'medium';\n\t$attachments = get_children( array(\n\t\t\t'post_parent'     => $id,\n\t\t\t'post_status'     => 'inherit',\n\t\t\t'post_type'       => 'attachment',\n\t\t\t'post_mime_type'  => 'image',\n\t\t\t'order'           => 'ASC',\n\t\t\t'orderby'         => 'menu_order',\n            'post__not_in'    => array( $thumb_id )\n\t\t) );\n\tif ( empty( $attachments ) )\n\treturn '';\n\t$output = "\\n";\n\t$output .= '<div id="grid">'; \n    \n\t\/*** Loop through each attachment ***\/ \n\tforeach ( $attachments as $id => $attachment ) : $img_cap = $attachment->post_excerpt; \n\t\t\/\/ New line to get the caption \n\t\t$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); \n\t\t\/\/alt \n\t\tif ($img_alt == '') : \n\t\t$img_alt = $attachment-&gt;post_title; endif; $title = esc_html( $attachment-&gt;post_title, 1 ); \n\t\t$img = wp_get_attachment_image_src( $id, $size ); \n\t\t$output .= '<div class="box">'; \n\t\t$output .= '<div data-thumbnail="' . esc_url( wp_get_attachment_url( $id ) ) . '"><\/div>'; \n\t\t$output .= '<div data-image="' . esc_url( wp_get_attachment_url( $id ) ) . '"><\/div>'; \n\t\t$output .= '<div class="thumbnail-caption">'; \n\t\t$output .= '<h3>'. $img_alt .'<\/h3>'; \n\t\t$output .= '<\/div>'; \n\t\t$output .= '<div class="lightbox-text">'; \n\t\t$output .= '" '. $img_alt .' " '; \n\t\t$output .= '<\/div>'; \n\t\t$output .= '<\/div>'; \n\tendforeach; \n\t$output .= '<\/div>'; \n\t\n\treturn $output; \n}<\/pre><\/div><\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"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.
Read More<\/a><\/div>","protected":false},"author":81,"featured_media":4587,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[283],"tags":[356],"class_list":["post-6209","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-using-images"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/comments?post=6209"}],"version-history":[{"count":0,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6209\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media\/4587"}],"wp:attachment":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media?parent=6209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/categories?post=6209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/tags?post=6209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}