ThemeShaper Forums » Thematic

[closed]

adding thumbnails to category and date archive results

(5 posts)
  • Started 8 years ago by cookieandkate
  • Latest reply from cookieandkate
  • This topic is resolved
  1. Hi all,

    I have managed to make my child theme look pretty much the way I want it so far (http://cookieandkate.com), but now I'm stuck. All I want to do is add a thumbnail image (200 pixels x 200 pixels) to the left of my posts in category, date, and author archives, as well as in search results. I've learned that modifying archive.php will take care of category, date and author archives, and I think I'd have to work on search.php to add a thumbnail to each post listed in the search results.

    I found the "Get The Image" plugin, which seems capable of pulling an image from the post (I'm not very concerned with which image shows up as the thumbnail) and placing it on archive pages. It also sounds like wordpress 3.0 (which is the version I'm using) offers some features to make this easier.

    But that's where I'm stuck. It seems like a simple problem that should have a simple solution, but I don't have experience with loops or editing php files. Any help would be greatly appreciated. Thank you!

    Posted 8 years ago #
  2. dhales
    Member

    Hi CookieandKate, I'm sure there a number of ways of achieving this result, but I just created a modified loop for each instance I wanted to change (category, author, search, index, etc.)

    Start by removing the default loop

    // Remove Archive Loop
    
    function unhook_thematic_functions() {
        remove_action('thematic_archiveloop', 'thematic_archive_loop');
    }
    add_action('init','unhook_thematic_functions');

    Then create a new custom loop

    // Add Archive Loop
    
    function add_archive_loop() {
    	if ( is_archive() ) { ?>
    
    	<?php	while ( have_posts() ) : the_post(); ?>
    
    <div id="blog">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>                
    
    <?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>
    				    <a href="<?php the_permalink() ?>"><img style="float:left;margin:0px 10px 0px 0px;" src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="alt text" border="0" /></a>
    				<?php else: ?>
    				    <a href="<?php the_permalink() ?>"><img style="float:left;margin:0px 10px 0px 0px;"  src="<?php bloginfo('stylesheet_directory'); ?>/images/thumbnail.jpg" alt="Default Thumbnail" border="0"/></a>
    				<?php endif; ?>
    
    <?php the_content(); ?>
    
    <div id="post-details">
    					<p><?php the_time('F j, Y'); ?> | <a href="<?php the_permalink() ?>" rel="bookmark">Continue Reading &raquo;</a></p>
    				</div>
    
                    </div>
    				<?php endwhile; ?>
    <?php }
    
    }
    	add_action('thematic_archiveloop', 'add_archive_loop');

    Initially I had these setup using a custom field (this code is a bit old), so you just need to change that bit to using the new wordpress thumbnails and you'll be good to go. Once you've got this working for the archive loop just repeat the same code changing the function and other variable names.

    Posted 8 years ago #
  3. here is the snippet i use to put thumbnails anywhere there is an excerpt (so search, archives, categories, tags, authors, and home if you switch that to use excerpts. you could conditionally set the if( has_post_thumbnail()) bit if you don't want it everywhere.

    // add thumbnails, read more links and wrap excerpt in p tag
    function all_excerpts_get_more_link($post_excerpt) {
    	if ( has_post_thumbnail() ) {
    		$child_excerpt =  the_post_thumbnail( 'thumbnail' ) . '<p>' . $post_excerpt . '</p>' . '<p class="readmore"><a href="'. get_permalink($post->ID) . '">' . 'Continue Reading &raquo' . '</a></p>';
    	}
    	else {
    		$child_excerpt = '<p>' . $post_excerpt . '</p>' . '<p class="readmore"><a href="'. get_permalink($post->ID) . '">' . 'Continue Reading &raquo' . '</a></p>';
    	}
    	return $child_excerpt;
     }
    
    add_filter('wp_trim_excerpt', 'all_excerpts_get_more_link');

    this works with wp3.0's post_image function, but if you wanted to use justin tadlock's plugin you would replace the wp3 function's w/ his (which are fairly similar).

    or you could write custom loops. the best way to learn loops is to go into the thematic folder and COPY the entire loop that you want to work on into your functions.php. then do as dhales outlined... removing first the current loop and then adding your new loop onto the hook instead.

    Posted 8 years ago #
  4. Hi helgatheviking,

    Thank you so much for your help. I'm not sure I'm following your instructions correctly, though. I copied and pasted the code given above in my child theme's functions.php file before the PHP end tag, which is ?>

    I received an error message after I saved it, and when I clicked onto any of my category pages, I received the following error:
    Fatal error: Call to undefined function has_post_thumbnail() in /home/content/48/6128548/html/wp-content/themes/cookiemonster/functions.php on line 18

    I'm sure I'm just being dense and I've missed something important. I would greatly appreciate further guidance. Thank you!

    Posted 8 years ago #
  5. Ok, I've figured it out thanks to this thread: http://forums.themeshaper.com/topic/how-to-enclose-post-thumbnail-in-ltdivgt-to-modify-positioning#post-11203

    In case this helps anyone else, I documented what I've done below. I ended up with a thumbnail image to the right and in line with my post title and excerpt on all pages that include excerpts. Therefore, in my case, I see thumbnails on my date archive pages, category pages and author pages, which is exactly what I wanted.

    I added the following code to my functions.php file before the closing PHP tag, which is ?>

    add_theme_support('post-thumbnails');

    function my_post_title($title) {
    if (is_archive()) {
    return get_the_post_thumbnail(NULL, 'thumbnail') . $title;
    } else {
    return $title;
    }
    }
    add_filter('thematic_postheader_posttitle', 'my_post_title');

    FYI: If I had only wanted to see the thumbnail on my category archives, I would have used this code instead:

    add_theme_support('post-thumbnails');

    function my_post_title($title) {
    if (is_category()) {
    return get_the_post_thumbnail(NULL, 'thumbnail') . $title;
    } else {
    return $title;
    }
    }
    add_filter('thematic_postheader_posttitle', 'my_post_title');

    I then added the following code to my style.css file in order to move the thumbnail from above the post title and excerpt to the right of that information. If you would prefer that the image appear to the left of the post info, just replace both instances of float: right; with float: left;

    Here's the code in my style.css:
    /* Post thumbnails*/

    img.wp-post-image {
    float: right;
    margin:0 9px 9px 0;
    display:inline;
    }

    a img.wp-post-image {
    float: right;
    margin:0 9px 9px 0;
    display:inline;
    }

    h1,h2,h3,h4,h5,h6 {
    clear:none;
    }

    Now then, you can specify the size of your thumbnail in the media settings panel. I determined the total height of my post title, excerpt and category/comment line and set the thumbnail to that height and width. It looks clean that way.

    The only downside here is that in order to actually see a thumbnail next to the post info, you'll have to specify a "featured image" for each post. To do so, go to the "edit post" page for each of your posts and look in the sidebar on the right below the "add tags" option. You'll see a "featured image" option. Click on the link labeled "Set featured image", upload or select an image, click on the "show" link for detailed info about the image, and in the very last line of options, you'll see a link to "use as featured image". Click on that, save the post and you're done!

    p.s. I'm sure there is an easier way to automate the featured image issue, but that's beyond me. it's something that the Get the Image plugin seems to have figured out.

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.