WordPress.org

1. werkwerkwerk
   Member
   Posted 2 years ago #

   ok, this has been asked before but not in this guise as far as I can see. Is there any way, when calling the_content(), to separate the images and the text in each post into separate entities/divs?
   what im wanting is a two column layout WITHIN each post, so the text is on the left and the image on the right, with no wrapping of text around the image. I dont have a sample url but here is a very rough idea of what im after

   post title
   | TEXT | IMG |
   
   postdata.

   any help is much appreciated!
   Cheers!

2. peterwongpp
   Member
   Posted 2 years ago #

   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.

3. gabesands
   Member
   Posted 2 years ago #

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

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   some links to get started with:

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

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

5. gabesands
   Member
   Posted 2 years ago #

   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.

   http://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 } ?>

6. alchymyth
   The Sweeper
   Posted 2 years ago #

   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();

7. gabesands
   Member
   Posted 2 years ago #

   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>

8. gabesands
   Member
   Posted 2 years ago #

   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.

9. timbral
   Member
   Posted 2 years ago #

   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!

10. gabesands
    Member
    Posted 2 years ago #

    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?

Topic Closed

This topic has been closed to new replies.