Displaying custom post types as a gallery

Question

This is a bit of a specific question--I have found bits and pieces of information on the net, but nothing that puts the whole picture together for me. Hopefully I can get some help here.

Background: I am a newbie to Wordpress. I'm using it as the CMS for a t-shirt shop I'm working on. My 't-shirts' custom post type is set up, but I want to create a 'T-shirts' page that will display all my available t-shirts in a gallery style.
I really don't want to use an e-commerce plug-in because I want a bit more control over how my 'T-shirts' page looks and functions.

Problem(s):
1. I need a code that will output the grid layout automatically. Each new 't-shirt' post should occupy the top left grid space. With each new 't-shirt' added, the old ones should automatically shift right to the next space.
If it helps, the rest of my site uses a 16 column 960px grid--ideally each grid space will be 220px wide (4 columns).
2. I have set up the featured image in my 't-shirt' posts as a thumbnail preview, so I'd like the gallery to display JUST the featured image with the title beneath.
3. I want the gallery to begin paginating after about 12 posts.

From the little I know about Wordpress, I think I'll need to use some loop functions but I have no clue which ones.

Hopefully someone here can help shed some light on this for me.

Answer 1

http://www.rvoodoo.com/who-are-the-voodoo-empire/ Something like that I assume? That's a CPT displayed as sort of a grid.

Basically, you wrap the loop in a div. Set the width of that div. Say your overall width is 900px for your page. You could set the post width as 250. so 3 of them will be 750 wide, that gives you 150px of padding to use, etc. You float the divs left.... then they automatically line up next to each other til they run out of space, then go to the next line. By default, WP would put the newest one top left, if you floated left. The older ones keep moving right until they wrap to the next line.

To limit to 12 posts, and paginate afterwards, you just use a query. http://wordpress.org/search/query_posts

Now I don't know your theme, your css selectors will be different than mine, etc. I'm just going to post what I use, and you can pick it apart. The code will be different, but the concept remains the same.

You'll also notice I use enqueue style here. Since the grid layout is different from my normal posts, I only call the stylesheet for the grid on this page.

the query I use here, I've modified to meet your needs, but the rest of the stuff you'll need to tweak. Like I display the excerpt here, you don't want that. And the whole entry-utility section I have will not apply to you. But, Like I said, I'm throwing this up in hopes it will help you with the concept.

    <?php
wp_enqueue_style(  "member_css", $voodoo_template_dir . '/scheme/member-template.css', false, "1.0", "all" );
get_header();
query_posts( array(
      'post_type' => 've_members', 
      'posts_per_page' => 12,  
      'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ), 
 )); 
?>

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

    <div>

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

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

            <div class="memberBox">

                <h2 class="entry-title">
                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                </h2>
                <div class="clear"></div>

                <div class="memberThumb">
                    <a rel="lightbox" href="<?php $image_id = get_post_thumbnail_id();
                    $image_url = wp_get_attachment_image_src($image_id,'large', true);
                    echo $image_url[0];  ?>">
                    <?php the_post_thumbnail('member-thumb', array( 'class' => 'member-thumb aligncenter' ) ); ?>
                    </a>
                    <div class="clear"></div>
                </div>

                <div class="entry-content">

                    <?php the_excerpt(); ?>
                    <div class="clear"></div>
                </div>
                <hr />
                <div class="entry-utility">
                    <div class="socialIcons">
                        <?php get_template_part( 'icons', 'members' ); ?>
                    </div>
                    <div class="fbConnect">
                        <?php if(function_exists('sfc_like_button')) : ?>
                        <?php sfc_like_button(array('layout' => 'button_count')); ?>
                        <?php endif; ?>
                    </div>
                    <div class="twitConnect">
                        <?php if(function_exists('stc_tweetbutton')) : ?>
                        <?php stc_tweetbutton(); ?>
                        <?php endif; ?>
                    </div>
                    <div class="clear"></div>
                    <span class="comments-link"><?php comments_popup_link( __( '[Leave a Message]', 'voodoo_lion' ), __( '[1 Message]', 'voodoo_lion' ), __( '[% Messages]', 'voodoo_lion' ) ); ?></span>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

        <?php endwhile; ?>

    </div>

<?php endif; ?>

<?php get_footer(); ?>

And here is my stylesheet that I enqueue for just this template

    .memberPost {
    float: left;
    width: 225px;
    margin: 10px;
}
.memberPost .fbConnect {
    width: 80px;
    float: left;
    overflow: hidden;
}
.memberPost .twitConnect {
    margin-right: -20px;
}
.memberPost h2 {
    text-align: center;
    margin-top: 5px;
}
.memberPost .memberThumb {
    height: 100px;
}
.memberPost .entry-content p {
    margin: 5px;
    height: 275px;
    text-align: left;
}
.memberPost .entry-utility {
    margin: 0 5px 10px 5px;
}
.memberPost .socialIcons {
    height: 28px;
    margin-bottom: 2px;
}