Merge pull request #48 from ascribe/feature/blogcleanup

New goodies for the blog
This commit is contained in:
Matthias Kretschmann 2016-03-21 16:38:28 +01:00
commit 883aa5bd3a
22 changed files with 470 additions and 193 deletions

View File

@ -19,6 +19,7 @@
@import 'ascribe/_helpers.less';
@import 'ascribe/_buttons.less';
@import 'ascribe/_media.less';
@import 'ascribe/_forms.less';
@import 'ascribe/_grid.less';
@import 'ascribe/_footer.less';
@ -32,6 +33,7 @@
@import 'ascribe/_blog.less';
@import 'ascribe/_testimonials.less';
@import 'ascribe/_faq.less';
@import 'ascribe/_share.less';
@import '_page-api.less';
@ -412,63 +414,22 @@
&:extend(.list-unstyled all);
}
}
.contact {
label {
&:extend(.small);
&.required {
&:after {
content: '*';
color: @pink;
}
}
}
input, textarea {
margin-bottom: 20px;
padding: 10px;
color: @greyText;
width: 80%;
margin-top: 5px;
border: 1px solid @greyHr;
outline: none;
&[aria-invalid=true] {
border: 1px solid @pink;
}
}
input[type=submit] {
&:extend(.button, .button.blue);
width: auto;
}
.contact-point {
h1 {
&:extend(.fontRegular);
font-size: 19px;
color: @pink;
text-align: left;
margin-bottom:0;
}
}
.required-info {
.copyTextSmall;
//
// Contact
//
.contact-point {
h1 {
&:extend(.fontRegular);
font-size: 19px;
color: @pink;
}
.wpcf7-not-valid-tip {
.copyTextSmall;
color: @pink;
margin-top: -20px;
margin-bottom: 10px;
}
div.wpcf7-validation-errors {
border: none;
padding:0;
margin:0;
}
div.wpcf7-response-output, div.wpcf7-display-none, div.wpcf7-mail-sent-ok {
border: 0!important;
text-align: left;
margin-bottom:0;
}
}
.press-articles {
text-align: center;

View File

@ -1,4 +1,11 @@
.blog-column {
margin-bottom: -80px;
background: #fff;
position: relative;
z-index: 5;
}
.hentry {
&:extend(.subtemplate);
border-bottom: 2px solid @blueLight;
@ -10,7 +17,7 @@
margin-top: 0;
}
.entry-image {
.entry-teaser {
width: 100%;
img {
@ -19,6 +26,11 @@
}
}
.entry-lead {
&:extend(.large);
margin-bottom: @spacer;
}
.entry-content {
}
@ -39,6 +51,7 @@
border-radius: 50%;
vertical-align: middle;
display: inline-block;
margin: 0;
margin-right: (@spacer / 4);
border: 1px solid #CFEEF3;
}
@ -48,6 +61,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;
@ -64,6 +101,84 @@
}
//
// Related Posts
//
.yarpp-related { margin: 0 !important; }
.related {
padding-top: (@spacer / 2);
.featured__title {
&:extend(.bold);
font-size: @font-size-h6;
}
a { display: block; }
.grid { margin-bottom: 0; }
}
.related__title {
&:extend(.h3, .text-center);
margin-bottom: 0;
padding-bottom: @spacer;
}
//
// Art Radar MailChimp Signup
//
#mc-embedded-subscribe-form,
#subForm {
position: relative;
.button,
button {
&:extend(.button.small all);
font-size: @font-size-base;
height: 46px;
border: 1px solid @greyHr;
}
// try to deal with the existing messy markup
#mce-EMAI,
#fieldEmail {
margin-bottom: 0;
}
.button,
button {
&:extend(.button all, .button.blue);
width: 100%;
}
@media (@screen-sm) {
#mce-EMAIL,
#fieldEmail {
width: 60%;
}
.button,
button {
position: absolute;
top: 0;
right: 0;
width: 41%;
}
}
}
#subForm {
button {
margin-top: (@spacer/2);
@media (@screen-sm) {
top: 24px;
margin-top: 0;
}
}
}
//
// Pagination
//

View File

@ -0,0 +1,57 @@
label {
&:extend(.small);
&.required {
&:after {
content: '*';
color: @pink;
}
}
}
.form-control {
margin: 0 0 (@spacer / 2) 0;
padding: 10px;
color: @greyText;
width: 100%;
border: 1px solid @greyHr;
outline: none;
&[aria-invalid=true] {
border: 1px solid @pink;
}
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="range"],
input[type="search"],
textarea {
&:extend(.form-control all);
}
input[type=submit] {
&:extend(.button, .button.blue);
width: auto;
}
.required-info {
.copyTextSmall;
color: @pink;
}
.wpcf7-not-valid-tip {
.copyTextSmall;
color: @pink;
margin-top: -20px;
margin-bottom: 10px;
}
div.wpcf7-validation-errors {
border: none;
padding:0;
margin:0;
}
div.wpcf7-response-output, div.wpcf7-display-none, div.wpcf7-mail-sent-ok {
border: 0!important;
}

