Frontpage Thumbnail Grid

1

Hey, everyone. I’m looking to create a front page of post thumbnails, separated into rows of 4 posts each. What would be the best way to accomplish this? I’ve done some rather simple theme work in the past, just getting into custom Roots theme development.

Here’s a screenshot of what I’m trying to do:

2

It spaghetti, but you can see how to do it. Save this in base-home.php and setup number of posts on front page on number that you whant, and open your site.

<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
  <!--[if lt IE 7]><div class="alert"><?php _e('You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'roots'); ?></div><![endif]-->
  <?php
    get_template_part('templates/before-menu');
    do_action('get_header');
    // Use Bootstrap's navbar if enabled in config.php
    if (current_theme_supports('bootstrap-top-navbar')) {
      get_template_part('templates/header-top-navbar');
    } else {
      get_template_part('templates/header');
    }
  ?>

  <div class="container">
    <div class="row">
    <?php $num = 0; ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <div class="col-sm-3 col-md-3 col-lg-3">
        <?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); } ?>
      </div>

      <?php $num++; ?>
      <?php if ($num == 4) : ?>
        <?php $num = 0; ?>
        </div>
        <div class="row">
      <?php endif; ?>

    <?php endwhile; ?>
    </div>
  </div>

  <?php get_template_part('templates/footer'); ?>
</body>
</html>
1 Like
3

This works perfectly! Thanks a ton!

4

At least you will need to set up class for post thumbnail to be responsive. Anyway, this is not so good solution as it will be not well formated on small devices.