From 64c5ea25c22ead3f52e06e94562965abfb70ee12 Mon Sep 17 00:00:00 2001
From: Stef Kariotidis <stef.kariotidis@gmail.com>
Date: Sun, 20 Nov 2016 13:09:16 +0200
Subject: [PATCH] blog page as grid

---
 home.php                        | 19 ++++++++------
 inc/customizer.php              |  1 +
 loop-templates/content-grid.php | 44 +++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 loop-templates/content-grid.php

diff --git a/home.php b/home.php
index 9f08b55..f258bc4 100644
--- a/home.php
+++ b/home.php
@@ -27,9 +27,8 @@ $posts_style = get_theme_mod( 'understrap_posts_index_style' );
 
 			<!-- Do the left sidebar check -->
 			<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
-			<?php if ( 'masonry' === $posts_style ): ?>
+			<?php if ( 'masonry' === $posts_style ) : ?>
 			<div class="card-columns"><?php endif; ?>
-
 				<main class="site-main" id="main">
 
 					<?php if ( have_posts() ) : ?>
@@ -39,10 +38,14 @@ $posts_style = get_theme_mod( 'understrap_posts_index_style' );
 						<?php while ( have_posts() ) : the_post(); ?>
 
 							<?php
-							if ( 'masonry' === $posts_style ):
-								get_template_part( 'loop-templates/content-card' );
-							else:
-								/* Include the Post-Format-specific template for the content.
+							if ( 'masonry' === $posts_style ) :
+								get_template_part( 'loop-templates/content', 'card' );
+							elseif ( 'grid' === $posts_style ) :
+
+								get_template_part( 'loop-templates/content', 'grid' );
+							else :
+								/*
+								 * Include the Post-Format-specific template for the content.
 								 * If you want to override this in a child theme, then include a file
 								 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
 								 */
@@ -59,13 +62,13 @@ $posts_style = get_theme_mod( 'understrap_posts_index_style' );
 						<?php get_template_part( 'loop-templates/content', 'none' ); ?>
 
 					<?php endif; ?>
-			<?php if ( 'masonry' === $posts_style ): ?></div><?php endif; ?>
+			<?php if ( 'masonry' === $posts_style ) : ?></div><?php endif; ?>
 			</main><!-- #main -->
 
 		</div><!-- #primary -->
 
 		<!-- Do the right sidebar check -->
-		<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ): ?>
+		<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ) : ?>
 
 			<?php get_sidebar( 'right' ); ?>
 
diff --git a/inc/customizer.php b/inc/customizer.php
index 2e1722e..67a167a 100644
--- a/inc/customizer.php
+++ b/inc/customizer.php
@@ -142,6 +142,7 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 					'choices'     => array(
 						'default'       => __( 'Default', 'understrap' ),
 						'masonry' => __( 'Masonry', 'understrap' ),
+						'grid' => __( 'Grid', 'understrap' ),
 					),
 					'priority'    => '30',
 				)
diff --git a/loop-templates/content-grid.php b/loop-templates/content-grid.php
new file mode 100644
index 0000000..dbde89d
--- /dev/null
+++ b/loop-templates/content-grid.php
@@ -0,0 +1,44 @@
+<?php
+/**
+ * Partial template to display latest posts (home.php) as grid.
+ *
+ * @package understrap
+ */
+
+?>
+<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
+	<div class="col-md-4 col-xs-12">
+
+
+		<div class="card card-inverse ">
+
+			<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
+				<?php $alt = get_post_meta( get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true ); ?>
+				<img class="card-img "
+				     src="<?php echo esc_html( get_the_post_thumbnail_url( $post->ID, 'large' ) ) ?>" alt="<?php echo esc_html( $alt ); ?>">
+
+				<div class="card-img-overlay">
+
+					<header class="entry-header">
+						<h4 class="card-title"><?php the_title(); ?></h4>
+
+						<?php if ( 'post' === get_post_type() ) : ?>
+
+							<p class="entry-meta card-text">
+								<small>Posted: <?php the_date(); ?> at: <?php the_time();  ?></small>
+							</p>
+
+						<?php endif; ?>
+
+					</header>
+
+				</div>
+
+			</article>
+
+
+		</div>
+
+
+	</div>
+</a>