Setting up post thumb/featured image on theme edit page WordPress
- SOLVED
Here's the basic setup:
It's a fairly large but pretty simple blog-format site that I'm moving from Movable Type to Wordpress and redesigning.
I'm putting together the HTML/CSS now, and have dealt with things like getting the posts migrated, getting the permalinks matched to the existing structure etc.
I need to handle the following on the image side of things:
Get the post thumbnail images set up - at the moment, all the images are inside the posts (just an img tag inside a div). I've set the media settings and used a plugin to generate the images and thumbs, copying these out of the posts.
I need this to be fully integrated with wordpress's thumbnail/featured image handling setup. I basically need 2 images to be autogenerated -
--- a <strong>640xXXXXpx</strong> (height doesn't matter too much) main image
--- a <strong>310x170px</strong> thumb (needs to be hard cropped)
Basically, I have this halfway there with a plugin, but need the images pulled and displayed on the homepage, and need the thumbnail and featured image displayed at the side of the post edit page - I need the thumbnail to do this as well as the featured image.
These need to be autogenerated, but set up so that they pop up in the sidebar and can be replaced if the cropping is terrible and the client wants to replace a specific thumb.
I'm working from a skeleton theme here - I'm pretty sure I need to do something in the functions.php file to get this to work, but can't seem to.
Answers (2)
Daniele Raimondi answers:
ok, start adding those lines to your functions.php
//Enable post thumbnail support
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails', array( 'post' ) );
}
// Add custom thumbnail sizes to your theme. These sizes will be auto-generated
// by the media manager when adding images to it on a new post.
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'thumb-size', 310, 170, true );
add_image_size( 'main-size', 640, 9999, false );
}
Now in your edit post page on backend, you have a box for the post thumbnail image where you can click to add the image and every time you upload an image WP autogenerate those image sizes automatically. 9999 stands for "unlimited height" and false tells WP not to hard crop images.
Then you can use this code in the loop (on homepage) to retrieve the post thumbnail image at 640xwhatever, linking it to the post itself
<?php if ( has_post_thumbnail() ) : ?>
<?php $full_img=( wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) )?>
<a href="<?php echo $full_img; ?>"><?php the_post_thumbnail( 'main-size' ); ?></a>
<?php endif;?>
Don't forget to set the 3 predefined image sizes in WP settings on backend if you need other sizes than the two you have defined in function.php to use in your posts.
Obviously, if you need to show the 310x170 version somewhere on the frontend, just use the same code above but replace
the_post_thumbnail( 'main-size' );
with
the_post_thumbnail( 'thumb-size' );
Jon comments:
Great - thanks Daniele! That seems to be working fine now. Just one more thing - any way to set up a simple else statement with that thumbnail embed code, so if there's no thumbnail, placeholder.jpg will be displayed?
Daniele Raimondi comments:
of course, just replace the previous piece of code with this
<?php if ( has_post_thumbnail() ) : ?>
<?php //$full_img=( wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) )?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'main-size' ); ?></a>
<?php else: ?>
<img title="<?php echo get_the_title()?>" alt="photo" class="attachment-main-size wp-post-image" src="<?php echo get_bloginfo('template_directory')?>/images/placeholder.jpg">
<?php endif; ?>
Some notes:
---
I've made a mistake in my previous answer: the image was linking to the full-size version of the image itself and not to the post, so I've commented out the 2nd line and link the image to its post, via <em>the_permalink()</em> call.
I've added the same classes WP adds to the image via <em>the_post_thumbnail()</em>, to the placeholder image also so you don't have to define additional css rules.
Daniele Raimondi comments:
sorry, forgot to add the <a> tag to the placeholder
<?php if ( has_post_thumbnail() ) : ?>
<?php //$full_img=( wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) )?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'main-size' ); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>"><img title="<?php echo get_the_title()?>" alt="photo" class="attachment-main-size wp-post-image" src="<?php echo get_bloginfo('template_directory')?>/images/placeholder.jpg"></a>
<?php endif; ?>
Jon comments:
Perfect! Thanks for your help.
AdamGold answers:
<blockquote>
Just one more thing - any way to set up a simple else statement with that thumbnail embed code, so if there's no thumbnail, placeholder.jpg will be displayed?
</blockquote>
Replace
<?php if ( has_post_thumbnail() ) : ?>
<?php $full_img=( wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) )?>
<a href="<?php echo $full_img; ?>"><?php the_post_thumbnail( 'main-size' ); ?></a>
<?php endif;?>
With
<?php if ( has_post_thumbnail() ) { ?>
<?php $full_img=( wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) )?>
<a href="<?php echo $full_img; ?>"><?php the_post_thumbnail( 'main-size' ); ?></a>
<?php } else {
?>
<a href="<?php echo get_permalink(); ?>"><img src="<?php echo get_bloginfo('template_url'); ?>/images/placeholder.jpg" alt="placeholder" /></a>
<?php
}?>
Put your "placeholder.jpg" in the images folder inside your theme directory.