Merge pull request #46 from ascribe/feature/blog

Featured/Latest Blog Posts

assets/_src/less/ascribe/_blog.less

@@ -32,6 +32,26 @@
     margin-bottom: 35px;
     font-weight: 500;
     font-size: 16px;
+
+    .avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        vertical-align: middle;
+        display: inline-block;
+        margin-right: (@spacer / 4);
+        border: 1px solid #CFEEF3;
+    }
+}
+
+
+//
+// WP Media
+//
+.wp-caption-text {
+    &:extend(.small);
+    color: @greyHr;
+    font-style: italic;
 }
 
 
@@ -111,3 +131,59 @@
         }
     }
 }
+
+
+//
+// Featured Blog Posts
+//
+.subtemplate--featured {
+    @media (@screen-sm) {
+        .grid__col { flex: 33%; }
+    }
+
+    .grid__col > a { display: block; }
+}
+
+.subtemplate--featured--more {
+    &:extend(.text-center);
+    margin-bottom: 0;
+}
+
+.featured {
+    position: relative;
+    transition: .2s ease-out;
+
+    a:hover &,
+    a:focus & {
+        transform: scale(1.01);
+        box-shadow: 0 4px 8px fade(#000, 20%);
+    }
+
+    a:active & {
+        top: 1px;
+        transform: none;
+        transition: none;
+        box-shadow: none;
+    }
+}
+
+.featured__title {
+    &:extend(.h4);
+    margin: 0;
+    font-size: @font-size-base;
+    color: #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background: fade(@blueDeep, 70%);
+    padding: (@spacer / 4);
+    transition: .2s ease-out;
+
+    a:hover &,
+    a:focus & { color: @link-color; }
+}
+
+.featured__image {
+    max-height: 175px;
+    display: block;
+}

content-blog.php

@@ -21,10 +21,11 @@ if (strlen($full_name) <= 0) {
 }
 
 $url    = get_the_permalink();
+$avatar = get_avatar( get_the_author_meta('ID'), 96 );
 
 ?>
 
-<article <?php post_class( '', $post_id ); ?>>
+<article <?php post_class( '', $post->ID ); ?>>
 
     <header>
         <?php echo get_the_category_list(); ?>
@@ -36,14 +37,18 @@ $url = get_the_permalink();
         if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
 
             $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'blog-crop');
-            echo "<img src='{$thumb[0]}' alt='{$title} image'>";
 
+            if ( is_singular() ) {
+                echo "<img src='{$thumb[0]}' alt='{$title} image'>";
+            } else {
+                echo "<a href='{$url}'><img src='{$thumb[0]}' alt='{$title} image'></a>";
+            }
         }
         ?>
     </div>
 
     <div class="entry-meta">
-        <?php echo get_avatar( get_the_author_email(), 'size here' ); ?>
+        <?php echo $avatar; ?>
         <span class="author">by <?php echo $full_name; ?></span>
         on <date><?php the_time( get_option( 'date_format' ) ); ?></date>
     </div>

controller/classes/Subtemplate.php

@@ -349,58 +349,75 @@ class Subtemplate {
 
         return $result;
     }
