Merge pull request #142 from stef-k/posts-index-grid

blog page as grid

home.php

@@ -36,7 +36,6 @@ get_header();
 			<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
 			<?php if ( 'masonry' === $posts_style ) : ?>
 			<div class="card-columns"><?php endif; ?>
-
 				<main class="site-main" id="main">
 
 					<?php if ( have_posts() ) : ?>
@@ -47,9 +46,13 @@ get_header();
 
 							<?php
 							if ( 'masonry' === $posts_style ) :
-								get_template_part( 'loop-templates/content-card' );
+								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.
+								/*
+								 * 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.
 								 */

inc/customizer.php

@@ -145,10 +145,55 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 					'choices'     => array(
 						'default'       => __( 'Default', 'understrap' ),
 						'masonry' => __( 'Masonry', 'understrap' ),
+						'grid' => __( 'Grid', 'understrap' ),
 					),
 					'priority'    => '30',
 				)
 			) );
+
+		// Columns setup for grid posts.
+		/**
+		 * Function and callback to check when grid is enabled.
+		 * @return bool
+		 */
+		function is_grid_enabled ()
+		{
+			return 'grid' == get_theme_mod( 'understrap_posts_index_style' );
+		}
+		if ( is_grid_enabled() ) {
+			// How many columns to use each grid post
+			$wp_customize->add_setting( 'understrap_grid_post_columns', array(
+				'default'    => '6',
+				'type'       => 'theme_mod',
+				'capability' => 'edit_theme_options',
+				'transport' => 'refresh',
+			) );
+
+			$wp_customize->add_control(
+				new WP_Customize_Control(
+					$wp_customize,
+					'understrap_grid_post_columns', array(
+						'label'       => __( 'Grid Post Columns', 'understrap' ),
+						'description' => __( "Choose how many columns to use in grid posts", 'understrap' ),
+						'section'     => 'understrap_theme_layout_options',
+						'settings'    => 'understrap_grid_post_columns',
+						'type'        => 'select',
+						'choices'     => array(
+							'6'       => '6',
+							'4' =>       '4',
+							'3' =>       '3',
+							'2' =>       '2',
+							'1' =>       '1',
+						),
+						'default'     =>  6,
+						'priority'    => '30',
+						'transport'   => 'refresh',
+					)
+				) );
+
+		}
+		// hook to auto-hide/show depending the understrap_posts_index_style option
+		$wp_customize->get_control( 'understrap_grid_post_columns' )->active_callback = 'is_grid_enabled';
 	}
 }
 add_action( 'customize_register', 'understrap_theme_customize_register' );

loop-templates/content-grid.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Partial template to display latest posts (home.php) as grid.
+ *
+ * @package understrap
+ */
+$col = get_theme_mod( 'understrap_grid_post_columns' );
+?>
+<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
+	<div class="col-md-<?php echo esc_html( $col ); ?> 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>