Post Images

Over eighteen months ago WordPress introduced built in thumbnail support, this is now a part of the Twenty Ten theme, however many themes like magazine themes and layouts may need a custom size, in this tutorial we will add support for two sizes that we are going to use to display posts with an image and the post excerpt, we will use one of these now for our archive and index page, the other later when we tackle a two column layout.

If we follow the steps in this tutorial we will be able to add two custom images sizes to a theme and retrieve the images to use in our archive and home page post list, we will be looking at the code that returns the images.

We will be editing the loop template part and be able to create a basic magazine style layout for a website using WordPress.

Add Image Size

To add support for the two image sizes we will use a standard ratio of 4:3 creating the following sizes,  200 x 150 and 100 x 75, this will give us a reasonable sized image to work with.

We will do this by adding the following code inside our functions.php file, as part of the function we wrote in the earlier tutorial, that is inside the starting and ending braces, the full code is below as an example.

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'medium-thumbnail', 200, 150, true );
    add_image_size( 'small-thumbnail', 100, 75, true );
}

 

What the code here does is line one check to see if the function exists, and lines two and three add our new image sizes, note that we have given each image size a name, this is so we can call the image in the loop-index template part.

The argument ‘true’ after the image size tells WordPress to crop the new image to the size we have specified in our passed arguments.

The new functions.php should now look like this:

<?php

/** Tell WordPress to run child_theme_setup()
when the 'after_setup_theme' hook is run.
*/
add_action( 'after_setup_theme', 'child_theme_setup' );

/** This function will hold our new calls and over-rides */
if ( !function_exists( 'child_theme_setup' ) ):
function child_theme_setup() {

    /*
    We want a Second Navigation Bar right at the top
    This theme uses wp_nav_menu() in two locations.
    */
    register_nav_menus( array(
        'secondary' => __( 'Top Navigation', 'twentyten' ),
    ) );

    /* Add support for two post image sizes */
    if ( function_exists( 'add_image_size' ) ) {
        add_image_size( 'medium-thumbnail', 200, 150, true );
        add_image_size( 'small-thumbnail', 100, 75, true );
     }
}
endif;

If we have existing posts with images inside the posts, we can use a plugin to create the post thumbnails from the first image in the post, as WordPress will not create images retrospectively.

To add the plugin from the WordPress admin area we go to Plugins > Add New and search for Generate Post Thumbnails by Maria Shaldybina , when activated run from Tools > Generate Thumbnails, de-activate the plugin after use.

loop-index

Now we need to add our new post images to our child theme, to do this we ‘copy not cut’ the loop.php from the ‘twentyten’ theme folder to the ‘twentyten-template’ theme folder,rename in windows explorer the new loop.php to loop-index.php.

Open loop-index.php search for <?php /* How to display all other posts. */ ?> (line 122).

We want the section (line 132) that starts <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?> 

This is the WordPress Twenty Ten output section for the posts, we can see from the existing code at line 3 that the ‘archive and search’ will only output the excerpt else it will output all the post in line 7.

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
        <div class="entry-summary">
            <?php the_excerpt(); ?>
        </div><!-- .entry-summary -->
<?php else : ?>
        <div class="entry-content">
            <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
            <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
        </div><!-- .entry-content -->
<?php endif; ?>

We want to show our post images as well, and also in the main listing the same output image and excerpt, to do this we will add some conditional code, look at the /* comments */ we have added to identify the lines.

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
        <div class="entry-summary">

            <?php /* Add a conditional image and excertp output */ ?>
            <?php if(has_post_thumbnail()): // Start the condition ?>
            <div class="alignleft" style="margin: 0 0 10px 0">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
            </div>
                <?php the_excerpt(); ?>
            <?php else : // Offer an alternative ?>
                <?php the_excerpt(); ?>
            <?php endif; // end the condition ?>

        </div><!-- .entry-summary -->
<?php else : ?>
        <div class="entry-content">
            <?php /* Add a conditional image and excerpt output */ ?>
            <?php if(has_post_thumbnail()): // Start the condition ?>
                    <div class="alignleft" style="margin: 0 0 10px 0">
                        <?php the_post_thumbnail('medium-thumbnail'); ?>
                    </div>
                        <?php the_excerpt(); ?>

            <?php else : // Offer an alternative ?>

                <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
            <?php endif; // end the condition ?>

            <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
        </div><!-- .entry-content -->
<?php endif; ?>

It may look quite complicated, but we have only added a few lines twice and an inline style, lets look at the first block to see what we have added.

<div class="entry-summary">

    <?php /* Add a conditional image and excerpt output */ ?>
    <?php if(has_post_thumbnail()): // Start the condition ?>
    <div class=="alignleft" style="margin: 0 0 10px 0">
        <?php the_post_thumbnail('medium-thumbnail'); ?>
    </div>
        <?php the_excerpt(); ?>
    <?php else : // Offer an alternative ?>
        <?php the_excerpt(); ?>
    <?php endif; // end the condition ?>

</div><!-- .entry-summary -->

