Skip to content
This repository has been archived by the owner on Aug 5, 2022. It is now read-only.

Commit

Permalink
Adds featured image size
Browse files Browse the repository at this point in the history
  • Loading branch information
Dan Holloran committed Jan 27, 2015
1 parent a35bb47 commit f912419
Showing 1 changed file with 11 additions and 273 deletions.
284 changes: 11 additions & 273 deletions snifter/classes/class-sn-images.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,24 +53,18 @@ public function __construct() {
* @return void
*/
public function set_image_sizes() {
// Example size - Duplicate this and get image resizing (for normal sizes)
// $this->image_sizes[] = array(
// 'width' => 220,
// 'height' => 130,
// 'title' => '220x130', // The default will be widthxheight but any string can be used
// 'used_in' => array(
// 'title' => 'Example Size', // Title to be used in Media notification
// 'link' => '', // Link to an image of the created size to be used in Media notification
// )
// );
global $content_width;

// For responsive images
// $responsive_image_sizes = array(
// 'med' => 400,
// 'small' => 300,
// 'xs_small' => 300,
// );
// $this->register_responsive_sizes( 500, 200, 'some_image', $responsive_image_sizes, 'Used in some image spot' );
// Featured Image Size
$this->image_sizes[] = array(
'width' => $content_width, // set in includes/init.php
'height' => '',
'title' => 'featured-image-size', // The default will be widthxheight but any string can be used
'used_in' => array(
'title' => 'Featured Image Size', // Title to be used in Media notification
'link' => '', // Link to an image of the created size to be used in Media notification
)
);

// Featured image administrator column image size
$this->image_sizes[] = array(
Expand All @@ -87,50 +81,6 @@ public function set_image_sizes() {



/**
* Sets the image sizes for the responsive images plugin.
*
* <code>
* $responsive_image_sizes = array(
* 'med' => 400,
* 'small' => 300,
* 'xs_small' => 300,
* );
* $this->register_responsive_sizes( 500, 200, 'some_image', $responsive_image_sizes, 'Used in some image spot' );
* </code>
*
* @since Snifter 1.0.0
*
* @param integer $orig_width Image largest/original width, this will be the 'full' size title.
* @param integer $orig_height Image largest/original height.
* @param string $base_title The title that will be prepended to the image size title.
* @param array $img_sizes {
* @type string $title Size title. => @type integer $width Image width.
* }
* @param string $used_in Title to be used in Media notification
*
* @return void
*/
private function register_responsive_sizes( $orig_width, $orig_height, $base_title, $img_sizes, $used_in = '' ) {
$img_sizes['full'] = ( isset( $img_sizes['full'] ) ) ? $img_sizes['full'] : $orig_width;

foreach ( $img_sizes as $title => $newWidth ) {
$height = round( $orig_height / $orig_width * $newWidth );
$used_in = ( $used_in == '' ) ? '' : "{$used_in} ";

$this->image_sizes[] = array(
'width' => $newWidth,
'height' => $height,
'title' => "{$base_title}_{$title}", // The default will be widthxheight but any string can be used
'used_in' => array(
'title' => "{$used_in}", // Title to be used in Media notification
'link' => '', // Link to an image of the created size to be used in Media notification
)
);
} // foreach()
} // register_responsive_sizes()




/**
Expand Down Expand Up @@ -233,218 +183,6 @@ public function reference_grid_html() {

return $html;
} // function reference_grid_html()



/**
* Retrieves the responsive image.
* Requires responsive images plugin to be activated in Grunt uglify config.
*
* <code>
* $resp_image = $sn_stub->get_responsive_image( get_the_id(), 'some_image', null, true, array( 'title' => 'My title image' ) );
* </code>
*
* @since Snifter 1.0.0
*
* @see https://github.com/kvendrik/responsive-images.js
*
* @param integer $src_id The attachment ID or the post ID to get the featured image from.
* @param string $base_title The base title of your responsive image size set in SN_Images->set_image_sizes().
* @param string $default_img Optional, default image URL, defaults to the 'full' size image, used if Javascript is not supported.
* @param boolean $echo Optional, to output the responsive image, default true.
* @param array $attrs Optional, HTML attributes to add to the img tag.
*
* @return string The responsive image HTML with no script fall back.
*/
public function get_responsive_image( $src_id, $base_title, $default_img = null, $echo = true, $attrs = array() ) {
global $is_IE;

$attachment_id = $this->get_responsive_attachment_id( $src_id );
$attachment_src = wp_get_attachment_image_src( $attachment_id, 'full' );
$full_image = $attachment_src[0];
$img_attrs = $this->merge_responsive_image_attrs( $attrs, $attachment_id );

// Make sure this image has not been cropped by the VIP cropper.
if ( strpos( $full_image, 'wp.com' ) !== false or $is_IE ) {
return "<img src='{$full_image}' {$img_attrs}>";
} // if()

$data_src = $this->get_responsive_image_data_src( $attachment_id, $base_title );
$image = '';
$pathinfo = pathinfo( $full_image );
$dirname = $pathinfo['dirname'];
$default_img = ( is_null( $default_img ) ) ? $full_image : $default_img;
$default_img = esc_url( $default_img );

if ( $data_src == '' ) {
$image = "<img src='{$full_image}' {$img_attrs}>";
} else {
$image .= "<img data-src-base='' data-src='{$data_src}' {$img_attrs}>";
$image .= "<noscript><img src='{$default_img}' {$img_attrs}></noscript>";
} // if/else()

if ( $echo ) {
echo $image;
} // if()

return $image;
} // get_responsive_image()



/**
* Handles merging together the different sizes for the data-src attribute.
*
* <code>
* $data_src = $this->get_responsive_image_data_src( $attachment_id, $base_title );
* </code>
*
* @since Snifter 1.0.0
*
* @see https://github.com/kvendrik/responsive-images.js
*
* @param integer $attachment_id The attachment ID to use when retrieving the image(s).
* @param string $base_title The image size base title.
*
* @return string The image data SRC values.
*/
public function get_responsive_image_data_src( $attachment_id, $base_title ) {
$img_sizes = $this->get_responsive_image_sizes( $base_title );
$data_src = array();

foreach ( $img_sizes as $img_size => $data_size ) {
$attachment_src = wp_get_attachment_image_src( $attachment_id, $img_size );
$src_url = esc_url( $attachment_src[0] );
$data_src[] = "{$data_size}:{$src_url}";
} // foreach

$data_src = trim( implode( ',', $data_src ) );

return $data_src;
} // get_responsive_image_data_src()



/**
* Merges the supplied attributes so they can be added to the image.
*
* <code>
* $img_attrs = $this->merge_responsive_image_attrs( $attrs, $attachment_id );
* </code>
*
* @since Snifter 1.0.0
*
* @param array $attrs The attributes to be merged.
* @param integer $attachment_id The attachment ID of the responsive image.
*
* @return string The merged attributes.
*/
public function merge_responsive_image_attrs( $attrs, $attachment_id ) {
$default_attrs = array(
'alt' => get_the_title( $attachment_id ),
'class' => 'img-responsive',
);

// Merge the class attributes together
if ( isset( $attrs['class'] ) ) {
$attrs['class'] = "{$default_attrs['class']} {$attrs['class']}";
} // if()

// Merge all attributes together
$attrs = array_merge( $default_attrs, $attrs );

if ( is_null( $attrs['alt'] ) ) {
unset( $attrs['alt'] );
} // if()

// Merge attributes together
$img_attrs = '';
foreach ( $attrs as $key => $value ) {
$key = esc_attr( $key );
$value = esc_attr( $value );
$img_attrs .= "{$key}='{$value}' ";
} // if()

return trim( $img_attrs );
} // merge_responsive_image_attrs()



/**
* Handles retrieving the thumbnail ID if the src_id is not an attachment.
*
* <code>
* $attachment_id = $this->get_responsive_attachment_id( $src_id );
* </code>
*
* @since Snifter 1.0.0
*
* @param integer $src_id Either an attachment ID or the post ID to retrieve the thumbnail ID.
*
* @return integer The attachment ID.
*/
public function get_responsive_attachment_id( $src_id ) {
$post_id = intval( $src_id );
$post_type = get_post_type( $post_id );

// Handles an attachment id
if ( $post_type == 'attachment' ) {
return $post_id;
} // if()

// Handles featured image thumbnail
return get_post_thumbnail_id( $post_id );
} // get_responsive_attachment_id()



/**
* Retrieves the responsive image sizes.
*
* <code>
* $img_sizes = $this->get_responsive_image_sizes( $base_title );
* </code>
*
* @since Snifter 1.0.0
*
* @param string $base_title The base image size used when adding responsive image sizes.
*
* @return array The responsive image sizes.
*/
public function get_responsive_image_sizes( $base_title ) {
global $_wp_additional_image_sizes;
$image_sizes = get_intermediate_image_sizes();
$resp_sizes = array();
$sizes = array();

// Get the sizes that match the base title
foreach ( $image_sizes as $image_size ) {
if ( strpos( $image_size, $base_title ) !== false ) {
$resp_sizes[] = $image_size;
} // if()
} // foreach()

// Get the responsive image sizes
foreach ( $resp_sizes as $size ) {
if ( in_array( $size, array( 'thumbnail', 'medium', 'large' ) ) ) {
$sizes[$size] = get_option( $size . '_size_w' );
} elseif ( isset( $_wp_additional_image_sizes ) && isset( $_wp_additional_image_sizes[ $size ] ) ) {
$sizes[$size] = $_wp_additional_image_sizes[ $size ]['width'];
} //if/else
} // foreach()

// Sort the sizes from largest to smallest
asort( $sizes, SORT_NUMERIC );

// Add the greater/less than so it will load them correctly.
$i = 0;
foreach ( $sizes as $key => $size ) {
$sizes[$key] = ( $i == count( $sizes ) - 1 ) ? ">{$size}" : "<{$size}";
$i = $i + 1;
} // foreach()

return $sizes;
} // get_responsive_image_sizes()
} // END Class SN_Images()

global $sn_images;
Expand Down

0 comments on commit f912419

Please sign in to comment.