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.

I am wondering how to achieve something specific. I am not sure if this functionality is already built into Wordpress, or if there is some PHP happening.

This is the site I am basing some of my design from: http://www.premiumpixels.com/

As you can see, the images that are on the front page are cropped, yet, when you click on the post itself, it gives you a larger view all together. Attempts to actually crop the image in Wordpress and make it a featured image has been futile. I am wondering how to achieve this?

It seems like he is using the front page thumbnail as a featured image and the actual blog post image has just been merely inserted. Yet, when I try this, I get both images on my front page.

Can someone shed some light on this?

share|improve this question

2 Answers 2

up vote 0 down vote accepted

This is quite simple to implement, using core post-thumbnails functionality.

First, you need to add Theme support for the feature, via functions.php:

<?php
function wpse54920_setup_theme() {
    // Support post thumbnails
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'wpse54920_setup_theme' );
?>

Next, you need to define your custom image sizes, using add_image_size(). Let's say you want the following custom image sizes:

  • archive-index-featured, 150px x 100px, hard-cropped
  • post-header-featured, 250px wide, box-resized

Define them as follows (building on our code above):

<?php
function wpse54920_setup_theme() {

    // Support post thumbnails
    add_theme_support( 'post-thumbnails' );

    // Add Archive Index Featured image size
    add_image_size( 'archive-index-featured', 150, 100, true );

    // Add Post Header Featured image size
    add_image_size( 'post-header-featured', 250, 9999, false );
}
add_action( 'after_setup_theme', 'wpse54920_setup_theme' );
?>

Now, you simply need to output the appropriate image size in the appropriate template file, or via the appropriate conditional. For simplicity, I'll use the latter approach:

<?php
if ( has_post_thumbnail() ) {
    // Determine image size based on context
    $featured_image_size = ( is_single || is_page() ? 'post-header-featured' : 'archive-index-featured' );
    // Output the post featured image
    the_post_thumbnail( $featured_image_size );
}
?>

Alternately, you could simply call the_post_thumbnail( 'post-header-featured' ) in single.php and/or page.php, and call the_post_thumbnail( 'archive-index-featured' ) in other template files.

share|improve this answer
    
I understand this functionality, but the cropping function in Wordpress doesn't crop a portion of the bigger image, which is ultimately what I want. Going through the website example I gave, it seems as though he has a portion cropped as a featured image on the front page and when you click through, he shows the bigger image. My question is, how did he crop a portion of the bigger image, use it as a thumbnail and then display a bigger image on a click through? The bigger image on the actual single.php page is not a featured image, it's an inserted one. –  Sethen Maleno Jun 13 '12 at 17:04
    
Hard-crop crops to exact dimensions, and will crop a portion of the image. Box-resize will scale the image proportionally, using the smallest specified dimension. Thus, specifying $crop to true for one image, and false for the other image, will cause the two images to be cropped/resized differently. –  Chip Bennett Jun 13 '12 at 18:50
    
If hard-cropping does what you said it should do, it sounds like this is what I want to use. However, when I use add_image_size( 'archive-index-featured', 150, 100, true ); and pass the the_post_thumbnail function the class name, I merely get a resize and not a crop. –  Sethen Maleno Jun 13 '12 at 20:16
    
1) Did you regenerate your Thumbnails after adding a new image size? 2) What is your original image size? Do the original dimensions also have a ratio of 1.5:1? If so, the hard crop and box resize will result in the same image. –  Chip Bennett Jun 13 '12 at 20:20
    
1. Yes. 2. I am not sure what you mean by that. For some reason, it's scaling the image down and not cropping. penandanchor.com is my blog. I will leave it like so if you want to poke around. As you can see, the thumbnail is resizing and not cropping a portion of the image on the main page like I want it to. –  Sethen Maleno Jun 13 '12 at 20:26

Take a look at Timthumb, a small php script for cropping, zooming and resizing web images.

On my site I'm using it to do something very similar to what your example (premiumpixels) is doing.

The code on the overview page (page.php):

<?php
                                        $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
                                        if($thumbnail){
                                    ?>
                                    <div class="img_post">
                                        <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="blogpost_img">
                                        <span class="background_3"><img src="<?php echo get_template_directory_uri(); ?>/images/post_img_arrow.png" alt="Read More" /></span>
                                        <img src="<?php echo get_template_directory_uri(); ?>/framework/timthumb.php?src=<?php echo $thumbnail[0]; ?>&amp;h=230&amp;w=340" alt="<?php the_title(); ?>" />
                                        <div class="clearfix"></div>
                                        </a>
                                    </div><!-- /img_post -->

                                    <?php
                                        }
                                    ?>

The code on the detail page (single.php):

                                <?php
                                        $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
                                        if($thumbnail){
                                    ?>
                                    <div class="img_post">

                                        <img src="<?php echo get_template_directory_uri(); ?>/framework/timthumb.php?src=<?php echo $thumbnail[0]; ?>&amp;h=230&amp;w=680" alt="<?php the_title(); ?>" />
                                        <div class="clearfix"></div>

                                    </div><!-- /img_post -->
share|improve this answer
    
-1. There is absolutely no need to use TimThumb here, when core functionality is more than adequate. –  Chip Bennett Jun 12 '12 at 13:15
1  
@ChipBennett interesting implementation. Didn't know you could do it that way. –  WouterB Jun 12 '12 at 13:57

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.