Merge pull request #80 from CodetheChangeFoundation/CH-75

CH-75: Blog page and fixes to projects carousel
CodetheChangeFoundation · Jun 11, 2019 · e394977 · e394977
2 parents 415610a + 233dc09
commit e394977
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 28 deletions.
diff --git a/assets/css/bootstrap/bootstrap.css b/assets/css/bootstrap/bootstrap.css
@@ -4613,7 +4613,7 @@ input[type="button"].btn-block {
   list-style: none;
 }
 
-.page-link {
+.page-numbers {
   position: relative;
   display: block;
   padding: 0.5rem 0.75rem;
@@ -4624,50 +4624,50 @@ input[type="button"].btn-block {
   border: 3px solid #dfdfdf;
 }
 
-.page-link:hover {
+.page-numbers:hover {
   z-index: 2;
   color: #5d9a22;
   text-decoration: none;
   background-color: #dfdfdf;
   border-color: #dfdfdf;
 }
 
-.page-link:focus {
+.page-numbers:focus {
   z-index: 2;
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(131, 211, 53, 0.25);
 }
 
-.page-link:not(:disabled):not(.disabled) {
+.page-numbers:not(:disabled):not(.disabled) {
   cursor: pointer;
 }
 
-.page-item:first-child .page-link {
+.page-item:first-child .page-numbers {
   margin-left: 0;
 }
 
-.page-item.active .page-link {
+.page-item.active .page-numbers {
   z-index: 1;
   color: #fff;
   background-color: #83D335;
   border-color: #83D335;
 }
 
-.page-item.disabled .page-link {
+.page-item.disabled .page-numbers {
   color: #0F1A06;
   pointer-events: none;
   cursor: auto;
   background-color: #fff;
   border-color: #dfdfdf;
 }
 
-.pagination-lg .page-link {
+.pagination-lg .page-numbers {
   padding: 0.75rem 1.5rem;
   font-size: 1.25rem;
   line-height: 1.5;
 }
 
-.pagination-sm .page-link {
+.pagination-sm .page-numbers {
   padding: 0.25rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.5;

diff --git a/assets/css/climatehub.css b/assets/css/climatehub.css
@@ -293,6 +293,7 @@ body {
 }
 
 .item img {
+  height: 9.25rem;
   overflow: hidden;
   object-fit: cover;
   object-position: center center;
@@ -316,6 +317,17 @@ body {
 }
 
 /* Blog page */
+.blog-card-content {
+  max-height: 8.25rem;
+  overflow: hidden;
+  border: solid 1.5rem white;
+}
+
+.blog-card-img {
+  height: 9.25rem;
+  width: auto;
+}
+
 .blog-gutter-image {
   max-height: 200px;
 }

diff --git a/front-page.php b/front-page.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Climate Hub Front Page
+ *
+ * @package climatehub
+ */
+?>
+
+<?php get_header(); ?>
+
+  <?php get_template_part( 'template-parts/home/home-page-banner' ); ?>
+  <?php get_template_part( 'template-parts/home/home-asset-map' ); ?>
+  <?php get_template_part( 'template-parts/home/content-right-side-img' ); ?>
+  <?php get_template_part( 'template-parts/home/updatebox-section' ); ?>
+
+<?php get_footer(); ?>
diff --git a/home.php b/home.php
@@ -0,0 +1,101 @@
+<?php
+/**
+ * Climate Hub Blog Page
+ *
+ * @package climatehub
+ */
+?>
+
+<?php get_header(); ?>
+
+<?php
+$id = get_option('page_for_posts');
+$title = get_field("enable_title", $id) && get_field("title", $id);
+$paragraph = get_field("enable_paragraph", $id) && get_field("paragraph", $id);
+if ($title || $paragraph): ?>
+
+  <div class="container">
+    <div class="row pt-5">
+      <div class="col-12">
+        <?php if($title): ?>
+          <h1 class="font-weight-bold pl-5"><?php the_field("title", $id); ?> </h1>
+        <?php endif; ?>
+      </div>
+      <div class="col-12 col-md-8 m-auto">
+        <?php if($paragraph): ?>
+          <?php the_field("paragraph", $id); ?>
+        <?php endif; ?>
+      </div>
+    </div>
+  </div>
+
+<?php endif; ?>
+
+<?php if (have_posts()): ?>
+  <div class="container mb-4">
+    <div class="row row">
+      <?php while (have_posts()): the_post(); ?>
+        <div class="col-12 col-md-6 col-lg-4 mt-4">
+          <a class="item d-flex bg-white justify-content-between text-body m-auto" target="<?php echo (get_field('post_behaviour') == 'link') ? get_field('post_link')['target'] : '_self'; ?>" href="<?php echo (get_field('post_behaviour') == 'link') ? get_field('post_link')['url'] : the_permalink() ?>">
+            <div class="blog-card-content">
+              <h4 class="font-weight-bold"><?php the_title() ?></h4>
+                <?php 
+                if (have_rows('post_content')):
+                  while (have_rows('post_content')): the_row();
+                    if (get_row_layout() == 'header'):
+                      echo '<p>' . strip_tags(get_sub_field('excerpt'), '<br><em><strong><b><i>') . '</p>';
+                    endif;
+                  endwhile;
+                endif; 
+                ?>
+            </div>
+            <?php if (get_the_post_thumbnail_url()): 
+              $image_id = get_post_thumbnail_id();
+              $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
+              ?>
+              <img class="blog-card-img" src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo $image_alt; ?>"/>
+            <?php endif; ?>
+          </a>
+        </div>
+      <?php endwhile; ?>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+        <nav aria-label="Blog page navigation">
+          <?php
+            global $wp_query;
+            $current = max( 1, absint( get_query_var( 'paged' ) ) );
+            $pagination = paginate_links( array(
+              'base' => str_replace( PHP_INT_MAX, '%#%', esc_url( get_pagenum_link( PHP_INT_MAX ) ) ),
+              'format' => '?paged=%#%',
+              'current' => $current,
+              'total' => $wp_query->max_num_pages,
+              'type' => 'array',
+              'prev_text' => '&laquo;',
+              'next_text' => '&raquo;',
+            ) ); ?>
+          <?php if ( ! empty( $pagination ) ) : ?>
+            <ul class="pagination justify-content-center mt-4 mb-0">
+              <?php if ( strpos(htmlspecialchars($pagination[0]), 'laquo') === false ) : ?>
+                <li class="page-item disabled">
+                  <span class="page-numbers">&laquo;</span>
+                </li>
+              <?php endif; ?>
+              <?php foreach ( $pagination as $key => $page_link ) : ?>
+                <li class="page-item<?php if ( strpos( $page_link, 'current' ) !== false ) { echo ' active'; } ?>"><?php echo $page_link ?></li>
+              <?php endforeach; ?>
+              <?php if ( strpos(htmlspecialchars(end($pagination)), 'raquo') === false ) : ?>
+                <li class="page-item disabled">
+                  <span class="page-numbers">&raquo;</span>
+                </li>
+              <?php endif; ?>
+            </ul>
+          <?php endif ?>
+        </nav>
+      </div>
+    </div>
+  </div>
+
+<?php endif; ?>
+<?php get_footer(); ?>
diff --git a/inc/theme-support.php b/inc/theme-support.php
@@ -112,4 +112,12 @@ function add_current_nav_class($classes, $item) {
 	}
 
 	return $classes;
-}
+}
+
+// Filter posts on blog page
+function my_blog_category( $query ) {
+	if ( $query->is_home() && $query->is_main_query() ) {
+		$query->set( 'cat', get_cat_ID('blog'));
+	}
+}
+add_action( 'pre_get_posts', 'my_blog_category' );
diff --git a/index.php b/index.php
@@ -10,28 +10,22 @@
   <!-- Global -->
   <div class="container">
     <?php get_template_part( 'template-parts/global/title' ); ?>
-    <?php get_template_part( 'template-parts/global/paragraph') ?>
+    <?php get_template_part( 'template-parts/global/paragraph'); ?>
   </div>
 
-  <!-- Home Page -->
-  <?php get_template_part('template-parts/home/home-page-banner') ?>
-  <?php get_template_part('template-parts/home/home-asset-map') ?>
-  <?php get_template_part('template-parts/home/content-right-side-img') ?>
-  <?php get_template_part('template-parts/home/updatebox-section') ?>
-
   <!-- About Page -->
-  <?php get_template_part( 'template-parts/about/highlightedSection' )?>
-  <?php get_template_part( 'template-parts/about/team-grid' )?>
-  <?php get_template_part( 'template-parts/about/board-of-directors-grid' )?>
+  <?php get_template_part( 'template-parts/about/highlightedSection' ); ?>
+  <?php get_template_part( 'template-parts/about/team-grid' ); ?>
+  <?php get_template_part( 'template-parts/about/board-of-directors-grid' ); ?>
 
   <!-- Partners Page -->
-  <?php get_template_part( 'template-parts/partners/partners-grid' )?>
+  <?php get_template_part( 'template-parts/partners/partners-grid' ); ?>
 
   <!-- Projects Page -->
-  <?php get_template_part('template-parts/projects/projects-carousel')?>
+  <?php get_template_part('template-parts/projects/projects-carousel'); ?>
 
   <!-- Contact Page -->
-  <?php get_template_part( 'template-parts/contact-us/contact-us' ) ?>
-  <?php get_template_part( 'template-parts/contact-us/contact-us-banner' )?>
+  <?php get_template_part( 'template-parts/contact-us/contact-us' ); ?>
+  <?php get_template_part( 'template-parts/contact-us/contact-us-banner' ); ?>
 
 <?php get_footer(); ?>
diff --git a/style.css b/style.css
@@ -4,6 +4,6 @@
   Author: Code the Change
   Author URI: http://codethechange.ca
   Description: Custom Wordpress theme for Climate Hub developed by Code the Change Foundation
-  Version: 0.8.1 404 Page
+  Version: 0.9 Blog Page
   License: MIT
 */
diff --git a/template-parts/projects/projects-carousel.php b/template-parts/projects/projects-carousel.php
@@ -9,12 +9,15 @@
 <?php function climatehub_create_card() {
   ob_start(); ?>
   <article id="post-<?php the_ID();?>" <?php post_class();?>>
-    <a class="item d-flex bg-white justify-content-between text-body" href="<?php if (get_field('post_behaviour') == 'link') {the_field('post_link');} else {the_permalink();} ?>">
+    <a class="item d-flex bg-white justify-content-between text-body" target="<?php echo (get_field('post_behaviour') == 'link') ? get_field('post_link')['target'] : '_self'; ?>" href="<?php echo (get_field('post_behaviour') == 'link') ? get_field('post_link')['url'] : the_permalink() ?>">
       <div class="p-4">
         <h4 class="mb-0 font-weight-bold fade-line-ending"><?php the_title() ?></h4>
       </div>
-      <?php if (get_the_post_thumbnail_url()): ?>
-        <img class="card-img-top" src="<?php echo get_the_post_thumbnail_url(); ?>" alt="Card image cap"/>
+      <?php if (get_the_post_thumbnail_url()): 
+        $image_id = get_post_thumbnail_id();
+        $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
+        ?>
+        <img class="card-img-top" src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo $image_alt; ?>"/>
       <?php endif; ?>
     </a>
   </article>