Display WordPress post content images and text separately - php

Question

I'm looking at the WordPress blog and I'm trying to figure out how to display the image and text separately when displaying the content. The reason I want to do this is because I want to create a custom layout, and I need to be able to move the image around without grabbing all the text at the same time. Does anyone have any idea on how to do this?
Example of what i've already got: (UPDATED)
<?php
require('blog/wp-blog-header.php');
?>
<?php
$args = array( 'numberposts' => 2, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
echo '<ul id="latest_posts">';
foreach
($postslist as $post) : setup_postdata($post);
echo get_content_without_tag( apply_filters( 'the_content', get_the_content() ), 'a' );
$image = get_tag_without_text( apply_filters( 'the_content', get_the_content() ), 'a' );
?>
<li>
<strong>
<?php the_date(); ?>
</strong>
<br />
<?php the_title(); ?>
<p>
<?php echo $image[0]; ?>
</p>
</li>
<?php endforeach; ?>
</ul>
ERROR:
Warning: DOMDocument::saveHTML() expects exactly 0 parameters, 1 given
in
/hsphere/local/home/poulaum/isosec.co.uk/blog/wp-includes/functions.php
on line 4874
and image to show what the above code displays:

Answer 1

You can make use of featured images. This featured image will not be included in post content. However, if you already have your images included in post content, then you need to strip the post content down in two parts, as you've said in your question.
I have two functions, one that returns all the images (or any html tag content) from the content and one function that returns the text without the desired tag/images. Both of these functions uses DOMDocument
The first function get_content_without_tag() returns the content which has been stripped from images. There are two parameters
$html -> The text with images to be stripped, in this case, use apply_filters( 'the_content', get_the_content() ) to use the post content
$tag -> The name of the tag to strip out, in this case, 'a' as a tags hold images
Here is the function
function get_content_without_tag( $html, $tag )
{
// Return false if no html or tag is passed
if ( !$html || !$tag )
return false;
$dom = new DOMDocument;
$dom->loadHTML( $html );
$dom_x_path = new DOMXPath( $dom );
while ($node = $dom_x_path->query( '//' . $tag )->item(0)) {
$node->parentNode->removeChild( $node );
}
return $dom->saveHTML();
}
You would then use this in place of the_content() where you would need to display text only, stripping out the complete <a/> tag in which the images are as follows
echo get_content_without_tag( apply_filters( 'the_content', get_the_content() ), 'a' )
The second function, get_tag_without_text() returns the content between the desired tag, in your case, images. The parameters are exactly the same as the first function. Here is the function
function get_tag_without_text( $html, $tag )
{
// Return false if no html or tag is passed
if ( !$html || !$tag )
return false;
$document = new DOMDocument();
$document->loadHTML( $html );
$tags = [];
$elements = $document->getElementsByTagName( $tag );
if ( $elements ) {
foreach ( $elements as $element ) {
$tags[] = $document->saveHtml($element);
}
}
return $tags;
}
This function returns an array of images should you use a tags, so, to display the first image, use the function as follow:
$image = get_tag_without_text( apply_filters( 'the_content', get_the_content() ), 'a' );
echo $image[0];
EDIT
The code above is was only tested with WP_Query and not with get_posts. I have fixed a few bugs in the code above and also in your code to make it work with get_posts
Here is a working example of your code. (Just remember to update the the functions with the new ones above)
<?php
$args = array(
'numberposts' => 2,
'post_status' => 'publish',
'post_type' => 'post',
'orderby' => 'date'
);
$postslist = get_posts( $args );
echo '<ul id="latest_posts">';
foreach ( $postslist as $post ) {
setup_postdata($post);
$content = get_content_without_tag( $post->post_content, 'a' );
$image = get_tag_without_text( $post->post_content, 'a' );
if ( $content )
echo apply_filters( 'the_content', $content );
?>
<li>
<strong>
<?php the_date(); ?>
</strong>
<br />
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
<?php the_title(); ?>
</a>
<?php
if ( $image ) {
?>
<p>
<?php echo apply_filters( 'the_content', $image[0] ); ?>
</p>
<?php
}
?>
</li>
<?php
}
echo '</ul>';