WordPress.org

Support

Support » How-To and Troubleshooting » Collect thumbnails in page top

Collect thumbnails in page top

  • CharltonM

    @charltonm

    Hi

    I´m on my first wordpress attempt and is struggling with thumbnails. I´ve searched around but not found anything that can help me yet.

    What I´m trying to do is to get a thumbnail from each post and put it in the top of the page so that there will be a grid of thumbnails used as an overview of all the posts on the page, and by clicking the thumb you get scrolled down to the post.

    How is this possible? Is there some sort of plugin or is it a few lines of code I need to write?

    Thanks
    Charlton

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    @alchymyth

    what theme are you working with?

    is that the front page you are talking about?

    general:
    in header.php, use the loop to show all posts with thumbnails;
    create post links as anchor links to the posts on the same page;
    finish the code with rewind_posts() http://codex.wordpress.org/Function_Reference/rewind_posts

    in the main loop, make sure that each post div has a unique css id, possibly created from the post ID.

    details may follow when you provide more information about what you have so far.

    CharltonM

    @charltonm

    I´m creating a new theme from scratch, I used a blank template so there´s pretty much nothing there except for my design.

    Yes, the layout on the front page is

    <Title>

    <Block of thumbnails>

    <Posts>

    image

    As it is now, I get a thumbnail above every post, but i want to collect all the thumbs from the posts and move them to a block of thumbnails above the posts.

    Is it better if I use an existing theme where these functions are already implemented?

    Michael

    @alchymyth

    loop for the block of thumbnails (you will need to add html tags and css for the formatting);

    example:

    <div id="top">&nbsp;</div>
    
    <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
    <a href="#post-<?php the_ID(); ?>"><?php the_post_thumbnail('thumbnail',array( 'title' => 'link to '.the_title_attribute('echo=0'))); ?></a>
    <?php endwhile; endif; rewind_posts(); ?>

    loop for the posts (you will need to add html tags and css for the formatting):

    <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php //whatever you want to output for the full post// ?>
    <h3><?php the_title(); ?></h3><?php the_post_thumbnail(); ?>
    
    <a href="#top">&uarr; back to top</a>
    
    </div><!-- #post-<?php the_ID(); ?> -->
    <?php endwhile; endif; ?>

    http://codex.wordpress.org/Function_Reference/rewind_posts
    http://codex.wordpress.org/The_Loop
    http://codex.wordpress.org/Post_Thumbnails

    CharltonM

    @charltonm

    Thank you! I think I can work it from here.

    Best regards
    C

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Collect thumbnails in page top’ is closed to new replies.
Skip to toolbar