-    public function blogFeatures($page = "home") {
+
+
+    //
+    // Subtemplate: Featured Blog Posts
+    //
+    public function blogFeatures() {
+
         $blogFeatures     = '';
         $subtemplateTitle = get_sub_field('section_title');
-        if (have_rows('blog_features','option')) {
+        $blogPage         = get_page_by_title('Blog');
-            while (have_rows('blog_features','option')) {
+        $blogUrl          = get_permalink($blogPage->ID);
-                the_row();
 
-                $title          = get_sub_field('feature_title');
+        if (have_rows('blog_features', 'option')) {
+            while (have_rows('blog_features', 'option')) {
+                the_row();
                 $feature   = get_sub_field('post');
                 $postTitle = $feature->post_title;
                 $url       = get_permalink($feature->ID);
                 $content   = substr($feature->post_content, 0, 144) . '...';
-                $date           = date('F Y',$feature->post_date);
+                $date      = date('F Y', strtotime($feature->post_date));
                 $image     = wp_get_attachment_image_src(get_post_thumbnail_id($feature->ID),'blog-feature-crop')[0];
 
-                if ($page == "home") {
+                $blogFeatures .= "<div class='grid__col'>
-                    $blogFeatures .= "<a href='{$url}'><article class='blog'><div>
+                                    <a href='{$url}'>
-                                    <img src='{$image}' alt='{$postTitle} Image'>
+                                        <article class='featured'>
-                                    <h2>{$title}</h2>
+                                            <img class='featured__image' src='{$image}' alt='{$postTitle} Image'>
-                                    <h1>{$postTitle}</h1></div>
+                                            <h1 class='featured__title'>{$postTitle}</h1>
-                                </article></a>";
+                                        </article>
+                                    </a>
+                                </div>";
 
             }
-                else {
+        } else {
-                    $blogFeatures .= "<a href='{$url}'><article class='blog'>
-                                    <h1>{$postTitle}</h1>
-                                    <time>{$date}</time>
-                                    <div>{$content}</div>
-                                </article></a>";
 
-                }
+            $latestPosts = wp_get_recent_posts(array( 'numberposts' => '3', 'post_status' => 'publish', ));
+
+            foreach( $latestPosts as $latest ) {
+                $postTitle = $latest['post_title'];
+                $url       = get_permalink($latest['ID']);
+                $content   = substr($latest['post_content'], 0, 144) . '...';
+                $date      = date('F Y', strtotime($latest['post_date']));
+                $image     = wp_get_attachment_image_src(get_post_thumbnail_id($latest['ID']),'blog-feature-crop')[0];
+
+                $blogFeatures .= "<div class='grid__col'>
+                                    <a href='{$url}'>
+                                        <article class='featured'>
+                                            <img class='featured__image' src='{$image}' alt='{$postTitle} Image'>
+                                            <h1 class='featured__title'>{$postTitle}</h1>
+                                        </article>
+                                    </a>
+                                </div>";
             }
         }
 
-        if ($page == "home") {
+        $result = "<section class='subtemplate row subtemplate--featured'>
-            $result = "<section class='subtemplate blog-features'>
-                        <div class='row'>
                         <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
-                            <div class='column-container'>
+                        <div class='grid grid--gutters grid--half grid-small--fit'>
                             {$blogFeatures}
                         </div>
-                        </div>
+                        <p class='subtemplate--featured--more'><a class='button small white-blue' href='{$blogUrl}'>Go to Blog</a></p>
                 </section>";
-        }
-        else {
-            $result = "<section class='sidebar-blog-features'>
-                        {$blogFeatures}
-                        </section>";
-        }
 
         return $result;
     }
+
+
+    //
+    // Subtemplate: Team
+    //
     public function team($subtemplateTitle) {
         $content        = get_sub_field('content');
         $meetTeamLink   = get_sub_field('meet_the_team_link');

sidebar-blog.php

@@ -1,20 +0,0 @@
-<?php
-/**
- * Created by PhpStorm.
- * User: sarahetter
- * Date: 15-09-25
- * Time: 1:10 PM
- */
-$controller = new Subtemplate();
-$banner = get_field('banner_for_blog_sidebar','option');
-
-$image = '';
-if ($banner) {
-    $image = "<img src='{$banner['url']}' alt='{$banner['alt']}'>";
-}
-?>
-
-<aside class="blog-sidebar">
-    <?php echo $image; ?>
-    <?php  echo $controller->blogFeatures("sidebar"); ?>
-</aside>

template-blogheader.php

@@ -27,7 +27,13 @@ require 'controller/init.php';
         </div>
     </div>
     <div class="chevron-divider"></div>
-    <h1><a href="/blog">ascribe blog</a></h1>
+
+    <?php
+        $blogPage       = get_page_by_title('Blog');
+        $blogUrl        = get_permalink($blogPage->ID);
+    ?>
+
+    <h1><a href="<?php echo $blogUrl; ?>">ascribe blog</a></h1>
 </header>
 <nav class="blog-categories">
     <div class="row">