Merge pull request #657 from olefredrik/responsiveImages

Responsive images
olefredrik · Mar 10, 2016 · cd4ebb5 · cd4ebb5
2 parents fc98cc7 + 6f9fe15
commit cd4ebb5
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 168 deletions.
diff --git a/assets/scss/global/_wp-overrides.scss b/assets/scss/global/_wp-overrides.scss
@@ -1,13 +1,30 @@
-.wp-caption{
-  padding:rem-calc(4);
-}
-
-.wp-caption img{
-  max-width:100%;
+.wp-caption > figcaption {
+  max-width: 100%;
+  font-size: 0.8rem;
+  color: #999;
+  padding: 0.25rem 0;
 }
 
 p.wp-caption-text{
   font-size:90%;
   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;
+}
diff --git a/functions.php b/functions.php
@@ -44,5 +44,8 @@
 /** 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/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/cleanup.php b/library/cleanup.php
@@ -21,9 +21,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;
@@ -100,153 +97,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( "!<style type='text/css'>(.*?)</style>!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 = '<img src="' . $src . '"';
-
-                // If alt not empty, add it
-                if ( ! empty( $alt ) ) {
-                  $img .= ' alt="' . $alt . '"';
-                }
-
-                // Filter Through Class Segments & Find Alignment Classes and Size Classes
-                $filtered_classes = array();
-
-                foreach ( $class_segs as $class_seg ) {
-                    if ( substr( $class_seg, 0, 5 ) === 'align' || substr( $class_seg, 0, 4 ) === 'size' ) {
-                        $filtered_classes[] = $class_seg;
-                    }
-                }
-
-                // Add Rebuilt Classes and Close The Tag
-                if ( count( $filtered_classes ) ) {
-                    $img .= ' class="' . implode( $filtered_classes, ' ' ) . '" />';
-                } 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(
-	      '|(<img[^>]*>)|',
-	      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 = '
-	      <div' . $attributes . '>' .
-	        do_shortcode( $content ) .
-	        '<p class="' . $this->caption_p_class . '">' . $attr['caption'] . '</p>' .
-	      '</div>
-	    ';
-
-	    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/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
@@ -0,0 +1,42 @@
+<?php
+/**
+ * Configure responsive images sizes
+ *
+ * @package WordPress
+ * @subpackage FoundationPress
+ * @since FoundationPress 2.6.0
+ */
+
+ // Add additional image sizes
+ add_image_size( 'fp-small', 640 );
+ add_image_size( 'fp-medium', 1024 );
+ add_image_size( 'fp-large', 1200 );
+
+ // Register the new image sizes for use in the add media modal in wp-admin
+ add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
+ function wpshout_custom_sizes( $sizes ) {
+     return array_merge( $sizes, array(
+       'fp-small' => __( 'FP Small' ),
+       'fp-medium' => __( 'FP Medium' ),
+       'fp-large' => __( 'FP 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) 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 );
+
+
+// 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/library/theme-support.php b/library/theme-support.php
@@ -11,6 +11,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' );
 

diff --git 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/single.php b/single.php
@@ -20,13 +20,11 @@
 		<?php do_action( 'foundationpress_post_before_entry_content' ); ?>
 		<div class="entry-content">
 
-		<?php if ( has_post_thumbnail() ) : ?>
-			<div class="row">
-				<div class="column">
-					<?php the_post_thumbnail( '', array('class' => 'th') ); ?>
-				</div>
-			</div>
-		<?php endif; ?>
+		<?php
+			if ( has_post_thumbnail() ) :
+				the_post_thumbnail();
+			endif;
+		?>
 
 		<?php the_content(); ?>
 		</div>

diff --git 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/