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

Responsive images #657

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f419a5f
Add support for responsive images
olefredrik Dec 27, 2015
ad711d9
Uncomment cleanup reference
olefredrik Dec 27, 2015
027ed5f
Merge in master branch
olefredrik Mar 9, 2016
7378828
Change and test breakpoints
olefredrik Mar 9, 2016
1e19eff
Fix image alignment and caption styling
olefredrik Mar 10, 2016
a89d826
Remove inline width and height attr for post thumbs
olefredrik Mar 10, 2016
42762e1
Merge branch 'master' into responsiveImages
olefredrik Mar 10, 2016
0f24291
Fix WP-coding standard sniff violation
olefredrik Mar 10, 2016
6f9fe15
Bump version number
olefredrik Mar 10, 2016
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
7 changes: 2 additions & 5 deletions assets/scss/global/_wp-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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{
Expand Down
5 changes: 4 additions & 1 deletion functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -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' );

Expand Down
150 changes: 0 additions & 150 deletions library/cleanup.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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( "!<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
57 changes: 57 additions & 0 deletions library/responsive-images.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<?php
/**
* Configure responsive images sizes
*
* @package WordPress
* @subpackage FoundationPress
* @since FoundationPress 2.2.0
*/

// Add additional image sizes
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' );
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' ),
'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 );

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

Expand Down