Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

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.

share|improve this answer
    
Thank you for such a thorough answer. If I'm understanding you correctly, you are advising that in lieu of using thumbnails in the <div class="ootd-stream">, I can use get_custom_image() and then use the post thumbnails in the regular blog loop? How will using get_custom_image() effect the post when it shows up in the blog loop? –  user1255049 May 19 '13 at 23:57
    
Well, When you are uploading new images, WP will automatically create the size of your custom registered image and you can get it from get_custom_image(). But you have to assign the same name as it was used in add_image_size() function. once uploaded new image and created custom size, you can get the size of the image at any post loop in any page or location. –  Core May 20 '13 at 5:12
    
@Noor Ahmad Feroozi why are you returning only image src in get_custom_image().I think you have to return value in $found ($found contain an HTML img element or empty string on failure ) in your get_custom_image(). –  Ravs May 23 '13 at 1:56
    
read wp_get_attachment_image –  Ravs May 23 '13 at 2:04

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

share|improve this answer
    
Did you try this code ? –  Ravs May 29 '13 at 20:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.