Line 4 starts our conditional code, at line 5 we add a built in style class ‘alignleft’ to contain the image we have added inline style to this class to reduce the right margin which is default 24px,

Line 7 calls the image size we want by name, line 7 closed the container div, line 8 returns the excerpt, line 9 is the else statement, line 10 is the code that was there, and line 11 closes our if condition.

Featured Images

If we preview our posts now nothing would have changed, so we will add a new post or select an existing post and add a featured image, this can be done from admin, Posts > Posts or Posts > Add New, we can assign the image in the right hand column menu Featured image > Set Featured Image, now when we visit our website the new or edited post will have the image and excerpt.

postimg

Notice

Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.

21 thoughts on “Post Images

    • Delete the plugin folder and it should clear, I have the plugin installed ok, so I cannot comment on why you are locked out.

      Are you sure it is the plugin, try removing to another location the files in the child theme, apart from the style.css, if this fixes it add them back one at a time, this is why we like to work on a local copy.

      • Hi there, thankfully I am working on a local copy, and I have FINALLY got it back up and running.

        I deleted the plugin folder and that didn’t work. I didn’t think of moving the child theme folder but in the end I believe that was the culprit, but to be honest, I really have no idea — it’s all voodoo I tell ya.

        Cheers,
        Brad

        • Great,
          The white screen is often an open statement, a missing ;

          php error messages are very generic and not much help, if you get a message and it is saying there is an error in a WordPress function, it is likekly a missing ; or } in your code.

    • Delete the plugin folder and it should clear, I have the plugin installed ok, so I cannot comment on why you are locked out.

      Are you sure it is the plugin, try removing to another location the files in the child theme, apart from the style.css, if this fixes it add them back one at a time, this is why we like to work on a local copy.

  1. Awesome! This is exactly what I was looking for when I found your tutorials. For the record. I reinstalled Generate Post Thumbnails WITHOUT any problems to my site only to find it did nothing for me. It didn’t generate any thumbnails at the stage we are told to run the plugin from the tools tab. However, I followed the rest of the instructions and at the end it worked perfectly! Thumbnails + Excerpts = Sweet!

    Thank you!

    • And, now it’s not working quite right. I’ve got the GPT plugin deactivated. I create a new test post, I set the featured image from my media library I publish it and the thumbnail shows up at 640 x480. I create a new test post with an image inserted into the post at thumbnail size and nothing shows up. What am I doing wrong?

      • When you create a post you do not use any plugin, that is only if you have historic data, or you have change the sizes.

        Right column on edit post or page, at the bottom you will see a new option “add feature image”, click on this and add the featured image.

        Second option edit post or page, then media, select an image or upload and select ‘use as featured image’

        Now in the right colunm you will see a small thumbnail of the image, if not chect your code where you add the image sizes and get thumbnail

        HTH

        • Just wanted to close this out by saying it’s all working, cheers for the prompt replies. Thanks very much for posting these tutorials, I look forward to completing more in the future.

  2. I am working on this on a local install and cannot not get the loop-index file to be recognized. I have tested the code in the parent theme and it works fine. I am I missing a step to get the file working in the child theme?

    • WordPress will pick up the loop-index.php from the child theme if it found, so it is more likely the images are not being found.

      Post Images are not updated retrospectivly, so set the featured image for a new post and test this.

      If you still do not have an image, on the downloads page you will find a section called ‘tutorial two’, download the starting theme, this is the theme from the tutorial set one, use these files to compare the code with yours!

      Regards

      David

      • I have created a new post with a freshly uploaded image without results. I have downloaded and tested the starting theme with a new copy of twentyten and the thumbnails do not work. If I rename index-loop.php any of these names then the thumbnails work: loop.php (works for archive and search) or loop-archive.php or loop-search.php (which work receptively for each section). Any other ideas?

          • twenty ten (parent), to over-ride the parents loop.php you would need a file in the child called, loop-archive.php, as the call is:
            get_template_part( ‘loop’, ‘archive’ );

            It will look for loop-archive.php first then fall back to loop.ppp

            HTH

            David

            • I seem to be having the same problem as mssbee was earlier. I get no thumbnails on archive or search pages with the index-loop.php named as specified. However, like mssbee, if I rename the file to loop.php then the thumbnails appear. I’m afraid that I did not understand your two replies which appear to have answered the question for mssbee. Could you clarify further?

  3. mmm it works, but for me the_post_thumbnail(‘medium-thumbnail’); not works because prints always big image… and i discovered that the_post_thumbnail function supports only

    the_post_thumbnail(‘thumbnail’); // Thumbnail (default 150px x 150px max)
    the_post_thumbnail(‘medium’); // Medium resolution (default 300px x 300px max)
    the_post_thumbnail(‘large’); // Large resolution (default 640px x 640px max)

    http://codex.wordpress.org/Function_Reference/the_post_thumbnail

    with the_post_thumbnail(‘thumbnail’); in my wp works!

    thanks

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tutorials 2010

templates

For this series of tutorials we need to have a local WordPress setup, this will enable easy deployment of the theme files, this series will be added to over a few weeks, rather than one big set of files we … Continue reading

Read More