first set of new blog features

- update & properly name all custom image sizes
- new full column image size, expose it to editor too
- use custom post excerpt as lead paragraph when set
- move excerpt after title in WP editor
- embedded media styles

assets/_src/less/ascribe/_blog.less

@@ -10,7 +10,7 @@
     margin-top: 0;
 }
 
-.entry-image {
+.entry-teaser {
     width: 100%;
 
     img {
@@ -19,6 +19,11 @@
     }
 }
 
+.entry-lead {
+    &:extend(.large);
+    margin-bottom: @spacer;
+}
+
 .entry-content {
 
 }
@@ -48,6 +53,30 @@
 //
 // WP Media
 //
+.wp-caption,
+.alignnone,
+.alignleft,
+.alignright {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    margin-bottom: (@spacer/2);
+}
+
+.alignright {
+    @media (@screen-sm) {
+        float: right;
+        margin: 5px 0 (@spacer/2) (@spacer/2);
+    }
+}
+
+.alignleft {
+    @media (@screen-sm) {
+        float: left;
+        margin: 5px (@spacer/2) (@spacer/4) 0;
+    }
+}
+
 .wp-caption-text {
     &:extend(.small);
     color: @greyHr;

assets/_src/less/ascribe/_variables.less

@@ -25,7 +25,7 @@
 // Typography
 //
 @font-size-base:      18px;
-@font-size-small:     16px;
+@font-size-small:     15px;
 @font-size-mini:      13px;
 @font-size-large:     24px;
 

content-blog.php

@@ -20,32 +20,37 @@ if (strlen($full_name) <= 0) {
     $full_name = 'ascribe';
 }
 
-$url    = get_the_permalink();
+$url     = get_the_permalink();
-$avatar = get_avatar( get_the_author_meta('ID'), 96 );
+$avatar  = get_avatar( get_the_author_meta('ID'), 96 );
+$excerpt = get_the_excerpt();
+$teaser  = get_the_post_thumbnail($post->ID, 'blog-teaser');
 
 ?>
 
 <article <?php post_class( '', $post->ID ); ?>>
 
-    <header>
+    <header class="entry-header">
-        <?php echo get_the_category_list(); ?>
+        <?php
-        <?php echo "<h1 class='entry-title'><a href='{$url}'>{$title}</a></h1>"  ?>
+            echo get_the_category_list();
+            echo "<h1 class='entry-title'><a href='{$url}'>{$title}</a></h1>";
+
+            // Show custom post excerpt when set
+            if ( is_singular() && has_excerpt() ) {
+                echo "<div class='entry-lead'>{$excerpt}</div>";
+            }
+        ?>
     </header>
 
-    <div class="entry-image">
+    <?php if ( has_post_thumbnail() ) { ?>
-        <?php
+        <div class="entry-teaser">
-        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
+            <?php if ( is_singular() ) {
-
+                echo $teaser;
-            $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'blog-crop');
-
-            if ( is_singular() ) {
-                echo "<img src='{$thumb[0]}' alt='{$title} image'>";
             } else {
-                echo "<a href='{$url}'><img src='{$thumb[0]}' alt='{$title} image'></a>";
+                echo "<a href='{$url}'>{$teaser}</a>";
             }
-        }
+            ?>
-        ?>
+        </div>
-    </div>
+    <?php } ?>
 
     <div class="entry-meta">
         <?php echo $avatar; ?>
@@ -56,7 +61,7 @@ $avatar = get_avatar( get_the_author_meta('ID'), 96 );
     <main class="entry-content">
         <?php
         if ( ! is_singular() ) {
-            the_excerpt();
+            echo "<p>{$excerpt}</p>";
             echo "<a class='button small' href='{$url}'>Read More</a>";
         } else {
             the_content();

functions.php

@@ -19,6 +19,7 @@ define( 'WPTHEME_INC',          WPTHEME_PATH . 'functions/' );
 
 // Include compartmentalized functions
 require_once WPTHEME_INC . 'core.php';
+require_once WPTHEME_INC . 'blog.php';
 require_once WPTHEME_INC . 'cpt-team.php';
 require_once WPTHEME_INC . 'cpt-career.php';
 require_once WPTHEME_INC . 'cpt-presscoverage.php';

functions/blog.php

@@ -0,0 +1,33 @@
+<?php
+/*
+ *
+ * All the blog related custom functions
+ *
+ */
+
+/*
+ *
+ * Add some custom image sizes to editor
+ *
+ */
+function ascribe_blog_image_sizes( $sizes ) {
+    return array_merge( $sizes, array(
+        'blog-full-column' => __( 'Blog Full Column' ),
+    ) );
+}
+add_filter('image_size_names_choose', 'ascribe_blog_image_sizes');
+
+
+/*
+ *
+ * Put excerpt meta-box before editor
+ *
+ */
+add_action(
+    'admin_menu', function () {
+        remove_meta_box('postexcerpt', 'post', 'normal');
+    }, 999
+);
+add_action('edit_form_after_title', 'post_excerpt_meta_box');
+
+?>

functions/core.php

@@ -9,7 +9,12 @@ function ascribe_setup() {
     add_theme_support('post-thumbnails');
     add_theme_support('html5', ['caption']);
 
-    add_image_size( 'blog-crop', 600, 350, true ); //(cropped)
+    // Full column content images for blog, 720px wide, auto height
+    add_image_size( 'blog-full-column', 720 );
+
+    // Blog teaser images, cropped to 720px x 420px
+    add_image_size( 'blog-teaser', 720, 420, true );
+
     add_image_size( 'blog-feature-crop', 300, 175, true ); //(cropped)
 
     // Add default posts and comments RSS feed links to head.