Support » Plugins » how to show thumbnails in search results

  • Jonas Grumby

    (@ss_minnow)


    Just wondering if anybody can send me some code that I could stick into my search results template that would pull in the 150×150 thumbnail associated with each post. Ideally an if / elseif scenario that would display a default image if no image is associated with the post.

    Otherwise if somebody could suggest a theme that does this I could get the theme and find the code that I’m looking for.

    Thanks

Viewing 11 replies - 1 through 11 (of 11 total)
  • @mercime

    (@mercime)

    Volunteer Moderator

    There are a variety of ways to implement this. The simplest way would be to install Get the Image Plugin. The plugin automatically pulls the thumbnail of the first image uploaded per post and auto-adds a default image (which you set up) in case there is no image uploaded to that post.

    After installing the plugin, open your search.php with text editor and just add and style a div for the image after the loop begins e.g.

    <div class="results">
    <div class="thumbs"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php if ( function_exists( 'get_the_image' ) ) { get_the_image('width=150&height=150&image_scan=true&default_image=http://yoursite.com/default.jpg' ); } ?></a></div>
    <div class="blogposts">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?><br />
    <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
    </div>
    </div>

    Then add something like this in your style.css:

    .results { clear: both; margin-bottom: 20px;}
    .thumbs { float: left; width: 150px; height: 150px; margin: 0 10px 10px 0; }

    etc

    edit- do not forget to upload the default.jpg (150px x 150px) to root folder and change the link yoursite.com to your site url.

    Jonas Grumby

    (@ss_minnow)

    Thanks. I’ll give it a try!

    Jonas Grumby

    (@ss_minnow)

    It works but I get some weird double-link code like:

    <a href="whatever"><a href="whatever"><img src="whatever"></a></a>

    Essentially the link is opened and closed twice around the image. It’s nested properly and it works, but it’s not right.

    Jonas Grumby

    (@ss_minnow)

    p.s. If you’re using the 150×150 thumbnail you may also want to add this to your .results class:

    min-height: 155px;

    @mercime

    (@mercime)

    Volunteer Moderator

    <a href="whatever"><a href="whatever"><img src="whatever"></a></a>
    Sorry about that, I forgot about that, just delete the <a hef="...."> just before the call to get_the_image.
    <div class="thumbs"><?php if ( function_exists( 'get_the_image' ) ) { get_the_image('width=150&height=150&image_scan=true&default_image=http://yoursite.com/default.jpg' ); } ?></div>

    As for the height thing, since .results has margin-bottom: 20px; and is cleared left, I assumed it would already have the necessary space. Style according to taste 🙂

    Jonas Grumby

    (@ss_minnow)

    That fixes the link. The only other thing that’s weird is that the outputted image tag says:

    class=”thumbnail thumbnail thumbnail “

    It works fine though.

    Thanks!

    god damn SS_Minnow the code is childish and you cannot fix it by yourself?

    Watch your language, man! Only because YOU know how to do this means that everyone else can? I would have liked to see you as a beginner …

    -Frank

    yo SS_Minnow I am using a modded mimbo 3.0 theme by Darren Hoyt for my site … you can see how it works out here:

    http://www.barganews.com

    …. give the search feature (bottom right) a whirl and you can see for yourself the results … is this what you are after ?

    ciao
    db

    Thanks. As I mentioned it works fine except that the tag reads:

    class=”thumbnail thumbnail thumbnail “

    I wouldn’t be able to see how to fix that by looking at the public side of a site. I am getting the images displayed as I want them and it looks fine despite what appears to be a slight coding error. The code that I used is what is posted above by mercime.

    Sorry, tommix, but it is not clear to me why the class name is being repeated three times.

    Doggybag-Your search results are exactly what I’m looking for. I don’t want to change themes-I’m using Thematic….can anyone help?

    Jana
    http://www.weekendvintage.com

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘how to show thumbnails in search results’ is closed to new replies.