Support » Fixing WordPress » how to display a thumbnail on index page with larger image on single post page

  • Resolved aliallen


    I would like to display posts on the index page that include a thumbnail image. When someone clicks on the title to get to the single post page, I’d like for the picture to be larger. Since the post is always contained in the_content(), how can I distinguish between content displayed on the home page and the single post page?

Viewing 11 replies - 1 through 11 (of 11 total)
  • You came to the right place.

    Here is an example showing how I use it (test site).

    Thanks for the plugin, Ryan. You did on your site exactly what I want to do on mine. Can you tell me how you used the template tag in your loop?

    <?php post_image(‘default_image’, use_thumb, img_tag, ‘css_class’, ‘customkey’, display); ?>
    <?php szub_post_image(‘args’); ?>

    I don’t exactly understand the parameters.

    If you don’t mind my asking, what is the image in your first post? I can’t figure it out.

    Here’s the loop from index.php.

    <div id="content">

    <div id="home">

    <h2 class="pagetitle">Current Exhibitions</h2>

    <?php query_posts('cat=1&showposts=2'); ?>

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">

    <div class="entry">

    <div class="postthumb"><a href="<?php the_permalink(); ?>"><?php post_image('', true, true); ?></a></div>

    <div class="posttext">
    <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <?php the_excerpt(); ?>

    <div class="clear"></div>



    <?php endwhile; ?>

    <?php else : ?>

    <h3 class="center">Not Found</h3>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>

    <?php endif; ?>


    I couldn’t really explain the perameters for you without going back and reading the link again (I have a few things I have to go take care of). But with this use of the arguments I have it set to never use a default image (the posts in this category always have images). I understand your pain though, the documentation is a little confusing, but keep going through it and it will eventualy make sense. It’s a great plugin, that’s for sure.

    As far as the image is concerned, it’s from a local photographer an shows an arm with bullets tucked under a cloth wrap.

    Good luck. And if you come up with a great way of using it, post back here.

    I’m sorry. I must be an idiot, but how do you go from a thumbnail on the index page to a larger picture on the single post page? Also, do you still upload pictures using the icon in the Write Post Screen? I tried to implement your code, but it didn’t work. Here is my site:

    I tried putting “><?php post_image(”, true, true); ?> in the loop on the index page and setting use_thumb to false on the single post page. I had a large image and a thumbnail image, uploading the large image using the icon in the Write Post screen. If I upload the thumbnail, the larger picture does not appear on the single post page. Even after reading all of the threads and the plugin page, I don’t understand how this is different from the upload icon built in. Please help. Thanks for your time.

    For this plugin, you should only use the inline uploader (not the image button in the text editor, but the one below the editor). Not sure why except that I’ve never relied on the text editor’s image upload feature (it may very well work with some tweaking, or not). I have only used this plugin with the inline uploader.

    Now that we have that established, the inline uploader makes a thumbnail by default. For example, if you upload an image with a file name of “image.jpg” the WP uploader will automatically create a jpg named image.thumbnail.jpg. This is the thumbnail that <?php post_image(); ?> will call.

    You only need to put this code on the main page (index.php). All other pages should have the normal loop (specifically, “single.php”). From here, the plugin will take the first image in your post (full size version, not a thumb) and use it’s thumbnail for <?php post_image(); ?>

    You see what I mean?

    Oh, I get it now. I tried to upload an image, but I got an error. I don’t think that chmod is set to 777. The university is very picky about permissions. Hopefully, they’ll do it for me. I’ll let you know if I’m successful. Thanks again for your help.

    Well, I’ve been told that chmod 777 is a severe security risk so I can’t upload images using that WP feature. Is there any way to use this plugin or another with the image icon in the Write Post screen?

    I accomplished this by using CSS.

    It may not be the best written tutorial, so if nothing is clear, either leave a comment or post back here and I’ll try to explain better.

    Thank you, miklb! Your solution was brilliant, yet so simple! I can’t use the upload feature that creates thumbnails because I can’t set chmod to 777. So I use DW to upload a full-size image and thumbnail. Then I insert the image tags as described in the link above. It is a little more work, but it accomplishes what I want. Thanks again for your help.

    Glad it worked out. I was happy as it uses CSS, and not PHP. Only downside, is if you change themes, and don’t make the same div changes, then both images show up. But for me, that’s not an issue.

    Great work.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘how to display a thumbnail on index page with larger image on single post page’ is closed to new replies.