WordPress.org

Ready to get started?Download WordPress

Forums

Show only thumbnails in a grid view on WP Search Results Page (8 posts)

  1. mirogoldberg
    Member
    Posted 1 year ago #

    Hi all,

    i am not a pro in wordpress at all, but i learned a lot in these forums and on the internet by tutorials about programming and wordpress. But i didnt find a solution for my current question.

    I want to show only thumbnails on the wordpress results page, no excerpts and stuff at all. The thumbnails should link to posts and pages and look like a gallery grid view. If there is no thumbnail, the results should not be shown.

    You can find the current code of my search.php below.

    My first idea is to just cut away the things which dont belong to the thumbnail. But then the style of the page just doesnt look good, because the thumbnails aren't in a row. Maybe you have an idea?

    <h2 class="pagetitle">Suchergebnisse</h2>
    <?php while (have_posts()) : the_post(); ?>
    <div <?php post_class('post') ?>>
    <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); } ?>
    <h2 class="title" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <div class="postdate"><img src="<?php bloginfo('template_url'); ?>/images/date.png" /> <?php the_time('F jS, Y') ?> <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> <?php edit_post_link('Edit', '', ''); } ?></div>
    <div class="entry">
    <?php the_excerpt() ?>
    </div>
    <div class="readmorecontent">
    <a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Zum Artikel ยป</a>
    </div>
    </div>
    <?php endwhile; ?>
  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    the style of the page just doesnt look good, because the thumbnails aren't in a row

    you need to apply some formatting;

    try to work with a tool such as Firebug http://getfirebug.com/ to identify which styles to edit.

    'grid' layout is usually done with giving the divs a fixed width and float:left with a margin; if the elements vary in height, you might need to add a clear:left to the first element in a row.

    post a link to your site, pointing to a search results page with a lot of thumbnails, to illustrate what you have so far.

  3. mirogoldberg
    Member
    Posted 1 year ago #

    Thank you very much for your prompt answer.

    http://www.designersonnenbrillen24.de/?s=Sunglasses&x=0&y=0 here is the link to search results page. The elements dont vary in high.

    I want the search results to like these http://www.designersonnenbrillen24.de/dkny-sonnenbrillen

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    some possible styles to start with:

    .search .post { float:left; width:200px; border:none; margin:0; }
    .search .post img { width: 185px; height:185px; border:none; }
    .search .navigation { clear: both; }

    (only tested in Firefox)

  5. mirogoldberg
    Member
    Posted 1 year ago #

    Thank you so much, this worked! Now i only need some script to exclude search results without a thumbnail. You have an idea for this?

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    a quick hack:

    http://pastebin.com/N4ie00NQ

    simply jumps over posts without thumbnail; obviously might lead to odd numbers of search results per page.

    more complex:

    http://codex.wordpress.org/Function_Reference/query_posts#Preserving_Existing_Query_Parameters

    try to add this before your code:

    <?php global $wp_query;
    $args = array_merge( $wp_query->query, array( 'meta_key' => '_thumbnail_id' ) );
    query_posts( $args ); ?>
  7. mirogoldberg
    Member
    Posted 1 year ago #

    Thank you very much, this worked. Now i only need to know, how i can increase the number of search results, because the "posts per page" plugin doesnt work anymore after this hack.

    you can view the result here http://www.designersonnenbrillen24.de/?s=Boss+Orange&x=0&y=0

    Thank you again

  8. stoiko
    Member
    Posted 1 year ago #

    I really need this, can you give me the working code, but using main image, not thumbnail?

Topic Closed

This topic has been closed to new replies.

About this Topic