Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added args for sizes, aspect ratio, included/excluded sizes. #35

Closed
wants to merge 1 commit into from
Closed

Added args for sizes, aspect ratio, included/excluded sizes. #35

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
151 changes: 126 additions & 25 deletions wp-tevko-responsive-images.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,48 +16,80 @@
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/



// First we queue the polyfill
function tevkori_get_picturefill() {
wp_enqueue_script( 'picturefill', plugins_url( 'js/picturefill.js', __FILE__ ), array(), '2.2.0', true );
}
add_action( 'wp_enqueue_scripts', 'tevkori_get_picturefill' );

//return an image with src and sizes attributes
// Return an image with srcset and sizes attributes
function tevkori_get_src_sizes( $id, $size, $args = array() ) {

$default_args = array(
'sizes' => array(),
'maintain_aspect_ratio' => true,
'excluded_sizes' => array(),
'included_sizes' => array()
);

$vars = wp_parse_args( $args, $default_args );

function tevkori_get_src_sizes( $id, $size ) {
$arr = array();
$srcset_arr = array();
$sizes_arr = array();

// See which image is being returned and bail if none is found
if ( ! $image = wp_get_attachment_image_src( $id, $size ) ) {
return false;
};

// break image data into url, width, and height
// Break image data into url, width, and height
list( $img_url, $img_width, $img_height ) = $image;

// image meta
// Image meta
$image_meta = wp_get_attachment_metadata( $id );

// default sizes
// Default sizes
$default_sizes = $image_meta['sizes'];

// add full size to the default_sizes array
// Add full size to the default_sizes array
$default_sizes['full'] = array(
'width' => $image_meta['width'],
'height' => $image_meta['height'],
'file' => $image_meta['file']
);

// Remove any hard-crops
// Go through each image size and unset the size if conditions are met.
foreach ( $default_sizes as $key => $image_size ) {

// calculate the height we would expect if this is a soft crop given the size width
$soft_height = (int) round( $image_size['width'] * $img_height / $img_width );
// Condition 1: Remove size if it is an excluded size.
if ( ! empty( $vars['excluded_sizes'] ) ) {

if ( in_array( $key, $vars['excluded_sizes'] ) ) {
unset( $default_sizes[ $key ] );
}

}

// Condition 2: Remove size if it is NOT an included size.
if ( ! empty( $vars['included_sizes'] ) ) {

if ( ! in_array( $key, $vars['included_sizes'] ) ) {

unset( $default_sizes[ $key ] );
}

}

// Condition 3: Remove any hard-crops, if maintain_aspect_ratio is true.
if ( TRUE == $vars['maintain_aspect_ratio'] ) {

// Calculate the height we would expect if this is a soft crop given the size width
$soft_height = (int) round( $image_size['width'] * $img_height / $img_width );

if ( $image_size['height'] !== $soft_height ) {
unset( $default_sizes[ $key ] );
}

if( $image_size['height'] !== $soft_height ) {
unset( $default_sizes[$key] );
}
}

Expand All @@ -70,37 +102,86 @@ function tevkori_get_src_sizes( $id, $size ) {

// Reference the size directly by it's pixel dimension
$image_src = wp_get_attachment_image_src( $id, $key );
$arr[] = $image_src[0] . ' ' . $size['width'] .'w';
$srcset_arr[] = $image_src[0] . ' ' . $size['width'] .'w';
}

return 'srcset="' . implode( ', ', $arr ) . '"';
}
// Set up srcset attribute
$srcset_attr = '';
if ( !empty( $srcset_arr ) ) {
$srcset_attr = 'srcset="' . implode( ', ', $srcset_arr ) . '"';
}

//extend image tag to include sizes attribute
// Set up sizes attribute
if ( ! empty( $vars['sizes'] ) ) {

foreach ( $vars['sizes'] as $key => $size_string ) {

// If the width isn't set, go on to the next one.
if ( ! isset( $size_string['width'] ) ) {
continue;
}

// Reset to empty from previous loop
$media_query = '';

// Set media query; extra space is better here,
// if there were no media query there would be an extra space.
if ( isset( $size_string['media_query'] ) ) {
$media_query = $size_string['media_query'] . ' ';
}

// Set width
$width = $size_string['width'];

// Add to array of sizes.
$sizes_arr[] = $media_query . $width;
}

}

$sizes_attr = '';
if ( ! empty( $sizes_arr ) ) {
$sizes_attr = 'sizes="' . implode( ', ', $sizes_arr ) . '"';
}

$src_sizes = '';

// If $srcset isn't blank, add it to the output.
if ( '' != $srcset_attr ) {
$src_sizes = $srcset_attr;
}

// If $sizes isn't blank and the output isn't blank, add $sizes.
if ( '' != $sizes_attr && $src_sizes != '' ) {
$src_sizes .= ' ' . $sizes_attr;
}

return $src_sizes;
}

// Extend image tag to include srcset attribute
function tevkori_extend_image_tag( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
add_filter( 'editor_max_image_size', 'tevkori_editor_image_size' );
$srcset = tevkori_get_src_sizes( $id, $size );
$src_sizes = tevkori_apply_content_src_filter( $id, $size );
remove_filter( 'editor_max_image_size', 'tevkori_editor_image_size' );
$html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1' . ' ' . $srcset, $html );
$html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1' . ' ' . $src_sizes, $html );
return $html;
}
add_filter( 'image_send_to_editor', 'tevkori_extend_image_tag', 0, 8 );

// filter post_thumbnail_html to add srcset attributes to post_thumbnails
// Filter post_thumbnail_html to add srcset attributes to post_thumbnails
function tevkori_filter_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
// if the HTML is empty, short circuit
// If the HTML is empty, short circuit
if ( '' === $html ) {
return;
}

$srcset = tevkori_get_src_sizes( $post_thumbnail_id, $size );
$html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1' . ' ' . $srcset, $html );
$src_sizes = tevkori_apply_post_thumbnail_src_filter( $post_thumbnail_id, $size );
$html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1' . ' ' . $src_sizes, $html );
return $html;
}
add_filter( 'post_thumbnail_html', 'tevkori_filter_post_thumbnail_html', 0, 5);


/**
* Disable the editor size constraint applied for images in TinyMCE.
*
Expand All @@ -117,3 +198,23 @@ function tevkori_load_admin_scripts( $hook ) {
}
}
add_action( 'admin_enqueue_scripts', 'tevkori_load_admin_scripts' );

// Apply filters for content tevkori_get_src_sizes
function tevkori_apply_content_src_filter( $id, $size, $args = array() ) {

$src_sizes = tevkori_get_src_sizes( $id, $size, $args );

$src_sizes = apply_filters( 'tevkori_get_content_src_sizes_filter', $src_sizes, $id, $size, $args );

return $src_sizes;
}

// Apply filters for post thumbnail tevkori_get_src_sizes
function tevkori_apply_post_thumbnail_src_filter( $id, $size, $args = array() ) {

$src_sizes = tevkori_get_src_sizes( $id, $size, $args );

$src_sizes = apply_filters( 'tevkori_get_post_thumbnail_src_sizes_filter', $src_sizes, $id, $size, $args );

return $src_sizes;
}