View File

@ -169,6 +169,32 @@
> .grid__col { flex: 0 0 82.5%; }
}
@media (@screen-xs) {
.grid-mini--fit {
> .grid__col { flex: 1; }
}
.grid-mini--full{
> .grid__col { flex: 0 0 100%; }
}
.grid-mini--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid-mini--2of6,
.grid-mini--third {
> .grid__col { flex: 0 0 33%; }
}
.grid-mini--3of6,
.grid-mini--half {
> .grid__col { flex: 0 0 50%; }
}
.grid-mini--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid-mini--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
}
@media (@screen-sm) {
.grid-small--fit {
> .grid__col { flex: 1; }

View File

@ -0,0 +1,37 @@
//
// Share area
//
.entry-share {
&:extend(.text-center);
margin: @spacer 0;
padding: (@spacer / 2);
border-top: 2px solid @blueLight;
border-bottom: 2px solid @blueLight;
background: @greyBg;
a {
text-decoration: none;
display: inline-block;
background: @greySocial;
border-radius: 5px;
margin: 0 (@spacer / 8);
&:hover,
&:focus {
background: fade(@greySocial, 40%);
#icon-twitter { fill: @brand-twitter; }
#icon-facebook { fill: @brand-facebook; }
#icon-linkedin { fill: @brand-linkedin; }
}
}
// icons
.icon {
width: 32px;
height: 32px;
transition: .2s ease-out;
fill: @white;
vertical-align: middle;
}
}

View File

@ -20,12 +20,17 @@
@blackish: #1e1e1e;
@black: #000;
// social networks
@brand-twitter: #00aced;
@brand-facebook: #3b5998;
@brand-linkedin: #007bb5;
//
// Typography
//
@font-size-base: 18px;
@font-size-small: 16px;
@font-size-small: 15px;
@font-size-mini: 13px;
@font-size-large: 24px;
@ -76,6 +81,7 @@
@screen-md-min: 900px;
@screen-lg-min: 1100px;
@screen-xs: ~'min-width: @{screen-xs-min}';
@screen-sm: ~'min-width: @{screen-sm-min}';
@screen-md: ~'min-width: @{screen-md-min}';
@screen-lg: ~'min-width: @{screen-lg-min}';

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -20,32 +20,37 @@ if (strlen($full_name) <= 0) {
$full_name = 'ascribe';
}
$url = get_the_permalink();
$avatar = get_avatar( get_the_author_meta('ID'), 96 );
$url = get_the_permalink();
$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>
<?php echo get_the_category_list(); ?>
<?php echo "<h1 class='entry-title'><a href='{$url}'>{$title}</a></h1>" ?>
<header class="entry-header">
<?php
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() ) { // 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');
if ( is_singular() ) {
echo "<img src='{$thumb[0]}' alt='{$title} image'>";
<?php if ( has_post_thumbnail() ) { ?>
<div class="entry-teaser">
<?php if ( is_singular() ) {
echo $teaser;
} 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,11 +61,19 @@ $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();
}
?>
</main>
<?php if ( is_singular() ) {
get_template_part( 'partials/share' );
if( function_exists('related_posts') )
related_posts();
} ?>
</article>

View File

@ -405,7 +405,7 @@ class Subtemplate {
$result = "<section class='subtemplate row subtemplate--featured'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='grid grid--gutters grid--half grid-small--fit'>
<div class='grid grid--gutters grid--full grid-mini--half grid-small--fit'>
{$blogFeatures}
</div>
<p class='subtemplate--featured--more'><a class='button small white-blue' href='{$blogUrl}'>Go to Blog</a></p>

View File

@ -3,12 +3,6 @@
/**
* ascribe functions and definitions
*
* When using a child theme (see http://codex.wordpress.org/Theme_Development and
* http://codex.wordpress.org/Child_Themes), you can override certain functions
* (those wrapped in a function_exists() call) by defining them first in your child theme's
* functions.php file. The child theme's functions.php file is included before the parent
* theme's file, so the child theme functions would be used.
*
* @package ascribe
* @since 0.1.0
*/
@ -21,29 +15,17 @@ define( 'WPTHEME_VERSION', '0.1.0' );
define( 'WPTHEME_URL', get_stylesheet_directory_uri() );
define( 'WPTHEME_TEMPLATE_URL', get_template_directory_uri() );
define( 'WPTHEME_PATH', get_template_directory() . '/' );
define( 'WPTHEME_INC', WPTHEME_PATH . 'includes/' );
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';
require_once WPTHEME_INC . 'cpt-event.php';
require_once WPTHEME_INC . 'cpt-testimonial.php';
// Run the setup functions
TenUp\ascribe\Core\setup();
// REMOVE WIDTH AND HEIGHT ATTRIBUTES ON THUMBNAILS
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
//remove emoji script
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
@ -64,13 +46,6 @@ if( function_exists('acf_add_options_page') ) {
));
}
//add excerpt to page
function wpcodex_add_excerpt_support_for_pages() {
add_post_type_support( 'page', 'excerpt' );
}
add_action( 'init', 'wpcodex_add_excerpt_support_for_pages' );
//Register Navigation
function register_primary_nav_menu() {
register_nav_menu('landing-menu',__( 'Product Tour Navigation Menu' ));
@ -79,28 +54,6 @@ function register_primary_nav_menu() {
}
add_action( 'init', 'register_primary_nav_menu');
// ADD THUMBNAILS TO POSTS
add_theme_support( 'post-thumbnails' );
// ENABLE HR IN WSYWIG
function enable_more_buttons($buttons) {
$buttons[] = 'hr';
return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");
// THUMBNAIL ADD CUSTOM SIZE
add_action( 'after_setup_theme', 'ttl_image_setup' );
function ttl_image_setup() {
add_image_size( 'blog-crop', 600, 350, true ); //(cropped)
add_image_size( 'blog-feature-crop', 300, 175, true ); //(cropped)
}
// ADD QUERY VAR FOR EVENT PAGINATION
add_filter('query_vars', 'add_my_var');
function add_my_var($public_query_vars) {

41
functions/blog.php Normal file
View File

@ -0,0 +1,41 @@
<?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
*
*/
function ascribe_move_excerpt_meta_box( $post ) {
if ( in_array( $post->post_type, array( 'post' ) ) ) {
remove_meta_box( 'postexcerpt', $post->post_type, 'normal' );
echo "<h2 style='padding: 10px 0 0;'>Excerpt</h2>";
post_excerpt_meta_box( $post );
echo "<style>
#excerpt { min-height: 90px }
#excerpt + p { display: none }
</style>";
}
}
add_action( 'edit_form_after_title', 'ascribe_move_excerpt_meta_box' );
?>

58
functions/core.php Normal file
View File

@ -0,0 +1,58 @@
<?php
/*
*
* Theme setup
*
*/
function ascribe_setup() {
add_theme_support('post-thumbnails');
add_theme_support('html5', ['caption']);
// 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', 400, 230, true ); //(cropped)
// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );
}
add_action('after_setup_theme', 'ascribe_setup');
/*
*
* Theme Assets
*
*/
function ascribe_assets() {
// Styles
wp_enqueue_style(
'wptheme',
WPTHEME_URL . "/assets/dist/css/ascribe.min.css",
array(),
WPTHEME_VERSION
);
// Scripts
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', false, '2.2.0', true);
wp_enqueue_script('jquery');
}
wp_enqueue_script(
'wptheme',
WPTHEME_TEMPLATE_URL . "/assets/dist/js/ascribe.min.js",
array('jquery'),
WPTHEME_VERSION,
true
);
}
add_action( 'wp_enqueue_scripts', 'ascribe_assets' );
?>

View File

@ -1,67 +0,0 @@
<?php
namespace TenUp\ascribe\Core;
/**
* Set up theme defaults and register supported WordPress features.
*
* @since 0.1.0
*
* @uses add_action()
*
* @return void.
*/
function setup() {
$n = function( $function ) {
return __NAMESPACE__ . "\\$function";
};
add_action( 'wp_enqueue_scripts', $n( 'scripts' ) );
add_action( 'wp_enqueue_scripts', $n( 'styles' ) );
}
/**
* Enqueue scripts for front-end.
*
* @uses wp_enqueue_script() to load front end scripts.
*
* @since 0.1.0
*
* @return void.
*/
function scripts( $debug = false ) {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', false, '2.2.0', true);
wp_enqueue_script('jquery');
}
wp_enqueue_script(
'wptheme',
WPTHEME_TEMPLATE_URL . "/assets/dist/js/ascribe.min.js",
array('jquery'),
WPTHEME_VERSION,
true
);
}
/**
* Enqueue styles for front-end.
*
* @uses wp_enqueue_style() to load front end styles.
*
* @since 0.1.0
*
* @return void.
*/
function styles( $debug = false ) {
$min = ( $debug || defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
wp_enqueue_style(
'wptheme',
WPTHEME_URL . "/assets/dist/css/ascribe{$min}.css",
array(),
WPTHEME_VERSION
);
}

37
partials/share.php Normal file
View File

@ -0,0 +1,37 @@
<aside class="entry-share">
<?php
$title = urlencode(get_the_title());
$url = urlencode(get_the_permalink());
$twitter = get_field('twitter_url', 'option');
?>
<a class="js-tracking-twitter-share" href="https://twitter.com/intent/tweet?text=<?php echo $title ?>&amp;url=<?php echo $url ?>&amp;via=ascribeio" title="Share on Twitter" rel="external nofollow" target="_blank">
<svg version="1.1" class="icon" id="icon-twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-109 111 36 36">
<path d="M-85.3,123.2c-0.6-0.7-1.5-1.1-2.5-1.1c-1.9,0-3.5,1.6-3.5,3.5c0,0.3,0,0.5,0.1,0.8
c-2.9-0.1-5.5-1.5-7.2-3.6c-0.3,0.5-0.5,1.1-0.5,1.8c0,1.2,0.6,2.3,1.6,2.9c-0.6,0-1.1-0.2-1.6-0.4l0,0c0,1.7,1.2,3.1,2.8,3.4
c-0.3,0.1-0.6,0.1-0.9,0.1c-0.2,0-0.4,0-0.7-0.1c0.4,1.4,1.7,2.4,3.3,2.4c-1.2,0.9-2.7,1.5-4.3,1.5c-0.3,0-0.6,0-0.8,0
c1.5,1,3.4,1.6,5.4,1.6c6.4,0,9.9-5.3,9.9-9.9c0-0.2,0-0.3,0-0.5c0.7-0.5,1.3-1.1,1.7-1.8c-0.6,0.3-1.3,0.5-2,0.6
c0.7-0.4,1.3-1.1,1.5-1.9C-83.8,122.7-84.5,123-85.3,123.2z"/>
</svg>
</a>
<a class="js-tracking-facebook-share" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo $url ?>&amp;p[title]=<?php echo $title ?>" rel="external nofollow" target="_blank">
<svg version="1.1" class="icon" id="icon-facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-109 111 36 36">
<path d="M-87.6,122.6h1.5v-3c-0.3,0-1.1-0.1-2.3-0.1c-2.5,0-4.6,1.7-4.6,4.6v2.4h-3v3.1h2.9v8.9h4v-8.9h2.7
l0.4-3.1h-3.2v-2.1C-89.1,123.4-89,122.6-87.6,122.6z"/>
</svg>
</a>
<a class="js-tracking-linkedin-share" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=<?php echo $url ?>" rel="external nofollow">
<svg version="1.1" class="icon" id="icon-linkedin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-109 111 36 36">
<g>
<rect x="-100" y="125.4" class="st1" width="3.9" height="12.5"/>
<path d="M-98,120c-1.3,0-2.1,0.8-2.1,1.9c0,1,0.8,1.9,2,1.9c1.3,0,2.1-0.8,2.1-1.9C-96,120.8-96.8,120-98,120z"/>
<path d="M-86.3,125.2c-2.1,0-3.4,1.2-3.9,2h-0.1l-0.2-1.7H-94c0.1,1.1,0.1,2.4,0.1,4v8.5h3.9v-7.2c0-0.4,0-0.7,0.1-1
c0.3-0.8,0.9-1.5,2-1.5c1.4,0,2,1.1,2,2.7v6.9h3.9h0.1v-7.3C-81.8,126.9-83.8,125.2-86.3,125.2z"/>
</g>
</svg>
</a>
</aside>

View File

@ -11,8 +11,19 @@ require 'controller/init.php';
?>
<header class="header">
<div class="row">
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png" class="logo phone-and-up"></a>
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
<a href="<?php echo get_bloginfo('wpurl');?>">
<img
src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png"
srcset="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png 1x, <?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white@2x.png 2x"
alt="ascribe logo"
class="logo phone-and-up">
</a>
<a href="<?php echo get_bloginfo('wpurl');?>">
<img
src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg"
alt="ascribe logo"
class="logo phone-only">
</a>
<div class="app-links">
<a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
<img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
@ -42,6 +53,8 @@ require 'controller/init.php';
$args = array(
'hide_empty' => 0
);
echo "<li><a href='{$blogUrl}'>All</a></li>";
foreach((get_categories($args)) as $category) {
if ($category->cat_name != 'Uncategorized') {
echo '<li><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '><span>' . $category->name.'</span></a></li> ';

View File

@ -0,0 +1,27 @@
<?php
/*
YARPP Template: ascribe Blog
*/
if ( have_posts() ): ?>
<section class="related">
<h1 class="related__title">Related</h1>
<div class="grid grid--gutters grid--full grid-mini--half grid-small--third">
<?php while ( have_posts()) : the_post(); ?>
<?php if (has_post_thumbnail()):?>
<div class="grid__col">
<a href="<?php the_permalink() ?>">
<article class="featured">
<?php the_post_thumbnail('blog-feature-crop'); ?>
<h1 class="featured__title"><?php the_title() ?></h1>
</article>
</a>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div>
</section>
<?php endif; ?>