• April 25, 2018

    As I understand, you want the first image in your post to get inside your excerpt. So I have a better solution, why not make another function inside functions.php file that contains your image concatenated with the original excerpt?

    Add to your functions.php

    function get_new_excerpt(){
        $str = '';
        $img = '<img src="'.catch_that_image().'">';
        $linkedImage = '<a href="'.get_permalink().'" title="'.get_the_title().'">'.$img.'</a>';
        $str .= '<div class="post-image">'.$linkedImage.'</div>';
        $str .= '<div class="post-excerpt">'.get_the_excerpt().'</div>';
        return $str;
    }
    // Catch first Image from http://css-tricks.com/
    function catch_that_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)) {
        $first_img = "/path/to/default.png";
      }
      return $first_img;
    }

    then in your index.php or what ever page you want to show this function, insert:

    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
           <div class="post">
                <h1 class="post-header"><?php the_title(); ?></h1>
                <div class="post-info">
                    <?php echo get_new_excerpt(); ?>
                </div>
           </div>
    <?php endwhile;endif;wp_reset_query(); ?>

    you might want to add some css style like:

    <style>
        .post {
            clear: both;
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .post h1.post-header {
            border-bottom: 1px solid #ccc;
        }
        .post .post-info {
            clear: both;
            overflow: hidden;
        }
        .post .post-image {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #EFEFEF;
        }
        .post .post-image img {
            width: 100%;
            height: 100%;
        }
        .post .post-excerpt {
            float: right;
            width: calc(100% - 120px);
            text-align: left;
        }
    </style>

     



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories