TextformatterSrcset.module

<?php

class TextformatterSrcset extends Textformatter implements ConfigurableModule {

	/**
	 * Module information
	 *
	 */

	public static function getModuleInfo() {
		return array(
			'title' => 'Srcset Image Textformatter', 
			'version' => 100, 
			'summary' => "Adds the srcset to images within a textarea" ,
			'author' => 'Conclurer GbR'
		); 
	}
	
	/**
	 * Module settings
	 *
	 */
	 
	protected static $defaultConfigData = array(

		// settings
			"resolutions" => "350,700", //Only numbers, seperated by comma
			"sizes" => "auto", //What to put into the sizes attribute
			"retina" => true, //Create an image double the largest image size for HiDPI devices
			"data_attr"=> false, //Add the data-* attributes
			"wh_attr" => false, //Should we add width and height attributes?
			"lqp" => true, //Use a low quality placeholder for the src attribute
			"small_source" => false, //Use the smallest size as a source image instead of a scaled down image
			"class" => '' //Classes added to the image
			
			
		);

	protected $data = array(); // module data
	/**
	 * Set all settings to data
	 *
	 */

	public function __construct() {
		foreach(self::$defaultConfigData as $key => $value) {
			$this->data[$key] = $value;
		}
	}

  	/**
	 * Get data by key
	 *
	 */

	public function __get($key) {
		return isset($this->data[$key]) ? $this->data[$key] : null;
	}

 	/**
	 * Set data at given key
	 *
	 */

    public function __set($key, $value) {
		$this->data[$key] = $value;
	}

