From f419a5ffca769445918f52313b3a1e027710a8dc Mon Sep 17 00:00:00 2001 From: olefredrik Date: Mon, 28 Dec 2015 00:26:30 +0100 Subject: [PATCH 1/7] Add support for responsive images --- assets/scss/global/_wp-overrides.scss | 7 +- functions.php | 5 +- library/cleanup.php | 150 -------------------------- library/responsive-images.php | 57 ++++++++++ library/theme-support.php | 9 ++ 5 files changed, 72 insertions(+), 156 deletions(-) create mode 100644 library/responsive-images.php diff --git a/assets/scss/global/_wp-overrides.scss b/assets/scss/global/_wp-overrides.scss index c2ba87fc1..9544a7c14 100755 --- a/assets/scss/global/_wp-overrides.scss +++ b/assets/scss/global/_wp-overrides.scss @@ -1,9 +1,6 @@ .wp-caption{ - padding:rem-calc(4); -} - -.wp-caption img{ - max-width:100%; + max-width: 100%; + margin: rem-calc(40) 0; } p.wp-caption-text{ diff --git a/functions.php b/functions.php index ba43b2e75..02e8b6a62 100755 --- a/functions.php +++ b/functions.php @@ -16,7 +16,7 @@ */ /** Various clean up functions */ -require_once( 'library/cleanup.php' ); +//require_once( 'library/cleanup.php' ); /** Required for Foundation to work properly */ require_once( 'library/foundation.php' ); @@ -45,6 +45,9 @@ /** Change WP's sticky post class */ require_once( 'library/sticky-posts.php' ); +/** Configure responsive image sizes */ +require_once( 'library/responsive-images.php' ); + /** If your site requires protocol relative url's for theme assets, uncomment the line below */ // require_once( 'library/protocol-relative-theme-assets.php' ); diff --git a/library/cleanup.php b/library/cleanup.php index f7d0354b1..8d87189dd 100755 --- a/library/cleanup.php +++ b/library/cleanup.php @@ -22,9 +22,6 @@ function foundationpress_start_cleanup() { // Clean up comment styles in the head. add_action( 'wp_head', 'foundationpress_remove_recent_comments_style', 1 ); - // Clean up gallery output in wp. - add_filter( 'foundationpress_gallery_style', 'foundationpress_gallery_style' ); - } add_action( 'after_setup_theme','foundationpress_start_cleanup' ); endif; @@ -101,153 +98,6 @@ function foundationpress_remove_recent_comments_style() { } endif; -// Remove injected CSS from gallery. -if ( ! function_exists( 'foundationpress_gallery_style' ) ) : -function foundationpress_gallery_style( $css ) { - return preg_replace( "!!s", '', $css ); -} -endif; - - -/* - Rebuild the image tag with only the stuff we want - Credit: Brian Gottie - Source: http://blog.skunkbad.com/wordpress/another-look-at-rebuilding-image-tags -*/ - -if ( ! class_exists( 'Foundationpress_img_rebuilder' ) ) : - class Foundationpress_img_rebuilder { - - public $caption_class = 'wp-caption'; - public $caption_p_class = 'wp-caption-text'; - public $caption_id_attr = false; - public $caption_padding = 8; // Double of the padding on $caption_class - - public function __construct() { - add_filter( 'img_caption_shortcode', array( $this, 'img_caption_shortcode' ), 1, 3 ); - add_filter( 'get_avatar', array( $this, 'recreate_img_tag' ) ); - add_filter( 'the_content', array( $this, 'the_content') ); - } - - public function recreate_img_tag( $tag ) { - // Supress SimpleXML errors - libxml_use_internal_errors( true ); - - try { - $x = new SimpleXMLElement( $tag ); - - // We only want to rebuild img tags - if ( $x->getName() == 'img' ) { - - // Get the attributes I'll use in the new tag - $alt = (string) $x->attributes()->alt; - $src = (string) $x->attributes()->src; - $classes = (string) $x->attributes()->class; - $class_segs = explode(' ', $classes); - - // All images have a source - $img = ''; - } else { - $img .= ' />'; - } - - return $img; - } - } - - catch ( Exception $e ) { - if ( defined('WP_DEBUG') && WP_DEBUG ) { - if ( defined('WP_DEBUG_DISPLAY') && WP_DEBUG_DISPLAY ) { - echo 'Caught exception: ', $e->getMessage(), "\n"; - } - } - } - - // Tag not an img, so just return it untouched - return $tag; - } - - /** - * Search post content for images to rebuild - */ - public function the_content( $html ) { - return preg_replace_callback( - '|(]*>)|', - array( $this, 'the_content_callback' ), - $html - ); - } - - /** - * Rebuild an image in post content - */ - private function the_content_callback( $match ) { - return $this->recreate_img_tag( $match[0] ); - } - - /** - * Customize caption shortcode - */ - public function img_caption_shortcode( $output, $attr, $content ) { - // Not for feed - if ( is_feed() ) { - return $output; - } - - // Set up shortcode atts - $attr = shortcode_atts( array( - 'align' => 'alignnone', - 'caption' => '', - 'width' => '', - ), $attr ); - - // Add id and classes to caption - $attributes = ''; - $caption_id_attr = ''; - - if ( $caption_id_attr && ! empty( $attr['id'] ) ) { - $attributes .= ' id="' . esc_attr( $attr['id'] ) . '"'; - } - - $attributes .= ' class="' . $this->caption_class . ' ' . esc_attr( $attr['align'] ) . '"'; - - // Set the max-width of the caption - $attributes .= ' style="max-width:' . ( $attr['width'] + $this->caption_padding ) . 'px;"'; - - // Create caption HTML - $output = ' - ' . - do_shortcode( $content ) . - '

' . $attr['caption'] . '

' . - ' - '; - - return $output; - } - } - - $foundationpress_img_rebuilder = new Foundationpress_img_rebuilder; - -endif; - // Add WooCommerce support for wrappers per http://docs.woothemes.com/document/third-party-custom-theme-compatibility/ remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); add_action('woocommerce_before_main_content', 'foundationpress_before_content', 10); diff --git a/library/responsive-images.php b/library/responsive-images.php new file mode 100644 index 000000000..05dcbf3bc --- /dev/null +++ b/library/responsive-images.php @@ -0,0 +1,57 @@ + __( 'FP Small' ), + 'fp-medium' => __( 'FP Medium' ), + 'fp-large' => __( 'FP Large' ), + 'fp-xlarge' => __( 'FP X-Large' ), + ) ); + } + +// Add custom image sizes attribute to enhance responsive image functionality for content images +function foundationpress_adjust_image_sizes_attr( $sizes, $size ) { + $sizes = ' + (max-width: 640px) 85vw, + (max-width: 1024px) 67vw, + (max-width: 1200px) 62vw, + (max-width: 1440px) 58vw, 1200px'; + return $sizes; +} +add_filter( 'wp_calculate_image_sizes', 'foundationpress_adjust_image_sizes_attr', 10 , 2 ); + + +// Add custom image sizes attribute to enhance responsive image functionality for post thumbnails +function foundationpress_post_thumbnail_sizes_attr( $attr, $attachment, $size ) { + if ( 'post-thumbnail' === $size ) { + is_active_sidebar() && $attr['sizes'] = ' + (max-width: 640px) 85vw, + (max-width: 1024px) 67vw, + (max-width: 1200px) 60vw, + (max-width: 1440px) 62vw, 1024px'; + + ! is_active_sidebar() && $attr['sizes'] = ' + (max-width: 640px) 85vw, + (max-width: 1024px) 67vw, + (max-width: 1440px) 88vw, 1200px'; + } + return $attr; +} +add_filter( 'wp_get_attachment_image_attributes', 'foundationpress_post_thumbnail_sizes_attr', 10 , 3 ); + +?> diff --git a/library/theme-support.php b/library/theme-support.php index 574ecfa75..9834158ec 100755 --- a/library/theme-support.php +++ b/library/theme-support.php @@ -12,6 +12,15 @@ function foundationpress_theme_support() { // Add language support load_theme_textdomain( 'foundationpress', get_template_directory() . '/languages' ); + // Switch default core markup for search form, comment form, and comments to output valid HTML5 + add_theme_support( 'html5', array( + 'search-form', + 'comment-form', + 'comment-list', + 'gallery', + 'caption', + ) ); + // Add menu support add_theme_support( 'menus' ); From ad711d9298da56010a8ac1c351f6c085d77e8633 Mon Sep 17 00:00:00 2001 From: olefredrik Date: Mon, 28 Dec 2015 00:31:03 +0100 Subject: [PATCH 2/7] Uncomment cleanup reference --- functions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/functions.php b/functions.php index 02e8b6a62..890f7aa89 100755 --- a/functions.php +++ b/functions.php @@ -16,7 +16,7 @@ */ /** Various clean up functions */ -//require_once( 'library/cleanup.php' ); +require_once( 'library/cleanup.php' ); /** Required for Foundation to work properly */ require_once( 'library/foundation.php' ); From 7378828533ffe802a85497bcc64688eb26e1482c Mon Sep 17 00:00:00 2001 From: Ole Fredrik Lie Date: Wed, 9 Mar 2016 15:40:00 +0100 Subject: [PATCH 3/7] Change and test breakpoints --- gulpfile.js | 2 +- library/responsive-images.php | 31 ++++--------------------------- 2 files changed, 5 insertions(+), 28 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 2489e58f2..d9ca045d4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,7 +13,7 @@ var del = require('del'); // Enter URL of your local server here // Example: 'http://localwebsite.dev' -var URL = ''; +var URL = 'foundationpress/'; // Check for --production flag var isProduction = !!(argv.production); diff --git a/library/responsive-images.php b/library/responsive-images.php index 05dcbf3bc..49552d1ad 100644 --- a/library/responsive-images.php +++ b/library/responsive-images.php @@ -11,7 +11,6 @@ add_image_size( 'fp-small', 640 ); add_image_size( 'fp-medium', 1024 ); add_image_size( 'fp-large', 1200 ); - add_image_size( 'fp-xlarge', 1440 ); // Register the new image sizes for use in the add media modal in wp-admin add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' ); @@ -20,38 +19,16 @@ function wpshout_custom_sizes( $sizes ) { 'fp-small' => __( 'FP Small' ), 'fp-medium' => __( 'FP Medium' ), 'fp-large' => __( 'FP Large' ), - 'fp-xlarge' => __( 'FP X-Large' ), ) ); } // Add custom image sizes attribute to enhance responsive image functionality for content images function foundationpress_adjust_image_sizes_attr( $sizes, $size ) { $sizes = ' - (max-width: 640px) 85vw, - (max-width: 1024px) 67vw, - (max-width: 1200px) 62vw, - (max-width: 1440px) 58vw, 1200px'; + (max-width: 640px) 640px, + (max-width: 1024px) 1024px, + (max-width: 1200px) 1200px, + (min-width: 1201px) 1200px, 100vw'; return $sizes; } add_filter( 'wp_calculate_image_sizes', 'foundationpress_adjust_image_sizes_attr', 10 , 2 ); - - -// Add custom image sizes attribute to enhance responsive image functionality for post thumbnails -function foundationpress_post_thumbnail_sizes_attr( $attr, $attachment, $size ) { - if ( 'post-thumbnail' === $size ) { - is_active_sidebar() && $attr['sizes'] = ' - (max-width: 640px) 85vw, - (max-width: 1024px) 67vw, - (max-width: 1200px) 60vw, - (max-width: 1440px) 62vw, 1024px'; - - ! is_active_sidebar() && $attr['sizes'] = ' - (max-width: 640px) 85vw, - (max-width: 1024px) 67vw, - (max-width: 1440px) 88vw, 1200px'; - } - return $attr; -} -add_filter( 'wp_get_attachment_image_attributes', 'foundationpress_post_thumbnail_sizes_attr', 10 , 3 ); - -?> From 1e19eff54c2cb3b6c60c35caad46af780ee51b77 Mon Sep 17 00:00:00 2001 From: Ole Fredrik Lie Date: Thu, 10 Mar 2016 09:22:53 +0100 Subject: [PATCH 4/7] Fix image alignment and caption styling --- assets/scss/global/_wp-overrides.scss | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/assets/scss/global/_wp-overrides.scss b/assets/scss/global/_wp-overrides.scss index 9544a7c14..b6275090a 100755 --- a/assets/scss/global/_wp-overrides.scss +++ b/assets/scss/global/_wp-overrides.scss @@ -1,6 +1,8 @@ -.wp-caption{ +.wp-caption > figcaption { max-width: 100%; - margin: rem-calc(40) 0; + font-size: 0.8rem; + color: #999; + padding: 0.25rem 0; } p.wp-caption-text{ @@ -8,3 +10,21 @@ p.wp-caption-text{ color: #666; padding:rem-calc(10) 0; } + +.alignleft { + float: left; + padding-right: 1rem; + margin: 0; +} + +.alignright { + float: right; + padding-left: 1rem; + margin: 0; +} + +.aligncenter { + display: block; + margin-left: auto; + margin-right: auto; +} From a89d82687eab470eacfcdc85a22c5eb0fe0d2cbb Mon Sep 17 00:00:00 2001 From: Ole Fredrik Lie Date: Thu, 10 Mar 2016 09:44:48 +0100 Subject: [PATCH 5/7] Remove inline width and height attr for post thumbs --- library/responsive-images.php | 8 ++++++++ single.php | 12 +++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/library/responsive-images.php b/library/responsive-images.php index 49552d1ad..0bf3931c2 100644 --- a/library/responsive-images.php +++ b/library/responsive-images.php @@ -32,3 +32,11 @@ function foundationpress_adjust_image_sizes_attr( $sizes, $size ) { return $sizes; } add_filter( 'wp_calculate_image_sizes', 'foundationpress_adjust_image_sizes_attr', 10 , 2 ); + + +// Remove inline width and height attributes for post thumbnails +function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) { + $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html ); + return $html; +} +add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 ); diff --git a/single.php b/single.php index 3bf328598..a93f13ac5 100755 --- a/single.php +++ b/single.php @@ -20,13 +20,11 @@
- -
-
- 'th') ); ?> -
-
- +
From 0f24291452462264afb90e7e53a0d408be6d5a90 Mon Sep 17 00:00:00 2001 From: Ole Fredrik Lie Date: Thu, 10 Mar 2016 10:32:42 +0100 Subject: [PATCH 6/7] Fix WP-coding standard sniff violation --- library/responsive-images.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/responsive-images.php b/library/responsive-images.php index 0bf3931c2..a5543e765 100644 --- a/library/responsive-images.php +++ b/library/responsive-images.php @@ -36,7 +36,7 @@ function foundationpress_adjust_image_sizes_attr( $sizes, $size ) { // Remove inline width and height attributes for post thumbnails function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) { - $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html ); + $html = preg_replace( '/(width|height)=\"\d*\"\s/', '', $html ); return $html; } add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 ); From 6f9fe15e15601f1787a624b60c85fdab40fda922 Mon Sep 17 00:00:00 2001 From: Ole Fredrik Lie Date: Thu, 10 Mar 2016 10:46:44 +0100 Subject: [PATCH 7/7] Bump version number --- library/enqueue-scripts.php | 4 ++-- library/responsive-images.php | 2 +- package.json | 2 +- style.css | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/library/enqueue-scripts.php b/library/enqueue-scripts.php index 840c42850..fce76ad02 100755 --- a/library/enqueue-scripts.php +++ b/library/enqueue-scripts.php @@ -13,7 +13,7 @@ function foundationpress_scripts() { // Enqueue the main Stylesheet. - wp_enqueue_style( 'main-stylesheet', get_template_directory_uri() . '/assets/stylesheets/foundation.css', array(), '2.5.1', 'all' ); + wp_enqueue_style( 'main-stylesheet', get_template_directory_uri() . '/assets/stylesheets/foundation.css', array(), '2.6.0', 'all' ); // Deregister the jquery version bundled with WordPress. wp_deregister_script( 'jquery' ); @@ -23,7 +23,7 @@ function foundationpress_scripts() { // If you'd like to cherry-pick the foundation components you need in your project, head over to gulpfile.js and see lines 35-54. // It's a good idea to do this, performance-wise. No need to load everything if you're just going to use the grid anyway, you know :) - wp_enqueue_script( 'foundation', get_template_directory_uri() . '/assets/javascript/foundation.js', array('jquery'), '2.5.1', true ); + wp_enqueue_script( 'foundation', get_template_directory_uri() . '/assets/javascript/foundation.js', array('jquery'), '2.6.0', true ); // Add the comment-reply library on pages where it is necessary if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { diff --git a/library/responsive-images.php b/library/responsive-images.php index a5543e765..c4940772c 100644 --- a/library/responsive-images.php +++ b/library/responsive-images.php @@ -4,7 +4,7 @@ * * @package WordPress * @subpackage FoundationPress - * @since FoundationPress 2.2.0 + * @since FoundationPress 2.6.0 */ // Add additional image sizes diff --git a/package.json b/package.json index b463b69b6..61fa2d7ad 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "foundationpress", "title": "FoundationPress", - "version": "2.5.1", + "version": "2.6.0", "description": "FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb", "keywords": [ "FoundationPress", diff --git a/style.css b/style.css index 17d1a20bb..065d32357 100755 --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ Theme Name: FoundationPress Theme URI: http://foundationpress.olefredrik.com Github Theme URI: https://github.com/olefredrik/FoundationPress Description: FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb -Version: 2.5.1 +Version: 2.6.0 Author: Ole Fredrik Lie Author URI: http://olefredrik.com/