separating post text from images

I’ve an idea.

create a the_content filter in like functions.php so that when you call the_content() in template, you can “re-format” the content.

Inside the filter function, just use regular expression to extract all images out, put those extracted images into a div and put all remained texts into another div.

Sorry that I’m using mobile and finding & copying codes are not convenient.

This would be great as I also want to do this.

some links to get started with:

https://www.livexp.net/wordpress/get-the-first-image-from-the-wordpress-post-and-display-it.html

https://chrisschuld.com/2008/08/removing-images-from-a-wordpress-post/

Here is the code I’m using:

<?php get_header(); ?>
<div id="content">
<h2><?php the_title(); ?></h2>
<ul title="<?php the_title(); ?>">
<?php $pages = get_pages('child_of='.$post->ID.'&sort_column=post_name&sort_order=ASC&parent='.$post->ID); $count = 0; foreach($pages as $page) { $content = $page->the_content; ?>
<li class="item">
<a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a>
<p><?php echo get_first_image() ?>
</li>
<?php } ?>

And the function:

function get_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";

  }
  return $first_img;
}

It only seems to display the default image.

I’ve found other code that might be able to help, but I’m still trying to make it work.

https://chrisschuld.com/2009/11/removing-everything-but-images-in-a-wordpress-post/

Here is the original code:

<h2><?php the_title(); ?></h2>
<ul title="<?php the_title(); ?>">
<?php $pages = get_pages('child_of='.$post->ID.'&sort_column=post_name&sort_order=ASC&parent='.$post->ID); $count = 0; foreach($pages as $page) { $content = $page->the_content; ?>
<li class="item">
<a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a>
<p><?php echo $page->post_content ?>
</li>
<?php } ?>

as far as i can see, in your code you are working with $page
foreach($pages as $page)

and in your function you are using
global $post, $posts;

that could be a reason.
i would try and use ‘ $post, $posts ‘ in the code section as well.

btw: this bit of coce is redundant in your funtion and could be deleted:

ob_start();
ob_end_clean();

Yes!!!!!!!!!!

I got this working:

The parent page gets the first image from each child page while displaying everything in a list!

<h2><?php the_title(); ?></h2>
<ul title="<?php the_title(); ?>">
<?php $pages = get_pages('child_of='.$post->ID.'&sort_column=post_name&sort_order=ASC&parent='.$post->ID); $count = 0; foreach($pages as $page) { $content = $page->the_content; ?>
<li class="item">
<a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a>
<p><?php
           $beforeEachImage = "<div>";
           $afterEachImage = "</div>";
           preg_match_all("/(<img [^>]*>)/",$page->post_content,$matches,PREG_PATTERN_ORDER);
           for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {
                 echo $beforeEachImage . $matches[1][$i] . $afterEachImage;
           }
?>
</li>
<?php } ?>
</ul>

Thanks for your help alchymyth. I almost gave up and was about to do it manually. I’ve been trying to do this for at least 6 months.

Hi, I am glad to see there is a solution to this problem. I am trying to achieve this myself, setting a default width and position to text and img in two columns (using a set of divs) and I’ve been following the code written by gabesands with input from alchymyth.

However I can’t seem to get it working on my site… I’m not speaking php fluently and I was wondering/hoping anyone of you could get back to me to lend me a hand.

I can be reached on: <username> at hotmail dot com.

Thanks guys!

Hi timbral,

So you want to do this:

_______________________
|Image| Page title/link|
-----------------------

<div class="item">
	<div class="thumbnail">
		<img src"thumbnail of the image in the subpage" />
	</div>
	<div class="subpage link">
		<a href"/currentpage/subpage">Subpage</a>
	</div>
</div>

Where a thumbnail of the first image is in one column, and the page title/link and text are in a different column. and when you click on the link, it takes you to the subpage where the everything is displayed normally and in full size?