get_responsive_img().php

/**
* Include responsive image
* @param		array		$aImageScope			The image settings
* @param		array		$aClasses				Apply classes to the image (optional)
* API Reference: https://ewww.io/exactdn-api/
* @example:
* $aImage = [
* 	'image_url'						=> 'https://assets.imgix.net/examples/treefrog.jpg',
* 	'alt'							=> 'Alternative text',
* 	'picture_tag'					=> true,
*	'strip_tags'					=> true,
* 	'settings'						=> [
* 		'resize' 						=> '800,800',
* 		'lb'							=> 1
* 	],
* 	'data'							=> 'data-scroll data-scroll-speed="-.5"',
* 	'sizes'							=> [
* 		[
* 			'media_query'				=> '(min-width: 1200px)',
* 			'image_url'					=> 'https://assets.imgix.net/unsplash/windows.jpg',
* 			'settings'					=> [
* 				'resize' 					=> '1600,1600',
* 				'lb'						=> 1
* 			]
* 		], [
* 			'media_query'				=> '(min-width: 800px)',
* 			'image_url'					=> 'https://assets.imgix.net/unsplash/bear.jpg',
* 			'settings'					=> [
* 				'resize' 					=> '1200,1200',
* 				'lb'						=> 1
* 			]
* 		]
* 	]
* ];
* get_responsive_img( $aImage, [ '-class1', '-class2' ] );
*/
function get_responsive_img( $aImageScope = [ 'picture_tag' => false, 'settings' => '' ], $aClasses = [] ) {

	// Strip existing tags
	if ( isset( $aImageScope['strip_tags'] ) && $aImageScope['strip_tags'] ) {
		$aImageScope['image_url'] = strtok( $aImageScope['image_url'], '?' );
	}

	// Start <picture> tag if (`picture` is picture_tag)
	if ( isset( $aImageScope['picture_tag'] ) && $aImageScope['picture_tag'] ) {

		// Start tag (with optional classes and smooth scroll)
		echo '<picture';
		if ( isset( $aImageScope['data'] ) ) echo ' ' . $aImageScope['data'];
		if ( ! empty( $aClasses ) ) echo ' class="' . implode( ' ', $aClasses ) . '"';
		echo '>';

		/**
		* Additional images based on viewport size
		*/
		if ( isset( $aImageScope['sizes'] ) ) {
			foreach( $aImageScope['sizes'] as $aSize ) {

				// Strip existing tags
				if ( isset( $aImageScope['strip_tags'] ) && $aImageScope['strip_tags'] ) {
					$aSize['image_url'] = strtok( $aSize['image_url'], '?' );
				}

				// Image sources
				echo '<source srcset="';
					$aImageSettings = ( isset( $aSize['settings'] ) ? $aSize['settings'] : $aImageScope['settings'] );
					$sImageUrl = add_query_arg( ( isset( $aImageSettings ) ? $aImageSettings : [] ), ( isset( $aSize['image_url'] ) ? $aSize['image_url'] : $aImageScope['image_url'] ) );
					echo $sImageUrl;
				echo '" media="' . $aSize['media_query'] . '" />';

			}
		}

	}

		/**
		* Default <img> tag (with optional classes and smooth scroll)
		*/
		echo '<img ';
		if ( ! isset( $aImageScope['picture_tag'] ) && isset( $aImageScope['data'] ) ) echo ' ' . $aImageScope['data'];
		if ( ! isset( $aImageScope['picture_tag'] ) && ! empty( $aClasses ) ) echo ' class="' . implode( ' ', $aClasses ) . '"';
		echo 'src="' . ( isset( $aImageScope['settings'] ) ? add_query_arg( $aImageScope['settings'], $aImageScope['image_url'] ) : $aImageScope['image_url'] ) . '" ';
		if ( isset( $aImageScope['alt'] ) ) echo 'alt="' . $aImageScope['alt'] . '" ';
		echo '/>';

	// Close tag
	if ( isset( $aImageScope['picture_tag'] ) ) echo '</picture>';

}