ControlledChaos
5/3/2017 - 5:16 PM

Add srcset and sizes attributes to Advanced Custom Fields image uploads.

Add srcset and sizes attributes to Advanced Custom Fields image uploads.

README.md
content_copyfile_download
  • Rendered
  • Source

ACF Responsive Images

WordPress Snippet

Adds the srcset and sizes attributes to ACF image uploads. Requires installation of the Advanced Custom Fields plugin.

NOTE: ACF image field must be set to return the ID.

NOTE: WordPress needs image sizes with equal aspect ratios in order to generate the srcset, and does not use srcset when images are added as "Full Size".

functions-snippets-custom.php
content_copyfile_download
<?php

/**
 * Add srcset & sizes to custom sizes
 * 
 * This goes in your functions.php file or plugin file.
 */

/*
 * Add custom image sizes
 * 
 * Example header uses 16:9 HD video aspect ratio
 */
 function ccd_add_image_sizes() {
  add_image_size( 'header-large', 2048, 1152, true );
  add_image_size( 'header-medium', 1024, 576, true );
  add_image_size( 'header-small', 640, 360, true );
 }
 add_action( 'after_setup_theme', 'ccd_add_image_sizes' );

?>
functions-snippets.php
content_copyfile_download
<?php

/**
 * These go in your functions.php file or plugin file.
 */

/*
 * Add srcset & sizes.
 */
function ccd_responsive_images( $image_id, $image_size, $max_width ) {
	// Check if the image ID is not blank
	if ( $image_id != '' ) {
		// Set the default src image size
		$image_src = wp_get_attachment_image_url( $image_id, $image_size );
		// Set the srcset with various image sizes
		$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
		// Generate the markup for the responsive image
		echo 'src="' . $image_src . '" srcset="' . $image_srcset . '" sizes="(max-width: ' . $max_width . ') 100vw, ' . $max_width . '"';
	}
}

/*
 * Optional: change the WordPress default maximum width of 1600px.
 */
function ccd_max_srcset_image_width() {
  return 2048;
}
add_filter( 'max_srcset_image_width', 'ccd_max_srcset_image_width', 10 , 2 );

?>
template-snippet-custom.php
content_copyfile_download
<?php

/**
 * Use the srcset with custom image
 * sizes in a template file.
 */
$header_img    = get_field( 'ccd_header_image' );
$header_size   = 'header-large';
$header_src    = wp_get_attachment_image_src( $header_img, $header_size );
$header_srcset = wp_get_attachment_image_srcset( $header_img, $header_size );
?>

<img class="header-class" src="<?php echo esc_url( $header_src[0] ); ?>" srcset="<?php echo esc_attr( $header_srcset ); ?>" sizes="(max-width: 640px) 640px, (max-width: 1024px) 1024px, 2048px" />
template-snippet.php
content_copyfile_download
<?php

/**
 * Use the srcset function in a template file.
 */
<img class="img-class" <?php ccd_responsive_images( get_field( 'img_field' ), 'thumb-640', '640px' ); ?> />

?>