blog page as grid

This commit is contained in:
Stef Kariotidis 2016-11-20 13:09:16 +02:00
parent 06dc66a392
commit 64c5ea25c2
3 changed files with 56 additions and 8 deletions

View File

@ -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' ); ?>

View File

@ -142,6 +142,7 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
'choices' => array(
'default' => __( 'Default', 'understrap' ),
'masonry' => __( 'Masonry', 'understrap' ),
'grid' => __( 'Grid', 'understrap' ),
),
'priority' => '30',
)

View File

@ -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>