This is a continuation of the series where I attempt to build a solution to display WordPress posts with attached images such that the post content itself doesn’t show any of the images and the sidebar instead displays the images. In my previous post I described creating a simple WordPress plugin with an empty widget.<\/p>\n
Now it is time to make the widget do something interesting. In my case, I wanted the widget to display something only if it was being shown in the context of a single post. That is, if you’re viewing a page of posts in the WordPress site, this sidebar widget should not display anything. A bit of searching in the WordPress Codex<\/a>\u00a0lead me to the The next task was to figure out how to extract the images associated with a post. WordPress function We first specify a filter for In this case, I wanted to make sure that posts that simply showed a NextGen Gallery<\/a> are treated specially and the images appear in the body of the post and not in the sidebar. I accomplished this by filtering out any image Once we have the filtered set of images, we just loop through them and emit the This is a continuation of the series where I attempt to build a solution to display WordPress posts with attached images such that the post content itself doesn’t show any of the images and the sidebar instead displays the images. In my previous post I described creating a simple WordPress plugin with an empty widget….<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,34,33,27],"tags":[36,75,74,72],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-images","category-sidebar","category-widget","category-wordpress","tag-extract-images-in-a-post","tag-sidebar","tag-widget","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":5,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts\/90\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}is_single<\/code><\/a> function which allows us to distinguish between a single post or page and a page of posts.<\/p>\nget_children<\/a>\u00a0<\/code>allows you to do exactly this. Once we get this list, the widget can then output the appropriate HTML to display the images in the sidebar. Here’s the widget function that extracts all the images from a single post and displays them in the sidebar widget only for single posts:<\/p>\nfunction widget($args) {\r\n global $post;\r\n\r\n extract($args);\r\n\r\n if ( is_single() ) {\r\n echo $before_widget;\r\n echo $before_title . 'Snapshots' . $after_title;\r\n $imgfilter = array(\r\n 'order' => 'ASC',\r\n 'post_mime_type' => 'image',\r\n 'post_parent' => $post->ID,\r\n 'post_status' => 'inherit',\r\n 'post_type' => 'attachment',);\r\n\r\n $attachments = get_children( $imgfilter );\r\n\r\n if ( $attachments ) {\r\n $images = array();\r\n foreach ( $attachments as $attachment ) {\r\n $imgUrl = wp_get_attachment_url( $attachment->ID );\r\n $isMatch = strpos($imgUrl, '_thumb.jpg');\r\n if ( $isMatch === false ) {\r\n $isMatch = strpos($imgUrl, 'Emoticon');\r\n }\r\n if ( $isMatch === false ) {\r\n $images[] = $attachment;\r\n }\r\n }\r\n\r\n foreach ( $images as $image ) {\r\n $imageSrc = wp_get_attachment_image_src( $image->ID, 'medium' );\r\n echo '<a href=\"' . wp_get_attachment_url( $image->ID ) . '\" class=\"cboxElement\">' . \r\n '<img src=\"' . $imageSrc[0] . '\" class=\"colorbox-' . $post->ID . '\"><\/a>';\r\n }\r\n }\r\n else {\r\n echo __('No Images', 'text_domain');\r\n }\r\n echo $after_widget;\r\n }\r\n}<\/pre>\nget_children<\/code> that finds the images attached to the current post (note that the current post is available to us in the global $post<\/code>). Once we have this set of attachments we loop through it, do a bit of pre-processing on it and obtain an array of URLs<\/code> that we can use in the <img><\/code> tags.<\/p>\nURL<\/code> that matches _thumb.jpg<\/code>. Additionally, Windows Live Writer<\/a> adds images for any emoticons used in a post. Clearly we shouldn’t be moving these out of the post and into the sidebar. This is accomplished by filtering out any image that has Emoticon<\/code> in the URL<\/code>. Note that both these filters are excellent “hacks” but not fool-proof. They work well enough for the problem I was trying to solve and I used them.<\/p>\nHTML<\/code> required to get them to show up in the sidebar. Note that anything that you echo<\/code> in the widget method basically gets displayed in the sidebar that has your widget. The code adds the images (at medium size) as clickable links with the same colorbox CSS<\/code> class thus essentially converting the pictures in the post to a clickable slideshow with medium size thumbnails shown in the sidebar. We only have one more step left – hide the images in the original post content.<\/p>\n","protected":false},"excerpt":{"rendered":"