	public function formatValue(Page $page, Field $field, &$str) {		
		//Get all image tags from the $str and place them in $images
		preg_match_all('/<img[^>]+>/i',$str, $images);
		$images = $images[0];
		
		//No images? Then return
		if(count($images)==0) return;
		
		//#todo What happens if this is only 1 image?
		//Setup... 
		$matches = array();
		$fileLocation = wire("config")->urls->files;
		$sizes = array_map( 'intval', array_filter( explode(',', $this->resolutions), 'is_numeric' ));
		sort($sizes);
		$options = array( 'upscaling' => false, 'cropping' => true);
		$options_low = array( 'upscaling' => true, 'cropping' => true, 'quality' => floor(wire("config")->imageSizerOptions['quality']*0.33));
		
		//Looping through all images
		foreach($images as $original) {
			
			//Building our new image string
			$new = ''; 
			$meta = array();
			/**
			* The following code was taken and modified from Martijn Geerts and the TextformatterImageInterceptor module.
			*/
			//Get the PageImage from our image
			if(strpos($original, $fileLocation)) {			
				
				//Find source image
				preg_match_all( '/src="(.*?)"/i', $original, $array);
				$meta['source'] = $array[1][0]; // original
				
				// ProcessWire alignment done with a class
				preg_match_all( '/class="(.*?)"/i', $original, $array);
				$meta['pw_align'] = isset($array[1][0]) ? $array[1][0] : null; // original
				
				
				//Get alt tag if it exists
				preg_match_all( '/alt="(.*?)"/i', $original, $array);
				$meta['alt'] = isset($array[1][0]) ? $array[1][0] : null; 		
				
				// example: 1023/image-name.100x100.jpg
				$string = str_replace($fileLocation, "", $meta['source']);
				// create array
				$array = explode("/", $string);	
				
				// id of page where where image belongs to
				$meta['id'] = (int) $array[0];
				// refering to to page where the image lives.
				$p = wire("pages")->get($meta['id']);
				
				// raw image variation name
				$variationName = $array[1];		

				// basename of image.
				//$imageName = preg_replace("/\d+x\d+\./i","", $variationName);				
				$tmp1= explode('.',$variationName);
				$meta['imageName'] = $tmp1[0];				
				$meta['ext'] = $tmp1[count($tmp1)-1];
				
				//Thanks to Horst Nogajski for the following snippet
				foreach($p->fields as $field) {
				    if (! (bool) ($field->type instanceof FieldtypeImage)) continue; // if no images field, go on
				    
				    // find the field that holds the image
				    if (!$p->get($field->name)->has('name=' . $meta['imageName'] . '.' . $meta['ext'])) continue;
				    

					$image = $p->get($field->name)->get('name=' . $meta['imageName'] . '.' . $meta['ext']);			
				}
				
				//Get image size #todo use regex here
				$array = explode(".",$string);
				$array = substr($array[count($array)-2],0,-3); //Get the image tag and remove everything. results in e.g. 720x201 
				$array = explode("x",$array);
				if(count($array) == 2) //Shitty filtering in case it is the original image
					$meta['width'] = (int)$array[0];
				else
					$meta['width'] = $image->width;					
				//$meta['height'] = $array[1]; //Height is set to always 0 by PW
			}
			//$image is now our PageImage, $p the page of the Image

			/**
			* Build the srcset
			*/			
			//When no sizes are set
			if(empty($sizes)){
				$srcset = "{$meta['source']} 1x";
				//... and retina is active
				if($this->retina) {
					//And our image is sized (e.g. larger image possible). Then we can provide a better image to HiDPI devices
					if($image->width() > $meta['width']) {
						//Create retina version
						$retina_image = $image->size($meta['width']*2,0,$options);
						$srcset .= ", {$retina_image->url} 2x";
					}
				}
			}
			else {
				//Sizes are set
				$srcset = "";
				
				//For every size
				foreach($sizes as $size) {
					//Do we need this size as a source?
					if($size < $meta['width']) {
						//Orientation
						if($image->width > $image->height) {
							$new_image = $image->size($size,0,$options);
						}
						else {
							$new_image = $image->size(0,$size,$options);
						}
						$srcset .= "{$new_image->url} {$new_image->width}w,";
					}
					
				}		
				//If HiDPI is enabled
				if($this->retina) {
					if($image->width() >= $meta['width']) {
						//Create retina version
						$retina_image = $image->size($meta['width']*2,0,$options);
					}
					else {
						//Use the largest image
						$retina_image = $image;
					}
					$srcset .= "{$retina_image->url} {$retina_image->width}w,";
				}
				
				//Remove the last comma
				$srcset = substr($srcset,0,-1);

			}
						
			/**
			* Build the src 
			*/
			$src = $meta['source'];
			
			if($this->lqp OR $this->small_source) {
				//Should we use the smalles image from the sizes?
				if($this->small_source && !empty($sizes)) {
					//Orientation
					if($image->width > $image->height) {
						$src_image = $image->size($sizes[0],0,$options);
					}
					else {
						$src_image = $image->size(0,$sizes[0],$options);
					}
				}
				//Or do we really use a LQ image? Note, the 300 size is fixed here
				else {
					$new_size =  floor($image->width*0.2);
					$src_image = $image->size($new_size,0,$options_low);
				}
				$src = $src_image->url;
			}						
				
						
			/**
			* Finally, Build the <img>
			*/
			$attribute = '';
			$wh_attr = '';
			$class = '';
			
			if($this->data_attr) {
				$attribute = "data-";
			}
			if($this->wh_attr) {
				$tmp_height = $image->size($meta['width'],0)->height; 
				$wh_attr = " width='{$meta['width']}' height='{$tmp_height}'";
			}
			
			if($meta['pw_align'] != "" OR $this->class != "") {
				$class = " class='";
				if($meta['pw_align'] != "")
					$class .= "{$meta['pw_align']} ";
				if($this->class != '')
					$class .= "{$this->class}";
				$class .= "'";
			}
			

			//Put it all together
			$new = "<img src='{$src}' {$attribute}srcset='{$srcset}' {$attribute}sizes='{$this->sizes}'{$wh_attr} alt='{$meta['alt']}'{$class}/>";
			
			//Add to our new images
			$matches[] = $new;
		}
		
		//Replace all Image tags with our new ones and return.
		$str = str_replace($images,$matches,$str);
		return;
	}

