Skip to content

Commit

Permalink
Beginning to add a grid-style layout to the theme blog.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimcoleman
kimcoleman committed Dec 29, 2021
1 parent a8a4000 commit 94d2578
Show file tree
Hide file tree
Showing 5 changed files with 179 additions and 15 deletions.
37 changes: 37 additions & 0 deletions components/post/content-grid.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?php
/**
* Template part for displaying grid-style posts
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Memberlite
*/
?>

<?php global $memberlite_defaults; ?>

<article id="post-<?php the_ID(); ?>" <?php post_class( ); ?>>
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'large', array( 'class' => 'aligncenter' ) );
}
?>
</a>
<?php get_template_part( 'components/post/entry', 'header' ); ?>

<div class="entry-content">
<?php do_action( 'memberlite_before_content_post' ); ?>
<?php do_action( 'memberlite_after_content_post' ); ?>
</div><!-- .entry-content -->

<?php /*
<footer class="entry-footer">
<?php if ( 'post' == get_post_type() ) : // Hide meta text for pages on Search ?>
<?php echo Memberlite_Customize::sanitize_text_with_links( memberlite_get_entry_meta( $post, 'after' ) ); ?>
<?php endif; // End if 'post' == get_post_type() ?>
<?php edit_post_link( esc_html__( 'Edit', 'memberlite' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-footer -->
*/ ?>
</article><!-- #post-## -->
1 change: 1 addition & 0 deletions inc/customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ public static function register( $wp_customize ) {
'choices' => array(
'content' => __( 'Show Post Content', 'memberlite' ),
'excerpt' => __( 'Show Post Excerpts', 'memberlite' ),
'grid' => __( 'Show As Grid', 'memberlite' ),
),
'priority' => 40,
)
Expand Down
12 changes: 9 additions & 3 deletions inc/extras.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,13 @@ function memberlite_body_classes( $classes ) {
global $memberlite_defaults;

// sidebar classes
if ( ! is_page_template( 'templates/fluid-width.php' ) ) {
if ( ! is_page_template( 'templates/fluid-width.php' ) && ! memberlite_is_blog() ) {
$classes[] = get_theme_mod( 'sidebar_location', $memberlite_defaults['sidebar_location'] );
}
$classes[] = get_theme_mod( 'sidebar_location_blog', $memberlite_defaults['sidebar_location_blog'] );
if ( memberlite_is_blog() ) {
$classes[] = get_theme_mod( 'sidebar_location_blog', $memberlite_defaults['sidebar_location_blog'] );
$classes[] = 'content-archives-' . get_theme_mod( 'content_archives', $memberlite_defaults['content_archives'] );
}
if ( is_page_template( 'templates/sidebar-content.php' ) ) {
$classes[] = 'sidebar-content';
}
Expand Down Expand Up @@ -112,7 +115,10 @@ function memberlite_sidebar_location_none_columns_ratio( $r, $location ) {
}
} elseif ( memberlite_is_blog() || is_search() ) {
$sidebar_location = get_theme_mod( 'sidebar_location_blog', $memberlite_defaults['sidebar_location_blog'] );
if ( $sidebar_location === 'sidebar-blog-none' ) {
$content_archives = get_theme_mod( 'content_archives', $memberlite_defaults['content_archives'] );
if ( $content_archives === 'grid' && ! is_singular() ) {
$r = '12';
} elseif ( $sidebar_location === 'sidebar-blog-none' ) {
$r = '8 medium-offset-2';
}
}
Expand Down
23 changes: 22 additions & 1 deletion index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,33 @@
<main id="main" class="site-main" role="main">
<?php do_action( 'memberlite_before_loop' ); ?>
<?php if ( have_posts() ) : ?>
<?php
/**
* Wrap posts output in the .grid-list class based on settings.
*/
$content_archives = get_theme_mod( 'content_archives', $memberlite_defaults['content_archives'] );
if ( $content_archives === 'grid' ) { ?>
<div class="grid-list">
<?php }
?>
<?php global $more; ?>
<?php
while ( have_posts() ) :
the_post(); ?>
<?php get_template_part( 'components/post/content', get_post_format() ); ?>
<?php
/**
* Load the grid-style content part based on settings.
*/
if ( $content_archives === 'grid' ) {
get_template_part( 'components/post/content', 'grid' );
} else {
get_template_part( 'components/post/content', get_post_format() );
}
?>
<?php endwhile; ?>
<?php if ( $content_archives === 'grid' ) { ?>
</div> <!-- end .grid-list -->
<?php } ?>
<?php memberlite_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
Expand Down
121 changes: 110 additions & 11 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2127,10 +2127,10 @@ a:active {
.hentry .post_author_avatar img {
border-radius: 50%;
}
.hentry.format-audio h1.entry-title:before,
.hentry.format-image h1.entry-title:before,
.hentry.format-link h1.entry-title:before,
.hentry.format-video h1.entry-title:before,
.hentry.format-audio h1.entry-title a:before,
.hentry.format-image h1.entry-title a:before,
.hentry.format-link h1.entry-title a:before,
.hentry.format-video h1.entry-title a:before,
.single-format-audio .masthead-post-byline h1.entry-title:before,
.single-format-image .masthead-post-byline h1.entry-title:before,
.single-format-link .masthead-post-byline h1.entry-title:before,
Expand All @@ -2139,31 +2139,31 @@ a:active {
font-weight: 700;
padding-right: 10px;
}
.hentry.format-audio h1.entry-title:before,
.hentry.format-audio h1.entry-title a:before,
.single-format-audio .masthead-post-byline h1.entry-title:before {
content: "\f025";
}
.hentry.format-image h1.entry-title:before,
.hentry.format-image h1.entry-title a:before,
.single-format-image .masthead-post-byline h1.entry-title:before {
content: "\f1c5";
}
.hentry.format-link h1.entry-title:before,
.hentry.format-link h1.entry-title a:before,
.single-format-link .masthead-post-byline h1.entry-title:before {
content: "\f35d";
}
.hentry.format-video h1.entry-title:before,
.hentry.format-video h1.entry-title a:before,
.single-format-video .masthead-post-byline h1.entry-title:before {
content: "\f03d";
}
.hentry.pmpro-level-required h1.entry-title:before,
.hentry.pmpro-level-required h1.entry-title a:before,
.pmpro-body-level-required .masthead-post-byline h1.entry-title:before {
content: "\f023";
font-family: 'Font Awesome 5 Free';
font-weight: 700;
padding-right: 10px;
}
.pmpro-level-required.pmpro-has-access h1.entry-title:before,
.pmpro-body-level-required.pmpro-body-has-access h1.entry-title:before {
.pmpro-level-required.pmpro-has-access h1.entry-title:before,
.pmpro-body-level-required.pmpro-body-has-access h1.entry-title:before {
content: "";
font-family: 'Font Awesome 5 Free';
padding-right: 0;
Expand Down Expand Up @@ -2271,7 +2271,106 @@ a:active {
.entry-summary {

}
.grid-list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2.9rem;
-webkit-box-pack: justify;
justify-content: space-between;
margin-bottom: 2rem;
}
.grid-list article {
background: var(--memberlite-color-white);
border-radius: 7px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
margin: 0;
text-align: center;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
display: flex;
flex-direction: column;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
}
.grid-list article:hover {
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
}
.grid-list h1,
.grid-list h2 {
font-size: 2.1rem;
letter-spacing: -.2px;
line-height: 2.8rem;
margin: 0;
}
.grid-list h1 a,
.grid-list h2 a {
color: var(--memberlite-color-text);
display: block;
padding: 1.45rem;
text-decoration: none;
}
.grid-list h1 a:hover,
.grid-list h2 a:hover {
border-bottom: none;
color: var(--memberlite-color-primary);
}
.grid-list a > img {
display: block;
text-align: center;
width: auto;
}
.grid-list a > img.wp-post-image {
margin-bottom: 0;
}
.content-archives-grid .grid-list img {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.grid-list a:hover,
.grid-list a:focus,
.grid-list a:active {
filter: unset;
}
.grid-list .button-link-list {
font-size: 1.4rem;
line-height: 1.4rem;
margin-bottom: 1.45rem;
padding: 0 1.45rem;
}

@media only screen and (min-width: 1160px) {
.grid-list {
flex-direction: row;
}
.grid-list article {
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(25% - 2.9rem);
}
.content-archives-grid .grid-list article {
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(33.3% - 4.35rem);
}
}
@media only screen and (min-width: 768px) and (max-width: 1160px) {
.grid-list {
flex-direction: row;
}
.grid-list article {
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(50% - 1.45rem);
}
}
/*--------------------------------------------------------------
10.5 Asides
--------------------------------------------------------------*/
Expand Down

0 comments on commit 94d2578

Please sign in to comment.