Output responsive image tags from ACF Image Field

acf-responsive-image.php

<?php

/**
 * Output Responsive Image Tag based on ACF Image Field
 *
 * @param $image 		(array) 	ACF Image Field
 * @param $size 		(string) 	Image size name (ie. medium, large, my-custom-image-size )
 * @param $lazyload (bool) 		Enable/Disable lazy loading of responsive images (requires lazysizes.js to be loaded — see https://github.com/aFarkas/lazysizes)
 * @param $classes 	(array) 	Array of class names to apply to the image
 * @author Eivind Borgersen for Hyphen
 * @version 1.0.2
 * @link https://wearehyphen.co
 *
 **/
function acf_responsive_image( $image,$size,$lazyload = true,$classes ) {
	// Get the size data from the ACF Image Field
	$data = $image['sizes'];

	// Set 'lazyload' class if $lazyload
	if( $lazyload )
		$classes[] = 'lazyload';

	// Set up arrays for size (string), and width (int) data
	$sizes 		= array();
	$widths 	= array();
	$heights 	= array();
	$ratio 		= null;


	// Separate data from the ACF Image array
	foreach( $data as $key => $value ) {
		if( strpos( $key,'width' ) !== false ) {
			// Width values (int)
			$widths[] = $value;
		} else if( strpos( $key,'height' ) !== false ) {
			// Height values (int).
			$heights[] = $value;
		} else {
			// Size names (string)
			$sizes[] = $key;
		}
	}

	// Get largest size (int) and the array key (int)
	if( $size ) {
		$w 	= $data[$size . '-width'];
		$h 	= $data[$size . '-height'];
		$wk = array_search( $w,$widths );
	} else {
		$w 	= max( $widths );
		$wk = array_search( $l,$widths );
		$h  = $heights[$wk];
	}

	// Define the ratio to prevent lazy loading of off-ratio images in the output
	$ratio = round( $h / $w,2 ); // Rounding to two decimal points to be able to match the ratio more easily

	// Get count of $sizes and $widths (int) to loop through
	$cs = count( $sizes );
	$cw = count( $widths );

	// Set largest image as default src
	$src = $data[$sizes[$wk]];

	// Markup
	// $o_classes Image classes
	if(! empty( $classes ) ) {
		$o_classes .= 'class="' . join( ' ',$classes ) . '"';
	}
	
	// $o_src Image SRC
	if( $lazyload ) {
		$o_src = ' data-src="' . $src . '"';
	} else {
		$o_src .= ' src="' . $src . '"';
	}

	// $o_srcst Image SRCSET
	if( $lazyload ) {
		$o_srcset = ' data-srcset="';
		for( $i = 1; $i < $cs; $i++ ) {
			if( $widths[$i] <= $w && round( $data[$sizes[$i] . '-height'] / $widths[$i], 2) === $ratio  ) {
				$o_srcset .= $data[$sizes[$i]] . ' ' . $widths[$i] . 'w';
			} else { 
				$cs--;
			}
			if( $i < $cs-1 ) $o_srcset .= ',';
		}
		$o_srcset .= '"';
	} else {
		$o_srcset = 'srcset="';
		for( $i = 1; $i < $cs; $i++ ) {
			if( $widths[$i] <= $w ) {
					$o_srcset .= $data[$sizes[$i]] . ' ' . $widths[$i] . 'w';
				} else { 
					$cs--;
				}
				if( $i < $cs-1 ) $o_srcset .= ',';
		}
		$o_srcset .= '"';
	}

	// $o_sizes Image Sizes
	$o_sizes .= 'sizes="(max-width: ' . $w . 'px) 100vw, ' . $w . 'px"';
	
	// $output .= '/>';
	// Image Markup
	$output = '<img ' . $o_classes . ' ' . $o_src . ' ' .  $o_srcset . ' ' . $o_sizes . ' width="' . $w . '" height="' . $h . '" />';

	echo $output;
}