0

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?

2 Answers 2

3

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.

4
  • 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? May 19, 2013 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, 2013 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(). May 23, 2013 at 1:56
  • read wp_get_attachment_image May 23, 2013 at 2:04
3
+25

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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