Wordpress - targeting images in content - php

Question

I have the following code in my wordpress theme, single-post page (the page where single posts are displayed).
<article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>>
<div class="container">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive singlepic" src="<?php echo $image ?>"/>
<?php endif; ?>
<?php if ( $post->post_type == 'data-design' && $post->post_status == 'publish' ) {
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>';
}
}
}
?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
It puts the post-title then featured-image as a large image then posts the content, and then the rest.
I want to target the images in the content, and display them the same way as the featured-image is displayed.
*NOTE - changes to the 'if ( $attachments ) { ...' function doesn't change anything (nor does completely removing it) so I am not certain what that part does. the only code that affects the content is when it is called ( '')

Answer 1

Sometimes ago I used to following code to strip off all the images in my content area and then display them separately apart from the contents. This might help you.
In your functions.php file -
function stripe_images_from_content($content){
$images = array();
$subject = $content;
$subject = preg_replace('~<img [^\>]*\ />~', '', $subject);
$subject = preg_replace('~\[caption[^\]]*\][^\]]*\]~', '', $subject);
$image_urls = array();
$match_count = preg_match_all( '/<img.*src=["\']([^"\']*)["\'].*\/>/', $content, $image_urls );
if (is_numeric($match_count) && $match_count > 0) {
if( is_array($image_urls[1]) and count($image_urls[1]) > 0 ){
foreach( $image_urls[1] as $i ){
$featured_image_url = $i;
$image_id = get_attachment_id_from_src( $featured_image_url );
if (! is_numeric($image_id)) {
$match_count = preg_match( '/(.*)-\d+x\d+(\.(jpg|png|gif))/', $featured_image_url, $matches );
if (is_numeric($match_count) && $match_count > 0) {
$base_image_url = $matches[1] . $matches[2];
$images[] = get_attachment_id_from_src( $base_image_url );
}
}
else{
$images[] = $image_id;
}
}
}
}
$data = new stdClass();
$data->images = $images;
$data->content = $subject;
return $data;
}
What this function does is get all the images inserted in the content area of a post and strip them off. Then return the image(s) and the content without image.
in your single.php file-
$content = stripe_images_from_content(get_the_content());
Now you need to do two things. $content->images contains all the images inserted in the post content area. And $content->content holds the raw content images stripped off. First you need to use $content->images wisely where you want to display your images and second replace the the_content() function with echo wpautop($content->content);
Hope this might help you.