0

I've been trying to get the featured image of a post to be displayed outside of the loop for all the image thumbnails. That way, the featured image (of a product) is displayed in large and the thumbnails just below it. All the images in the (product) post are set in their own gallery of images.

Please see comment in code- the place where I'm trying to get the featured image to be displayed.

I'm sure I'm just missing something easy! Thanks!!

if (themedy_get_option('product_gallery')) { add_action('genesis_post_content', 'themedy_product_images', 1); }
function themedy_product_images() { ?>
    <?php 
    global $post;
    $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'numberposts' => 999, 'order'=> 'ASC', 'orderby' => 'menu_order' ) ); 
    if ( $images ) { ?>
<div class="twocol-one">
<?php
//How do I insert the featured image of the post over here
?>
    <div class="product_images">
        <div class="container">
            <?php
            foreach ( $images as $image ){
                $gallery_image_info = wp_get_attachment_image_src( $image->ID, 'full' );
                $gallery_image = $gallery_image_info[0];

                $gallery_thumb_info = wp_get_attachment_image_src( $image->ID, 'Gallery Thumb' );
                $gallery_thumb = $gallery_thumb_info[0];

                $gallery_image_alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true) ? trim(strip_tags( get_post_meta($image->ID, '_wp_attachment_image_alt', true) )) : trim(strip_tags( $image->post_title ));

                echo '<a href="'.$gallery_image.'" title="'.$gallery_image_alt.'" class="fancybox" rel="single-gallery"><img src="' . $gallery_thumb . '" /></a>';
            }
            ?>
        </div>
    </div>
</div>

If I use:

<?php the_post_thumbnail(); ?>

It Outputs:

<img width="1125" height="1500" title="6593_front" alt="6593_front" class="attachment-post-thumbnail wp-post-image" src="..../wp-content/uploads/2011/12/6593_front.jpg">

The image is way too big :( I need it to output with the following class..

class="alignnone size-large wp-image-6593"
1

UPDATED

First, let's create a new image size. We could update one of the existing sites, but we'll just add a new one for experience sake. Open up your functions.php file and add the following:

if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'new-size', 500, 500, true ); // Cropped 
    add_image_size( 'another-size', 400, 600 ); // Not Cropped 
}

Now, when you upload a new image, a version will be saved (assuming that the original is large enough) at the size you set via add_image_size.

For the existing images, you'll need to generate new thumbnails. Try the following plugin: AJAX Thumbnail Rebuild.

Ok, now let's update our reference to the new size:

<?php echo get_the_post_thumbnail( $post->ID, 'new-size' ); ?>

And here's how to get it full sized:

<?php echo get_the_post_thumbnail( $post->ID, 'full' ); ?>
  • Note: I missed specifying the size at first. Be sure to try it with the size set. – Jonathan Wold Feb 27 '12 at 2:54
  • Hi Jonathan, thank you. I actually did that, but the size is HUGE. Can I set the wordpress "large" versions to be smaller sized for the posts? The 'large' and 'medium' are too big for the 2 column layout I'm using :( Thank you again – iCeR Feb 27 '12 at 3:02
  • Ah ha! Give me a moment to edit my answer. – Jonathan Wold Feb 27 '12 at 3:04
  • You're welcome! Give the update a try and report back. – Jonathan Wold Feb 27 '12 at 3:11
  • Thank you! Ok so if I set the thumbnail sizes to be squared up like in your example, 500x500, won't that make some images (not all images are the same dimension) skewed/squashed? I could add TRUE to crop them, but cropping isn't an option unfortunately :( is there a way to say, reduce the LARGE thumbnails by 30% width and height? :) – iCeR Feb 27 '12 at 3:15

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.