Responsive images with CE Image

pi.responsive_images.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

/**
 * Responsive Images Class
 *
 * @package         ExpressionEngine
 * @category        Plugin
 * @author          TJ Fogarty
 * @copyright       Copyright (c) 2014, TJ Fogarty
 * @link            http://www.emagine.ie
 */

$plugin_info = array(
	'pi_name'         => 'Responsive Images',
	'pi_version'      => '1.0',
	'pi_author'       => 'TJ Fogarty',
	'pi_author_url'   => 'http://www.emagine.ie',
	'pi_description'  => 'Returns image tag with srcset + sizes - requires CE Image',
	'pi_usage'        => Responsive_images::usage()
);

class Responsive_images {

	public $return_data = "";

	/**
	 * Responsive_images
	 *
	 * Return img tag with srcset and sizes
	 *
	 * @access public
	 */
	public function __construct() {

		$defaults = array(
			"class" => "ce-responsive",
			"alt" => "",
			"quality" => 80,
			"crop" => "no"
		);

		$img_attr = array(
			'src' => ee()->TMPL->fetch_param("image"),
			'widths' => ee()->TMPL->fetch_param("widths"),
			'sizes' => ee()->TMPL->fetch_param("sizes"),
			'class' => ee()->TMPL->fetch_param("class"),
			'alt' => ee()->TMPL->fetch_param("alt"),
			'quality' => ee()->TMPL->fetch_param("quality"),
			'crop' => ee()->TMPL->fetch_param("crop")
		);


		// Replace any missing parameters with defaults
		foreach ($img_attr as $attr => $value) {
			if (!$img_attr[$attr]) {
				$img_attr[$attr] = $defaults[$attr];
			}
		}

		$resized_images_array = explode("|", $img_attr["widths"]);

		$resized_images = $this->generate_ce_image_tags($resized_images_array, $img_attr);

		// TODO: Clean it up
		$build = '<img alt="' . $img_attr['alt'] . '" class="' . $img_attr['class'] . '" src="'. $img_attr['src'] .'" sizes="'. $img_attr['sizes'] . '" srcset="' . $resized_images . '">';

		return $this->return_data = $build;
	}

	/**
	 * @param $resized_images_array
	 * @param $img_attr
	 *
	 * @return string
	 */
	public function generate_ce_image_tags($resized_images_array, $img_attr) {

		if (!class_exists('CE_image')) {
			require PATH_THIRD . 'ce_img/libraries/Ce_image.php';
		}

		$i = 0;
		$len = count($resized_images_array);

		$result = '';

		foreach ($resized_images_array as $width) {

			$ce_image = new Ce_image(
				array(
					'quality' => $img_attr['quality'],
					'width' => $width,
					'url_only' => 'yes',
					'crop' => $img_attr['crop']
				)
			);

			$ce_image->make($img_attr['src']);

			$tag = $ce_image->get_relative_path() . ' ' . $width . 'w';

			$result .= $tag;

			// Last width value won't have a comma after it
			if ($i < $len - 1) {
				$result .= ", ";
			}

			$i++;
		}

		return $result;
	}


	/**
	 * Usage
	 *
	 * @access public
	 * @return string
	 */
	public static function usage() {
		ob_start();
		?>

		Output an img tag with srcset and sizes attributes. Requires CE Image.

		{exp:responsive_images image="{image_home}" widths="480|600|1000" sizes="100vw" class="hero__image"}
		<?php

		$buffer = ob_get_contents();
		ob_end_clean();

		return $buffer;
	}
}