Show two different sized featured images on homepage

Question

I would like to have two different sized featured images on my homepage. I currently have all featured images set to 280x200. I would like to have SOME posts on the home page display a larger 620x200 image and others the 280x200. I'm not sure how to accomplish this. I realize I can specify a custom image size in my functions file like add_image_size( 'large-image', 620, 200, true );. However, I'm not sure how to get my homepage to know which image to display?

I have no idea if this is an optimal approach or not but I was thinking of making a custom field called 'large-featured' and having the homepage check to see if large-featured custom field value is set to true. Upon true use large-image custom size and upon no custom field value set use wordpress default featured size.

I'm not good at php coding so a little help here would be awesome. I'm pretty good and figuring things out with a little direction. Thanks for your assistance. Much appreciated.

My site in question is: http://www.fighterstyle.com

Answer 1

With get_post_thumbnail() you have the ability to insert a featured image in your theme. the_post_thumbnail( $size, $attr ); holds to parameter 1. The size of your image and the ID.

If you would like to have 2 image sizes of featured images on your home page you could do it like this:

if(is_front_page(){  // only on frontpage
 if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail($post->ID, array(320,320));
 } 

}else if(is_page()){
  if ( has_post_thumbnail() ) {
      the_post_thumbnail($post->ID, array(120,120));
  }
}

Answer 2

Your idea of using a custom field sounds good to me. You can then access this data using the get_post_meta function as described in the codex, and use that to pass the values of the size.

As to what values to pass, instead of passing hard coded sizes, it's better if you define the desired sizes in the Settings -> media screen, and then you can use the WP keywords thumbnail, medium, large or full when calling the get_the_post_thumbnail function

Answer 3

First, I think you have to add new size if it not implement yet:

add_image_size( 'feature_name', 320, 200, true/false );

The media uploader will create the images in the currect size from now.

If you have old images it will not regenerate the images to the new size, use AJAX Thumbnail Rebuild plugin.

Now you can call:

echo get_the_post_thumbnail( $post_id, 'feature_name');

Answer 4

Create custom field - large_featured. If the value = 1 the large standard size will be displayed. Else - medium.

$large_featured = get_post_meta( $post->ID, 'large_featured', true );
if(!empty($large_featured) && $large_featured == '1') {
    the_post_thumbnail('large');
} else {
    the_post_thumbnail('medium');
}

You can create additional image sizes specifically for your homepage by adding this in functions.php:

add_image_size( 'homepage-large', 620, 620);

Answer 5

I suggest you to get the url of the thumbnail image instead of the thumbnail image which is already resized when you set it as featured image...

<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
$image = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );
//$image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID())); this gets the thumbnail image which is resized.
}?>
<img src="<?php echo $image;?>"/>

Answer 6

Look in the functions.php of the theme you are using and you can easily change:

// Enable post thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(620, 200, true);

I also used another function on one of my sites

$i = 0
foreach(...){
  if($i == 0){
     echo '<img width="400" src="...">';
  }else{
     echo '<img width="200" src="...">';
  $i++
}

Answer 7

A featured image is saved as an attachment ID, you can use the get_post_thumbnail function as a shortcut to grabbing other sizes like this:

echo get_the_post_thumbnail($post->ID, 'the first image size');
echo get_the_post_thumbnail($post->ID, 'the other image size');