Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Responsive images #657

Merged
merged 9 commits into from
Mar 10, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions assets/scss/global/_wp-overrides.scss
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 3 additions & 0 deletions functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
2 changes: 1 addition & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
150 changes: 0 additions & 150 deletions library/cleanup.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions library/enqueue-scripts.php
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand All @@ -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' ) ) {
Expand Down
42 changes: 42 additions & 0 deletions library/responsive-images.php
Original file line number Diff line number Diff line change
@@ -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 ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume the code comes from this WPShout article but shouldn't custom function in the theme start with the same foundationpress_ rather than using wpshout_ from the article?

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 );
9 changes: 9 additions & 0 deletions library/theme-support.php
Original file line number Diff line number Diff line change
Expand Up @@ -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' );

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
12 changes: 5 additions & 7 deletions single.php
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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/

Expand Down