specify size of post preview image (not post thumbnail)

Question

On the main page of my blog, I have a section in the header with post thumbnails(140x170px) linking to specific categories. Below within the actual blog loop, I also have post previews- an image 440x265px, and the first paragraph or so of content.

I'm wondering how I can specify the size of the post preview image, without effecting a) the post thumbnails and b) the size of the image that will appear when the full post is viewed.

Header thumbnail:

<div class="ootd-stream">
        <?php $new_query = new WP_Query( 'cat=your_category_id&showposts=2' );
            if( $new_query->have_posts() ): while( $new_query->have_posts ): $new_query->the_post();

            the_post_thumbnail();

            endwhile;
            endif;
            wp_reset_query();
        ?>
        <p>outfit of the day</p>
    </div><!-- end ootd-stream -->

Loop:

<div id="blog">
    <div class="preview">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="post-image">
            <img src="http://placehold.it/440x265" alt="cait barker post image" />
        </div><!-- end blog-image -->
        <div class="post">
            <h2><?php the_title() ;?></h2>
            <span class="post-preview">
                <?php the_excerpt('read more...'); ?>
                <?php endwhile; else: ?>

                    <p>Sorry, no posts to list</p>

                <?php endif; ?>
            </span><!-- end post-preivew -->
            <p class="post-meta"><span style="font-family: amatic;">>></span>&nbsp;Posted on <?php the_date('M-d-y'); ?>&nbsp;<span style="font-family: amatic;">>></span>&nbsp;<?php the_tags('tags: ', ', ', '<br />'); ?></p><!-- end post-meta -->
        </div><!-- end post -->
    </div><!-- end preview -->
</div><!-- end blog -->

Is this possible? What's the best way to achieve this?

Answer 1

In this case I would add image size in functions.php which registers new image size in my theme and get the re-sized image.

Example:

Register custom image size (functions.php)

if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'custom-image', 440, 265, true ); //(cropped)
}

Get custom image size (functions.php)

function get_custom_image(){
    global $post, $posts;
    $args = array(
        'post_type' => 'attachment',
        'numberposts' => 1,
        'post_status' => null,
        'post_parent' => $post->ID
    );

  $attachments = get_posts( $args );
     if ( $attachments ) {
        foreach ( $attachments as $attachment ) {          
           $found =  wp_get_attachment_image( $attachment->ID, 'custom-image' );
           preg_match( '@src="([^"]+)"@' , $found , $match );
           $img = $match[1];
           return $img;
          }
     }else{
         echo 'image_not_available_path_.jpg';
     }
}

Using inside loop

<div class="post-image">
        <img src="<?PHP get_custom_image(); ?>" alt="cait barker post image" />
    </div><!-- end blog-image -->

Code not fully tested, you have to modify it a bit for your needs.

Answer 2

use add_image_size() to define you custom image size

1.register custom image size (functions.php)

if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'custom-image', 440, 265, true ); //(hard cropped)
}

2.get image in custom image size except featured image of post (functions.php)

function ravs_get_custom_image( $featured_img ){
    global $post, $posts;
    $args = array(
        'post_type' => 'attachment',
        'numberposts' => 1,
        'post_status' => null,
        'post_parent' => $post->ID,
        'exclude' => $featured_img
    );

  $attachments = get_posts( $args );
     if ( $attachments ) {
        foreach ( $attachments as $attachment ) {          
           $img =  wp_get_attachment_image( $attachment->ID, 'custom-image' );
           return $img;
          }
     }else{
         echo 'Please attach images to your post';
     }
}

3.you code may look like this

(Note:for getting a post attachment, we needed to exclude the featured image, so it doesn’t show up twice.)

  //using in loop 
  <div class="post-image">
        <?php echo ravs_get_custom_image( get_post_thumbnail_id () ); ?>
  </div><!-- end blog-image -->

4.output may look like this

<div class="post-image">
   <img width="440" height="265" src="http://localhost/wooplay.com/wp-content/uploads/2010/01/homepage-image-440x265.jpg" class="attachment-custom-image" alt="homepage-image">
</div><!-- end blog-image -->   

Important Links:

1. get_posts()

2. get_post_thumbnaiul_id()

3. wp_get_attachment_image()