    /**
     * Return an InputfieldsWrapper of Inputfields used to configure the class
     *
     * @param array $data Array of config values indexed by field name
     * @return InputfieldWrapper
     *
     */
    public static function getModuleConfigInputfields(array $data)
    {
        $data = array_merge(self::$defaultConfigData, $data);
        $wrapper = new InputfieldWrapper();

        $resolutionsInput = wire('modules')->get('InputfieldText');
        $resolutionsInput->name = 'resolutions';
        $resolutionsInput->label = __('Resolutions');
        $resolutionsInput->description = __('Enter the resolutions (in Pixel) to be created for the srcset. Seperate by comma, leave empty if you do not need multiple sizes.');
        $resolutionsInput->value = $data['resolutions'];
        $wrapper->add($resolutionsInput);

        $sizesInput = wire('modules')->get('InputfieldText');
        $sizesInput->name = 'sizes';
        $sizesInput->label = __('Sizes-Attribute');
        $sizesInput->description = __('Enter the value for the "sizes" attribute. Default is "auto".');
        $sizesInput->value = $data['sizes'];
        $wrapper->add($sizesInput);

        $retinaInput = wire('modules')->get('InputfieldCheckbox');
        $retinaInput->name = 'retina';
        $retinaInput->label = __('Generate HiDPI images');
        $retinaInput->description = __('Activate to create HiDPI images (double resolution). They appear as an additional size.');
        if(!empty($data['retina'])) $retinaInput->checked = 1;
        $wrapper->add($retinaInput);
        
        $lqpInput = wire('modules')->get('InputfieldCheckbox');
        $lqpInput->name = 'lqp';
        $lqpInput->columnWidth = 50;
        $lqpInput->label = __('Low-quality Placeholder');
        $lqpInput->description = __('Activate to create a low-quality placeholder (LQP) image for the src-attribute.');
        if(!empty($data['lqp'])) $lqpInput->checked = 1;
        $wrapper->add($lqpInput);
        
        $small_sourceInput = wire('modules')->get('InputfieldCheckbox');
        $small_sourceInput->name = 'small_source';
        $small_sourceInput->columnWidth = 50;
        $small_sourceInput->label = __('Use smallest size as LQP');
        $small_sourceInput->description = __('Activate to use the smallest sized image as the low-quality placeholder');
        if(!empty($data['small_source'])) $small_sourceInput->checked = 1;
        $wrapper->add($small_sourceInput);
        
        $wh_attrInput = wire('modules')->get('InputfieldCheckbox');
        $wh_attrInput->name = 'wh_attr';
        $wh_attrInput->columnWidth = 50;
        $wh_attrInput->label = __('Width/Height Attributes');
        $wh_attrInput->description = __('Activate to add the right width and height attribute.');
        if(!empty($data['wh_attr'])) $wh_attrInput->checked = 1;
        $wrapper->add($wh_attrInput);
             
        $data_attrInput = wire('modules')->get('InputfieldCheckbox');
        $data_attrInput->name = 'data_attr';
        $data_attrInput->columnWidth = 50;
        $data_attrInput->label = __('Data* Attributes');
        $data_attrInput->description = __('Activate to add a data*- before the srcset and sizes attributes.');
        if(!empty($data['data_attr'])) $data_attrInput->checked = 1;
        $wrapper->add($data_attrInput);

        $classInput = wire('modules')->get('InputfieldText');
        $classInput->name = 'class';
        $classInput->label = __('CSS Class');
        $classInput->description = __('Enter CSS-class names that will be added to each image.');
        $classInput->value = $data['class'];
        $wrapper->add($classInput);

        return $wrapper;
    }
}