wordpress using image thumbnail with post summary

by 4 replies
5
hello, i have recently started summarizing my posts on my index pages instead of fully displaying them all thanks to this http://www.warriorforum.com/website-design/421356-excerpt-not-working-wordpress.html


but now i wish to have a little featured image that goes with my post summary s aswell where wordpress gets one of the images in the posts and makes it smaller and fits it as a thumbnail or just a picture with the text.....

help would be great i am using the wordpress twenty eleven theme

thank you
#website design #image #post #summary #thumbnail #wordpress
  • It appears that you're somewhat familiar with coding, so this shouldn't be too difficult for you...

    First, a word of advice. Changing the Twenty-Eleven theme files is fine - but when WP updates the theme, your changes will be lost. You're much better off to create a 'child' theme based on Twenty-Eleven. That way you can update the parent theme whenever you need to and your customizations will still be in place.

    Instructions on how to construct a child theme (it's a very simple thing to do) are here: Child Themes « WordPress Codex

    The following instructions assume that you're creating a child theme.

    When Featured Images are enabled in a WP theme (as they are in Twenty-Eleven), WP automatically creates a 150x150 px thumbnail. If this size works for you, great. If not, you'll need to tell WP to create the size that you want.

    In your child theme's functions.php file (if you don't have one, create it in your child theme folder), add this line:
    Code:
    add_image_size( 'unique_name', xdim, ydim );
    Substitute the image thumbnail sizes for 'xdim' and 'ydim' and create a unique name for you thumbnail size for WP to refer to. There are several names you can't use, you can find them here: Post Thumbnails « WordPress Codex

    Now you have to modify the content.php file yet again so it will display your thumbnails. Copy the content.php file from the Twenty-Eleven folder to your child theme folder. Find this section:
    Code:
            <?php if ( is_search() ) : // Only display Excerpts for Search ?>
        <div class="entry-summary">
            <?php the_excerpt(); ?>
        </div><!-- .entry-summary -->
        <?php else : ?>
    Change it to add your thumbnail image:
    Code:
            <?php if ( is_search() || is_front_page() || is_home() ) : // Only display Excerpts for Search (and home page) ?>
        <div class="entry-summary">
            <?php
                // first, you check to make sure the post has a thumbnail
                if ( has_post_thumbnail()) : ?>
                <a style="display: block; float: left; margin: 0 5px 5px 0;" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail('unique_name'); ?></a>
            <?php endif; ?>
            <?php the_excerpt(); ?>
        </div><!-- .entry-summary -->
        <?php else : ?>
    The above inserts a thumbnail image that is linked to the corresponding post. More information on the "the_post_thumbnail()" function: Function Reference/the post thumbnail « WordPress Codex

    Note the styles on the <a> tag. You can move those to your stylesheet if you wish (recommended) to give you a little more control.

    That should be enough to get you going, if you use the WP resources I linked to. If you have more questions, post back.
  • Hi Lego, I have an example on my homepage at clickbump.com under the heading "Latest Articles from the Blog"... (you can click the "Blog" link under my sig to see the example using the "Publisher" skin)

    Is this what you are trying to achieve?

    I'm using each of those post's featured image and loading the thumbnail there, alongside the post title and excerpt summary.

    If you need to hack an existing theme to do this, as it appears you are using twenty eleven, Steve's post above should get you going.
  • thank you for a great reply im going to test this out, does this detect the first image in the post and make it a thumbnail for you?

    yeah just checked out your website thats exactly what im looking to do
  • do i add the add_image_size( 'unique_name', xdim, ydim ); just straight at the bottom of everything else on the function.php?

    hese my website currently

    Scammer's beware!

    great thank you i think im getting it to work now, i didnt realize you had to edit and set a featured image i just thought it picked up the first 1 on the post, anyway thank you i think now im just working out how to get the right size images

    thank you
Join the discussion

Next Topics on Trending Feed