Grid style layout for post lists

https://tinyurl.com/ydlwowe

what is your code so far, and do you have an example to see?
link?

here’s my current code. the website however is on maintenance mode (I can’t put it public now)..

I decided on a category I would like to stand out. It’s “features”. Therefore I copied category.php and named it category-4.php (4 being the features ID).

The code I have now is:

<?php get_header(); ?>

<div class=”breadcrumb”>
<?php if(function_exists(‘bcn_display’))
{ bcn_display(); } ?>
</div>

<?php include (TEMPLATEPATH . ‘/strings.php’); ?>

<div class=”new-wrapper”>
<?php
$values = get_post_custom_values(“feat-img”);
if (is_array($values)) : ?>
<?php if (file_exists($upload_path . ‘timthumb.php’)) { ?>
” title=”<?php the_title(); ?>”><img src=”<?php echo get_settings(‘home’); ?>/scripts/timthumb.php?src=<?php echo “$values[0]”; ?>&h=160&w=200&zc=1″ alt=”<?php the_title(); ?>” />
<?php } else { ?>
” title=”<?php the_title(); ?>”><img src=”<?php echo “$values[0]”; ?>” alt=”<?php the_title(); ?>” width=”200″ height=”160″ border=”0″ />
<?php } ?>
<?php else: ?>
<?php if (file_exists($upload_path . ‘timthumb.php’)) { ?>
” title=”<?php the_title(); ?>”><img src=”<?php echo get_settings(‘home’); ?>/scripts/timthumb.php?src=<?php echo get_first_image() ?>&h=160&w=200&zc=1″ alt=”<?php the_title(); ?>” />
<?php } else { ?>
<img src=”<?php echo get_first_image() ?>” alt=”<?php the_title(); ?>” width=”200″ height=”160″ border=”0″ />
<?php } ?>
<?php endif; ?>
<h5>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></h5>
</div> <!– closing div of new-wrapper –>

<div class=”clear”></div>

<?php include (TEMPLATEPATH . ‘/paginate.php’); ?>

<?php get_footer(); ?>

As you can see I’m using timthumb to get the first image of the post into the square.

the CSS is:
.new-wrapper {background:#222; padding:0px; float: left; width: 200px; height: 200px; margin: 5px 20px 15px 0px; }

it could not recognnize the loop in your above code, or the way you display many posts this way;
also, this seems to be a css issue, and at least i personally would need a live site to work with to comment on css.

could you at least post a screenshot of what your cat-4 output looks so far?

Ok thanks alot. The code I’ve copied here is the actual code from my category.php and it works, only it has taken the first post of the category and not the others, and no grid…
I’m posting a screenshot of what I see now:

https://img684.imageshack.us/img684/3227/screenshotcategory.png

you need to integrate the wordpress loop into your code:

put the first line of the loop:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

before this line:
<div class="new-wrapper">

then put the end of the loop:
<?php endwhile; endif; ?>

just before this end of your code:

<div class="clear"></div>
<?php include (TEMPLATEPATH . '/paginate.php'); ?>
<?php get_footer(); ?>

that should output as many posts as you have set in your settings in admin. and the css should sort them into grid style.
good luck ??

Thank you SO MUCH alchymyth!
Im going to try this right now then report.
Thanks again, I appreciate!

Job done! It worked like a charm, thank you so much!
Now just going to play a bit with the CSS and make things look better ??

Hey guys, I was also wondering about this, but I want to add a “rollover effect” like there is here

I know how to add opacity rollover like at hypebeast but I want something with color and text.

Any advice? I know how to make it with html, but am having trouble getting it to work with php.

Thanks!

How to add this to the thumbnail